Ajax利用時にIEだとキャッシュされる問題
自作のフィードリーダのAjaxで描画を切り替えているところでIEとFirefoxで挙動が異なる原因がわかったのでメモ。
問題になっていたのは、ボタンをクリックしてAjaxでDOMで指定する箇所の更新を行う際、クリックした際のDBの内容の状況によって出力されるアイコン(この場合は既読・未読のアイコン)がIEだと更新されなかったという点。
普段使っているFirefoxだとこの点が想定する
未読のフィード選択→内容表示→閉じるボタンをクリック。一覧が表示され、先ほど未読だった箇所が既読アイコンで表示。
という動きになっていたのだが、IEだと未読のものを読んでもアイコンが未読のままだった。
ということで調べているとすぐ原因は見つかった。
Jaslabsにて、IEでAjaxリクエストをキャッシュさせない方法が掲載されています。
IEの場合Ajaxを用いた通信を行うと、GETメソッドの場合一度実行されるとデータがキャッシュされて、2回目以降の通信はそのキャッシュされたデータを読みに行くようになってしまいます。
[PHPプロ!] IEでAjaxリクエストをキャッシュさせない方法
なるほど、確かにGETで取りにいっていた。
解決策として次の方法が書かれている。
- GETメソッドではなくPOSTメソッドで取得する
- GETメソッドで取得する場合、URLにユニークID(タイムスタンプ等)を付与する
- If-Modified-Sinceヘッダを付与する
シンプルにGET→POSTに変更して対応しました。無事解決。すばらしい。