.load()

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] ) Returns: jQuery

説明: サーバからデータをロードし、読込んだHTMLをマッチした要素に配置します。

version added: 1.0 .load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

urlリクエストを送信するURLを含む文字列。

dataリクエストと一緒にサーバへ送信するマップや文字列を指定します。

complete(responseText, textStatus, XMLHttpRequest)リクエストが完了したときに実行されるコールバック関数。

このメソッドは、サーバからデータを取得する最も簡単な方法です。これは、$とほぼ同等です。それは方法ではなくグローバル関数であり、それは暗黙のコールバック関数を持っていることを除いて（URL、データ、成功）を取得します。メソッドではなくグローバル関数であることと、暗黙のコールバック関数を持っていることを除けば、 $.get(url, data, success) とほぼ同じです。レスポンスの成功が検出された（すなわち textStatus が "success" または "notmodified" ）場合、 .load() は、マッチした要素のHTMLコンテンツへ返されたデータを設定します。次は、メソッドの使用方法が非常に簡単であることを示しています

$('#result').load('ajax/test.html');

指定のコールバックがあれば、後処理が実行された後に実行されます:

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

上記2つの例で、ドキュメントに ID が "result" である要素がなければ、.load() メソッドは実行されません。

データがオブジェクトの場合は POSTメソッドが使用され、それ以外の場合は GET が使用されます。

注:イベント処理スイートにも、.load() と言うメソッドがあります。どちらが実行されるかは、渡された引数のセットに依存します。

ページをロードするフラグメント

.load() メソッドは、$.get() とは異り、挿入するリモートドキュメントの一部を指定することができます。これは、urlurl に対する特殊な構文で実現します。1つ以上のスペースが文字列に含まれ場合、最初のスペースに続く文字列の一部は、ロードするコンテンツを決定するjQueryのセレクタであると見なされます。

取って来たドキュメントの一部のみを使用するため、上記の例を次のように変更することができます:

$('#result').load('ajax/test.html #container');

このメソッドが実行されると、ajax/test.htmlのコンテンツを取得しますが、次に、 jQuery は container という ID を持つ要素を検索するために返されたドキュメントをパースします。要素は、そのコンテンツと一緒に、result という ID を持つ要素に挿入され、取得ドキュメントの残りの部分は破棄されます。

クjQuery は、取得したドキュメントをパースし、現在のドキュメントへ挿入するため、ブラウザの .innerHTML プロパティを使用します。このプロセス中に、ブラウザは、しばしばドキュメントから <html>、 <title>、<head> のような要素をフィルタリングします。その結果、ドキュメントがブラウザから直接取出された場合と、.load() によって取出された要素は完全に同じではありません。

注: 接尾辞セレクタ表現（suffixed selector expression）を使用しない URL で .load() を呼出す場合、スクリプトは、コンテンツを削除する前に .html() へ渡します。これは、それらが廃棄される前に、スクリプト・ブロックを実行します。しかしながら、.load() が、URLにセレクタ表現を追加して呼出される場合、スクリプトは、DOM が更新される前に取出されるので、実行されません。両方の場合の例を下に示します:

こちらは、JavaScriptが正常に実行された場合、ドキュメントの一部として #a の中にロードされます。

$('#a').load('article.html');

しかし、この場合は、 #b にロードされるドキュメント内のスクリプトブロックは、実行前に取出されます:

$('#b').load('article.html #target');

補注:

ブラウザのセキュリティ制限のため、ほとんどの "Ajax"のリクエストは同一生成元ポリシ（same origin policy）に従います ; リクエストは、別のドメイン、サブドメイン、またはプロトコルからデータを取得することはできません。

例:

例:順序付きリストに、メインページのフッターナビゲーションをロードします。

<!DOCTYPE html>
<html>
<head>
  <style>
 body{ font-size: 12px; font-family: Arial; }
 </style>
  <script src="/files/jquery.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
<script>
  $("#new-nav").load("/ #jq-footerNavigation li");
</script>
</body>
</html>

デモ:

例:Ajaxリクエストがエラーを検出した場合に注意を表示します。

<!DOCTYPE html>
<html>
<head>
  <style>
  body{ font-size: 12px; font-family: Arial; }
  </style>
  <script src="/files/jquery.js"></script>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>
</body>
</html>

デモ:

例:ID が feeds である div 要素に feeds.html ファイルをロードします。

$("#feeds").load("feeds.html");

Result:

<div id="feeds"><b>45</b> feeds found.</div>

例:サーバへデータの配列を渡します。

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

例:上記と同じですが、追加パラメータとサーバが応答を完了したときに実行されるコールバック関数をサーバへPOST通信します。

$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});