IE9でajaxでの取得がうまくできない

IE9以下でajaxを使用した際に、データをうまく取得できなかったので、その対応方法をメモ。

サンプルコード

HTML

<div id="sample"></div>

JavaScript

$(function() {
	$.ajax({
		type : 'GET',
		url: './get.php',
		dataType: 'xml',
		success: function(data) {
			// 取得件数
			var getCount = 5;
			if ($('item', data).length < getCount) {
				getCount = data.length;
			};

			var insert = '';
			insert += '<h1>';
			// リンク先の挿入
			insert += '<a href="' + $('channel', data).children('link').text() + '">';
			// タイトルの挿入
			insert += $('channel', data).children('title').text();
			insert += '</a>';
			insert += '</h1>';

			insert += '<ul>';
			for (var i = 0; i < getCount; i++) {
				var thisItem = $('channel', data).children('item').eq(i);
				insert += '<li>';

				// 日時の挿入
				insert += '<p class="pubDate">';
				insert += thisItem.children('pubDate').text();
				insert += '</p>';

				// タイトルの挿入
				insert += '<p class="title">';
				insert += thisItem.children('title').text();
				insert += '</p>';

				// リンク先の挿入
				insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';

				insert += '</li>';
			};
			insert += '</ul>';

			$('#sample').append(insert);
		}
	});
});

IE9でajaxでの取得がうまくできないデモページ

色々調べてみたところ、キャッシュが残ってしまっているのが原因のようでした。
　

解決方法

取得先URLの後にパラメーターを追加することで、毎回キャッシュがない状態で取得するようにしています。

JavaScript

$(function() {
	$.ajax({
		type : 'GET',
		url: './get.php?' + parseInt((new Date)/1000),
		dataType: 'xml',
		success: function(data) {
			// 取得件数
			var getCount = 5;
			if ($('item', data).length < getCount) {
				getCount = data.length;
			};

			var insert = '';
			insert += '<h1>';
			// リンク先の挿入
			insert += '<a href="' + $('channel', data).children('link').text() + '">';
			// タイトルの挿入
			insert += $('channel', data).children('title').text();
			insert += '</a>';
			insert += '</h1>';

			insert += '<ul>';
			for (var i = 0; i < getCount; i++) {
				var thisItem = $('channel', data).children('item').eq(i);
				insert += '<li>';

				// 日時の挿入
				insert += '<p class="pubDate">';
				insert += thisItem.children('pubDate').text();
				insert += '</p>';

				// タイトルの挿入
				insert += '<p class="title">';
				insert += thisItem.children('title').text();
				insert += '</p>';

				// リンク先の挿入
				insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';

				insert += '</li>';
			};
			insert += '</ul>';

			$('#sample').append(insert);
		}
	});
});

4行目のparseInt((new Date)/1000)の部分で乱数を作成し、パラメーターとして付与しています。
対応後のデモページ

もしくは、単純にajaxのオプションでcacheの指定があるみたいなので、こちらでも対応できます。

JavaScript

$(function() {
	$.ajax({
		type : 'GET',
		cache: false,
		url: './get.php',
		dataType: 'xml',
		success: function(data) {
			// 取得件数
			var getCount = 5;
			if ($('item', data).length < getCount) {
				getCount = data.length;
			};

			var insert = '';
			insert += '<h1>';
			// リンク先の挿入
			insert += '<a href="' + $('channel', data).children('link').text() + '">';
			// タイトルの挿入
			insert += $('channel', data).children('title').text();
			insert += '</a>';
			insert += '</h1>';

			insert += '<ul>';
			for (var i = 0; i < getCount; i++) {
				var thisItem = $('channel', data).children('item').eq(i);
				insert += '<li>';

				// 日時の挿入
				insert += '<p class="pubDate">';
				insert += thisItem.children('pubDate').text();
				insert += '</p>';

				// タイトルの挿入
				insert += '<p class="title">';
				insert += thisItem.children('title').text();
				insert += '</p>';

				// リンク先の挿入
				insert += '<a href="' + thisItem.children('link').text() + '">詳細はコチラ</a>';

				insert += '</li>';
			};
			insert += '</ul>';

			$('#sample').append(insert);
		}
	});
});

4行目のcache: false とすることで、通信結果をキャッシュに残さないようにします。
対応後のデモページ2
　

【参考サイト】

• $.ajax()がIEでうまく動かない – sheherher
• 【jQuery1.9.0】 IEで$.ajaxしても更新されない場合の対処法; キャッシュの無効化 – ぐぐったら出てきた。