第8回 Ajax編（前編）：連載：jQuery逆引きリファレンス（2/11 ページ）
ｊQueryを使えばAjax技術による非同期処理も簡潔に記述できる。Ajax関連の基本メソッドをまとめた、すぐに役立つ10本を一挙公開。
loadメソッドを利用することで、指定されたURL（引数url）の内容をカレント要素に反映させることができます。サーバ側から取得したコンテンツを、そのままページに反映させたいという場合に利用します。Ajax関連メソッドの中でも、最もシンプルなメソッドです。
さっそく具体的なサンプルを見てみましょう。以下では、［現在時刻］ボタンをクリックしたタイミングで、サーバサイド（.aspxファイル）から現在時刻を取得し、ページに反映します。
<%@ Page Language="VB" %>
<%= DateTime.Now.ToString() %>
<script type="text/javascript">
$(function() {
// キャッシュを無効化（Internet Explorer対応）
$.ajaxSetup({ cache: false });
// ボタン・クリック時の挙動を定義
$('#btn').click(function() {
// Current.aspxの内容を<div>要素に反映
$('#result').load('./Current.aspx');
});
});
</script>
……中略……
<form>
<input type="button" id="btn" value="現在時刻" />
<div id="result"></div>
</form>
このHTMLを実際にブラウザで開く
loadメソッドで必須の引数はurlだけです。ここでは無条件にCurrent.aspxの内容を取得し、その結果を<div id="result">に反映させています。すでにサーバで表示レイアウトを整形済みであり、クライアント側ではただその結果だけを反映させればよいという場合にはloadメソッドは有効な手段でしょう。
なお、$.ajaxSetupメソッドはAjax通信の動作パラメータを設定するためのメソッドで、ここではキャッシュを無効化しています。Internet ExplorerではデフォルトでAjax通信をキャッシュするため、この設定がないと正しく現在時刻が反映されませんので注意してください。
別解として、以下のようなコードを記述しても構いません。
// Ajax通信前の処理を実行
$('*').ajaxSend(function(ev, xhr, opt) {
// 1970/1/1より後にリソースが更新されているかをチェック
xhr.setRequestHeader(
'If-Modified-Since',new Date(1970, 0, 1).toGMTString());
});
ajaxSetup、ajaxSendメソッドに関する詳細は、あらためて後日詳述の予定です。
Copyright© Digital Advantage Corp. All Rights Reserved.