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にタイムスタンプを付与するデモページ
　

【参考サイト】

• IE11 で開発者ツールを立ち上げていないと ConsoleAPI や Ajax キャッシュ問題で稀によくしぬ話 – BattleProgrammerShibata