Blogブログ

jqureyの非同期通信でloadを使うとIE8でバグが起きる対処法!

2013/09/24

非同期通信は便利ですが、IE8(Internet Explorer8、インターネットエクスプローラー8)で

jqueryのload()関数を仕様して、Cookieに値を保存するプログラムを使おうとすると、

一回目の処理は正常に動くのですが、

2回目以降の挙動がおかしくなります。

(IE8はWindowsXPに入っているので、あと半年(2014年の4月頃まで)くらいは使っている人が結構いると推測されます。
それ辺でXPのサポートが切れるので使っている人は減っていくとは思います。)

具体的に私が作ったコードは以下です。

※htmlのheadタグ内に記述してあるjavascript部分を抜粋しています。

function updateData(id){
$('#data').load('data_read.php?id='+id);
}

ちょっと省略してありますが

このような感じでボタンが押されると

updateData()関数が呼ばれて#dataというIDをつけた領域のデータを更新される関数を自作しました。

data_read.phpは別に用意して、GETでidの引数をつけてアクセスするとデータをCookieに保存する処理が書かれています。

ChromeやFireFoxでは動くのですが、

IE8のみ、ブラウザを起動して初回は正常に動作しますが、2回目以降の挙動がおかしくなります。

2回目以降のアクセスの挙動を理解するため、

function updateData(id){
alert(id);
$('#data').load('data_read.php?id='+id);
}

としましたが、idにはちゃんとid番号が入っていました。

しかし、data_read.php側で挙動を確認すると

初回アクセスは$_GET[‘id’]でidが取得できているんですが、2回目は$_GET[‘id’]がnullになっていたり、

そもそもアクセスされない場合もありました。

ということはjqueryのload()関数が正常に動作していない可能性が高いです。

調べてみると、IE8は非同期通信をキャッシュしてしまい2回目以降キャッシュのデータを読む仕様らしいです。
(※正確には合っていないかもしれませんが、イメージとしてはこんな感じの動きみたいです。)

ということでjqueryのload()関数を使う前にキャッシュさせないという処理を入れてあげるとうまく動きました。

完成形のスクリプトは以下です。

function updateData(id){
$.ajaxSetup({ cache: false });
$('#data').load('data_read.php?id='+id);
}

jqueryのload()関数を呼び出す前に

$.ajaxSetup({ cache: false });

を入れてあげると、ブラウザでキャッシュをしないという意味になります。

今回は結構ハマッたので、メモを残しておきます。

ハマッた方は是非参考にどうぞ。

他社より断然お得で使いやすい
”アクトのWEB制作”
ACTホームページ相談窓口 / 
システム開発相談窓口