Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

非同期通信のキャッシュを無効化するには?($.ajax[cache])

2016年12月15日

Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:一般的なAjax通信を実装するには?」では、$.ajaxメソッドを利用したAjax通信の基本について解説しました。本稿では、引き続き、その動作パラメーターの一つであるcacheについて解説します。cacheパラメーターを利用することで、Ajax通信の結果をキャッシュするか否かを制御できます。

 まずは、cacheパラメーターを利用しない例から見ていきましょう。以下は、[現在時刻]ボタンをクリックすると、サーバー側(current.php)で生成された現在時刻を表示するシンプルなサンプルです。

PHP
<?php
print date('H時i分s秒');
現在時刻を取得するためのコード(current.php)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
  <input type="button" id="btn" value="現在時刻" />
  <div id="result"></div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  // ボタンクリック時に現在時刻を表示
  $('#btn').click(function() {
      // current.phpから現在時刻を取得
      $.ajax('current.php',
        {
          type: 'get',
          dataType: 'text'
        }
      )
      // 取得した現在時刻を出力
      .done(function(data) {
        $('#result').text(data);
      });
  });
});
</script>
</body>
</html>
サーバー側で用意された現在時刻を取得/表示するためのコード(cache.html)

 このコードをChrome/Firefox/Edgeなどのブラウザーから動作した場合には問題ありません。[現在時刻]ボタンをクリックするたびに、時刻が更新されます。

[現在時刻]ボタンをクリック

[現在時刻]ボタンをクリック

[現在時刻]ボタンをクリックするたびに時刻を更新
[現在時刻]ボタンをクリックするたびに時刻を更新

 しかし、Internet Explorerではどうでしょう。ボタンを何度クリックしても時刻は更新されません。これはInternet ExplorerがAjax通信の結果をキャッシュしてしまうために生じた結果です。

 このような問題を防ぐには、cacheパラメーターに明示的にfalseを指定します。これによって、キャッシュが無効化され、今度はInternet Explorer環境でも時刻が更新されることが確認できます。

JavaScript
$.ajax('current.php',
  {
    type: 'get',
    dataType: 'text',
    cache: false
  }
)
キャッシュを明示的に無効化したコード(cache.html)
処理対象:基本 カテゴリ:Ajax
API:jQuery.ajax() カテゴリ:Ajax > Low-Level Interface(低レベルインターフェース)

※以下では、本稿の前後を合わせて5回分(第58回~第62回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
58. thisキーワードの参照先を固定するには?($.proxy)

文脈により変化するthisキーワードの参照先を、$.proxyメソッドにより固定する方法を説明する。

jQuery逆引きリファレンス
59. 一般的なAjax通信を実装するには?($.ajax)

非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。

jQuery逆引きリファレンス
60. 【現在、表示中】≫ 非同期通信のキャッシュを無効化するには?($.ajax[cache])

Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
61. Ajax通信の前に処理を実行するには?($.ajax[beforeSend])

Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
62. Ajax通信で得られたコンテンツを加工するには?($.ajax[dataFilter])

$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工/編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!