Ajax利用時にIEだとキャッシュされる問題

自作のフィードリーダのAjaxで描画を切り替えているところでIEとFirefoxで挙動が異なる原因がわかったのでメモ。


問題になっていたのは、ボタンをクリックしてAjaxでDOMで指定する箇所の更新を行う際、クリックした際のDBの内容の状況によって出力されるアイコン(この場合は既読・未読のアイコン)がIEだと更新されなかったという点。
普段使っているFirefoxだとこの点が想定する

未読のフィード選択→内容表示→閉じるボタンをクリック。一覧が表示され、先ほど未読だった箇所が既読アイコンで表示。

という動きになっていたのだが、IEだと未読のものを読んでもアイコンが未読のままだった。
ということで調べているとすぐ原因は見つかった。

Jaslabsにて、IEでAjaxリクエストをキャッシュさせない方法が掲載されています。


IEの場合Ajaxを用いた通信を行うと、GETメソッドの場合一度実行されるとデータがキャッシュされて、2回目以降の通信はそのキャッシュされたデータを読みに行くようになってしまいます。
[PHPプロ!] IEでAjaxリクエストをキャッシュさせない方法

なるほど、確かにGETで取りにいっていた。
解決策として次の方法が書かれている。

  1. GETメソッドではなくPOSTメソッドで取得する
  2. GETメソッドで取得する場合、URLにユニークID(タイムスタンプ等)を付与する
  3. If-Modified-Sinceヘッダを付与する

シンプルにGET→POSTに変更して対応しました。無事解決。すばらしい。