jQuery逆引きリファレンス
非同期通信のキャッシュを無効化するには？（$.ajax［cache］）
Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。
別稿「TIPS：一般的なAjax通信を実装するには？」では、$.ajaxメソッドを利用したAjax通信の基本について解説しました。本稿では、引き続き、その動作パラメーターの一つであるcacheについて解説します。cacheパラメーターを利用することで、Ajax通信の結果をキャッシュするか否かを制御できます。
まずは、cacheパラメーターを利用しない例から見ていきましょう。以下は、［現在時刻］ボタンをクリックすると、サーバー側（current.php）で生成された現在時刻を表示するシンプルなサンプルです。
|
<?php
print date('H時i分s秒');
|
|
<!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>
|
このコードをChrome／Firefox／Edgeなどのブラウザーから動作した場合には問題ありません。［現在時刻］ボタンをクリックするたびに、時刻が更新されます。
［現在時刻］ボタンをクリック
しかし、Internet Explorerではどうでしょう。ボタンを何度クリックしても時刻は更新されません。これはInternet ExplorerがAjax通信の結果をキャッシュしてしまうために生じた結果です。
このような問題を防ぐには、cacheパラメーターに明示的にfalseを指定します。これによって、キャッシュが無効化され、今度はInternet Explorer環境でも時刻が更新されることが確認できます。
|
$.ajax('current.php',
{
type: 'get',
dataType: 'text',
cache: false
}
)
|
API：jQuery.ajax() カテゴリ：Ajax > Low-Level Interface（低レベルインターフェース）
※以下では、本稿の前後を合わせて5回分（第58回～第62回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
59. 一般的なAjax通信を実装するには？（$.ajax）
非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。
60. 【現在、表示中】≫ 非同期通信のキャッシュを無効化するには？（$.ajax［cache］）
Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。
61. Ajax通信の前に処理を実行するには？（$.ajax［beforeSend］）
Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。
62. Ajax通信で得られたコンテンツを加工するには？（$.ajax［dataFilter］）
$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工／編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。
