jQuery逆引きリファレンス
非同期通信で取得したコンテンツをページに反映させるには？（load）
loadメソッドを使って、外部のWebページを非同期に取得して、それをコンテンツ内の要素に反映させる方法を説明する。
指定されたページを非同期通信で取り込み、現在の要素に反映するには、loadメソッドを利用します。
loadメソッドの基本
例えば以下は、ボタンクリックでload.phpの結果を取り込み、id="result"である要素に反映する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<button id="update">時刻更新</button>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// ボタンクリック時にload.phpを非同期通信で取得
$('#update').click(function() {
$('#result').load('load.php');
});
});
</script>
</body>
</html>
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<script>
window.alert('時刻を更新しました。');
</script>
</head>
<body>
<span id="dt"><?php print(date('Y/M/d H:i:s'));?></span>
</body>
</html>
|
※このサンプルを試すには、PHPが動作するサーバーサイド環境に配置する必要があります。
以下は、ページの初期画面と［時刻更新］ボタンをクリックした時の結果です。
［時刻更新］ボタンをクリック
挙動そのものはごくシンプルですが、一点、注意すべき点があります。以下はChromeの開発者ツールから［時刻更新］ボタンをクリックした後の文書ツリーです。
<div id="result">要素配下の内容が、load.phpの結果そのものではないことが見て取れます。loadメソッドはページに結果を反映させる際に、<html>／<head>／<body>などの要素を（中身を残して）除去します。もちろん、非同期呼び出しされるページは、本来、<html>などを含まないページの断片であるべきですが、ページの内容によっては、loadメソッドは取得したデータをそのまま反映させるわけではない点に注意してください。
［Note］反映させるべき要素がない場合
loadメソッドによって反映させるべき要素（ここでは<div id="result">要素）が存在しない場合、非同期通信そのものが発生しません。試しに、id属性を「result2」のように変更した上でサンプルを動作させてみましょう。
セレクター指定でページの断片だけを取り出す
読み込むべきファイル名の後方にセレクター式を指定することで、取り込んだページの一部だけを反映させることもできます。以下は、先ほどのリストの太字部分を書き換え、<span id="dt">要素だけを取り出すようにしたコードです。
|
$('#result').load('load.php #dt');
|
Chromeの開発者ツールから確認すると、確かに<span id="dt">要素の配下だけがページに反映されていることが確認できます。
なお、セレクター式を指定した場合、ページに反映される前にスクリプトも破棄されます。結果、先ほどは実行されていたwindow.alert('時刻を更新しました。');も実行されないことが確認できます。
非同期通信が成功したときの処理を指定する
先ほどの例では、説明の便宜上、読み込まれるページの側で、読み込み終了時に実行されるスクリプトを指定していました。しかし、同様の処理をloadメソッドでコールバック関数を指定することでも実装できます*1。
- *1 読み込みから読み込み終了時の処理をまとめるという意味では、まずは
loadメソッドで表すのが無難でしょう。
以下が、その具体的なコードです。
|
$('#result').load('load.php #dt',
function(text, status, xhr) {
window.alert('時刻を更新しました。');
});
|
コールバック関数は、引数として以下の内容を受け取ります。
- 応答本文
- 応答ステータス
jqXHR（jQuery版のXMLHttpRequestオブジェクト）
なお、応答本文にはloadメソッドで<html>／<head>などの要素が除去される前の、生の応答が含まれます。
HTTP POST経由でデータを取得する
loadメソッド経由で取得先のページにデータを渡すこともできます。例えば以下は、先ほどのサンプルを修正し、日付フォーマットを呼び出し元から指定する例です（結果は先ほどと同じなので、割愛しています）。
|
$('#result').load('load.php #dt',
{ format: 'Y/M/d H:i:s' },
function(text, status, xhr) {
window.alert('時刻を更新しました。');
});
|
|
<span id="dt"><?php print(date($_POST['format']));?></span>
|
データはオブジェクトリテラルの形式で渡します。この例であれば、formatパラメーターを一つだけ渡していますが、もちろん、複数のパラメーターを列記しても構いません。
なお、オブジェクト形式でパラメーターを渡した場合、loadメソッドはHTTP POST*2で非同期通信する点に注意してください。よって、PHP側でもスーパーグローバル変数$_POSTでもってパラメーターを取得しています。
- *2 デフォルトはHTTP GETで通信します。
API：.load() カテゴリ：Ajax > Shorthand Methods（簡略表記メソッド）
※以下では、本稿の前後を合わせて5回分（第21回～第25回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
21. イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。
22. イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）
イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。
23. 【現在、表示中】≫ 非同期通信で取得したコンテンツをページに反映させるには？（load）
loadメソッドを使って、外部のWebページを非同期に取得して、それをコンテンツ内の要素に反映させる方法を説明する。
24. あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
jQueryが提供する基本的なアニメーション機能を活用して、要素を表示／非表示、フェードイン／アウト、スライドアップ／ダウンさせる方法を説明する。
25. 実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。
