サイト制作に関するメモ書き

HOME > JavaScript > jQuery > IEでAjaxのキャッシュが残る件

IEでAjaxのキャッシュが残る件

Ajaxを使った実装をした際に、IEでキャッシュが残って変更されない不具合に遭遇したので対応方法をメモしておきます。

対応前

サーバーの日付を取得して、表示してみます。

HTML

<div>日時:<span id="time"></span></div>

JavaScript

$(function() {
	$.ajax({
		type: 'GET'
	}).done(function(data, status, xhr) {
		var date = new Date(xhr.getResponseHeader('Date'));
		$('#time').text(date);
	});
});

ほかのブラウザではうまく表示できていますが、IEだとうまく表示されていませんでした。
対応前のデモページ
 

対応方法

Ajaxのパラメータにcache: falseを追加して、キャッシュを残さないようにするといいようです。

JavaScript

$(function() {
	$.ajax({
		type: 'GET',
	    cache: false
	}).done(function(data, status, xhr) {
		var date = new Date(xhr.getResponseHeader('Date'));
		$('#time').text(date);
	});
});

IEで見ても正しく表示されるようになりました。
cache: falseを追加したデモページ

Ajaxで同じURLにリクエストしなければいいので、AjaxのリクエストURLにタイムスタンプでパラメータを付ける方法でも対応できます。

JavaScript

$(function() {
	var timestamp = new Date().getTime();
	$.ajax({
		type: 'GET',
		url: location.href + '?' + timestamp
	}).done(function(data, status, xhr) {
		var date = new Date(xhr.getResponseHeader('Date'));
		$('#time').text(date);
	});
});

URLにタイムスタンプを付与するデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP