第9回 Ajax編（後編）：連載：jQuery逆引きリファレンス（6/10 ページ）

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

連載目次

　例えば、以下のようなスクリプトはInternet Explorerでは正しく動作しません。これは、［現在時刻］ボタンをクリックしたタイミングでサーバサイド（Current.aspx*）から現在時刻を取得し、ページに反映するコードです。しかし、Internet ExplorerではデフォルトでAjax通信をキャッシュしてしまうため、ボタンを繰り返しクリックしても最新の時刻が表示されないのです。

* Current.aspxのコードは「非同期に読み込んだコンテンツをそのままページに反映させるには？」を参照してください。

<script type="text/javascript">

$(function() {

  // ボタン・クリック時の挙動を定義
  $('#btn').click(function() {

    // Ajax通信を実行
    $.ajax({
      url: './Current.aspx', // アクセス先のURL
      success: function(data) {
        $('#result').html(data);
      } // 通信成功時には応答データを<div>要素に反映
    });
  });
});

</script>

  ……中略……

<form>
  <input type="button" id="btn" value="現在時刻" />
  <div id="result"></div>
</form>

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

ブラウザで開く

リスト124の実行結果
Internet ExplorerではデフォルトでAjax通信をキャッシュしてしまうため、ボタンを繰り返しクリックしても最新の時刻が表示されない。

　この問題は、$.ajaxメソッドのcacheパラメータにfalseを指定することで回避できます。

// Ajax通信を実行
$.ajax({
  url: './Current.aspx',
  cache: false,
  success: function(data) {
    $('#result').html(data);
  }
});

リスト124の$.ajaxメソッド呼び出しにcacheパラメータを追加

　これによって、Internet Explorerでもキャッシュが行われなくなり、最新のデータをサーバ側から取得するようになるためです。