だいぶ前に書いた覚え書きその2 IEでのJQuery.Ajaxの挙動について
非同期での通信が容易にできるようになり、非常に便利なJQuery.Ajaxですが、
Internet Explorerで特定の条件の場合、うまく機能しないことがあります。
問題
利用ブラウザがInternet Explorerのとき、
JQuery.Ajax、もしくはJQuery.getJSONを使い、
送信するパラメータを変えずにGET属性の通信を行うと、
二回目以降の戻り値が、一回目のものと同一になる。
原因
IEはXmlHttpRequestでのやりとりを行った際、その値をキャッシュします。
JQuery.AjaxはXmlHttpRequestオブジェクトを返しているので、
その影響を受けているようです。
次回以降、パラメータが同じかつGet属性の通信が行われた場合、
キャッシュに保存してある値を返すようになります。
対策
対策はいくつかあります。
1．POST属性にして通信を行う。
あくまでキャッシュに残るのはGETの通信を行った時だけです。
Ajaxのオプションで属性をPOSTにしてしまうか、
JQuery.postを利用すれば、キャッシュの値が返されることはありません。
が、例えば問合せ先のActionResultにHttpGet属性を付けたりしたら、
この対策は即座に破綻してしまいます。
2.パラメータに常に変動するデータを入れる
パラメータ内にTimeStampのようなデータを用意し、
中身にはDatetime.NowやGUIDのようなユニークな値を入れて通信を行うようにします。
毎回送るパラメータが異なるので、キャッシュを利用することがありません。
3.OptionのCatchをfalseにする
Catchはキャッシュを制御するためのオプションで、
デフォルトではTrueとなっています。
これをfalseに指定してやることで、キャッシュを行わないように指定できます。
同様に、ifModifiedのオプションをTrueにしてやることで、
サーバ側のコンテンツの変更があったかどうかを確認し、
変更がなかった時だけキャッシュを表示する、という挙動にしてやることも可能です。
が、これらはJQuery.Ajaxのみ可能な方法で、
getJSONには利用できません。
まとめ
個人的には3推奨。
なんで、Ajaxでオプションを書くのがめんどくさくても、
あとあとのことを考えて、
できるだけgetJSONで書かないようにしましょう。
