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

» 2010年07月30日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 例えば、以下のようなスクリプトは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でもキャッシュが行われなくなり、最新のデータをサーバ側から取得するようになるためです。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。