第8回 Ajax編（前編）：連載：jQuery逆引きリファレンス（2/11 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　loadメソッドを利用することで、指定されたURL（引数url）の内容をカレント要素に反映させることができます。サーバ側から取得したコンテンツを、そのままページに反映させたいという場合に利用します。Ajax関連メソッドの中でも、最もシンプルなメソッドです。

　さっそく具体的なサンプルを見てみましょう。以下では、［現在時刻］ボタンをクリックしたタイミングで、サーバサイド（.aspxファイル）から現在時刻を取得し、ページに反映します。

<%@ Page Language="VB" %>
<%= DateTime.Now.ToString() %>

リスト105 現在時刻を返すためのコード（Current.aspx）

<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>

リスト106 サーバ側から取得した現在時刻を非同期に反映（Load.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト106の実行結果
ボタン・クリックの都度、現在時刻をページに反映。

　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());
});

リスト107 ajaxSendメソッドを使ったキャッシュの無効化

　ajaxSetup、ajaxSendメソッドに関する詳細は、あらためて後日詳述の予定です。