js STUDIO

.load()

サーバーからデータをロードし、マッチした要素内に戻り値のHTMLを配置します。

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

戻り値:jQuery

引数説明
dataType

型：String

送信するリクエスト先のURL文字列を指定します。

data

型:PlainObject or String

リクエストと一緒に送信する文字列またはプレーンオブジェクトを指定します。

complete(responseText, textStatus, XMLHttpRequest)

型：Function()

リクエストが完了した際に実行したい関数を指定します。

注: イベントにも同じ名前の.load()という名前のメソッドが存在します。 jQueryは渡された引数を元に、どちらであるかを判断します。

このメソッドは、サーバーからデータを取得してくる最もシンプルな手法です。 グルーバル関数では無い事と暗黙のコールバック関数を持つことを除いて、$.get(url, data, success)とほぼ同等です。 成功したレスポンスであると判断された(例:textStatusが"success"または"notmodified")場合、.load()は 取得したデータをマッチした要素にHTMLとしてセットします。 

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

どの要素にもマッチしていなかった場合、(上記の例ですと、id="result"を含む要素がなかった場合) Ajaxのリクエストは送信されません。

コールバック関数

もし、"complete"コールバックが提供されていた場合、送信処理とHTMLの挿入処理の後に実行されます。 コールバック関数はマッチしている各要素それぞれで実行され、関数内のthisにはそれぞれのDOM要素がセットされます。 

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

もしdocument内にidが"result"の要素が含まれない場合、.load()メソッドは実行されません。

リクエストメソッド

dataにオブジェクトが提供されていた場合はPOSTメソッドが使用され、そうでなければGETメソッドが使用されます。

コンテンツのロード

.loadメソッドは$.get()とは違い、挿入する要素をリモートのドキュメント内の特定の箇所として指定することが出来ます。 これはURLに特別なシンタックスを与えることで実現されます。 もし、１つまたは複数の空白文字列をが文字列に含まれていれば、最初のスペースの後ろの文字列の部分は jQueryのセレクタであるとみなされて、ロードされる内容を決定します。

上記の例を指定したセレクタに対してのみ適用するよう、次のように修正できます。 

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

このメソッドが実行されると、ajax/test.htmlの内容を取得し、jQueryは"container"のIDを持つ要素を見つけるために分析を行います。 この要素(取得した内容)は、"result"のIDを持つ要素に挿入され、他の残りはドキュメントは破棄されます。

jQueryはブラウザの.innerHTMLプロパティを、取得したドキュメントを分析するために使用し、 それを開いているページのdocumentに挿入します。 その際に、<html>、<title>、<head>といった要素は大抵の場合、ブラウザによってフィルタリングされます。

そのため、.load()によって取得された要素は、ブラウザによって直接取得したものと全く同じになるとは限りません。

スクリプトの実行

セレクタ指定無しでURLを使用して.load()を呼び出した場合、スクリプトが削除される前の.html()(の結果?)が渡されます。 スクリプトが削除される前に、スクリプトのブロックを実行します。 もし、セレクタ指定入りのURLによって.load()を呼び出した場合、要素が更新される前にスクリプトは取り除かれてしまい実行されることはありません。 下記の両方のケースでの例を参照してください。

#aにjavaScriptがロードされ、実行されます。 

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

しかし、次のケースでは#bにロードされるスクリプトのブロックは取り除かれ、実行されません。 

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

追記: ブラウザのセキュリティ制限により、ほとんどの"Ajax"リクエストは、同一生成元ポリシーの対象となります。 別のドメイン、サブドメイン、またはプロトコルから場合、リクエストはデータを正しく取得することが出来ません。

デモ

<ol>に、主ページのトップナビゲーションをロードします。 

<!DOCTYPE html>
<html>
<head>
  <style>
 body{ font-size: 12px; font-family: Arial; }
 </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>ナビゲーション</b>
<ol id="new-nav"></ol>
<script>
  $("#new-nav").load("/ .navbar ul.nav li:not(.divider-vertical)");
</script>
</body>
</html>

Ajaxリクエストがエラーになった場合、そのエラー内容を表示します。 

<!DOCTYPE html>
<html>
<head>
  <style>
  body{ font-size: 12px; font-family: Arial; }
  div { margin-bottom : 20px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<b>成功 (何も表示されないはず):</b>
<div id="success"></div>
<b>エラー:</b>
<div id="error"></div>

<script>
$("#success").load("/not-here", function(response, status, xhr) {
  if (status == "error") {
    var msg = "リクエストは失敗しました。: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
</script>
</body>
</html>

サンプル

配列のデータをサーバに渡します。

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

パラメータをPOSTし、サーバーとの応答が完了した際に指定したコールバック関数を実行します。

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("最新の25エントリーをロードしました。");
});

 Back to top

© 2010 - 2017 STUDIO KINGDOM