読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

IE11では開発者ツールを表示していないと同じURLのAjax通信(GET)をキャッシュする

JavaScript Webデザイン

f:id:takahironakamori:20160217210716p:plain

ある案件でAjaxをたくさんつかっているウェブアプリのフロントエンドの実装を担当しています。その案件で、思った通りにAjax通信していないのでは?という動きがありました。
それについて、調べて、とりあえず解決しました、という話です。

症状を整理する

ある案件で比較的頻繁に複数のAjax通信(GET)を行うウェブアプリのフロントエンドを実装しています。
そのウェブアプリをIE(Internet Explorer)11で開いてみると、一部のAjax通信が行われていない様子。しかし、IE11の開発者ツールを開いた状態で確認するとAjax通信が行われます。不思議。いつも開発者ツールを開いた状態で確認していたため、まったく気がつきませんでした。すみません。
ちなみに、AjaxはjQueryの$.ajaxを使っています。

原因を調べる、想像する

どうやら同じURLのAjax通信は2回目以降は無視されている様子です。キャッシュでしょうか?「同じURLだから2回目以降はもういいだろう?」とお考えの様子。そうとは限らないんだけど、気持ちはわかると思いながら対策を検討します。開発者ツールが表示されているときは、キャッシュしない原因はわかりませんでした。

対策1(結果的には失敗)

$.ajaxにはおそらくキャッシュを無効にする設定できたよなーと思いながら、下記のように設定してみます。

$.ajaxのオプションでキャッシュを設定する

上手くいかず。

対策2(結果的には成功)

なんだか対策1では上手くいっていない様子だったので、上記1をやめて、下記のように全てのAjax通信に対してキャッシュを無効に設定しました。

全てのAjax通信処理に対してキャッシュをfalse処理する

対策2を実施したらIE11で開発者ツールが非表示の状態でもAjax通信をしました。

よかった。

おそらく毎回ユニークなURLで通信すればいいと思うので、どうして対策1が上手くいかなかったのかがよくわかりません。もしかしたらブラウザのキャッシュが残っていた可能性があるかもしれません。

でも、対策2で上手くいったのでとりあえずはよかった。