在實作AJAX非同步資料傳輸時,在IE瀏覽器上遇到非常大的問題,他會 cache 先前GET取回的資料,只有第一次 request 時會真正的去 server 讀取資料,導致畫面上的資料不會被更新,這在firefox及chrome是不會發生的。
解決方法有三個:
1. 針對 url 加上亂數參數,例如 var url = "...?date=" + new Date().getTime();
如此瀏覽器會認為這次查詢的內容與上次不同,IE也會再發送請求(並再做一次cache)
當然缺點就是 IE 會幫你做非常多的 cache,不算個好作法就是。
2.改用POST做 request。
3.阻止IE做 cache
var request= new XMLHttpRequest();
request.setRequestHeader("If-Modified-Since","0");
又或者是依各語言的寫法直接寫Meta
例如JSP頁面上增加 response.addHeader("Cache-Control", "no-cache");
推薦使用 If-Modified-Since 的作法
Ajax增加這個header後,會主動判斷要查詢的頁面的最後更新時間是否有變動
如果沒有就回傳304告知 local 端的cache已經是最新的,request會直接從local端載入
這個做法可以減少網路傳輸的需求量。
參考資料:
1. http://pvencs.blogspot.tw/2013/01/ie-ajax-cache.html
2.http://gdfan1114.wordpress.com/2005/12/20/ajax-ie-%E6%9C%83-cache-%E4%BD%8F%E5%9B%9E%E5%82%B3%E7%9A%84%E7%B5%90%E6%9E%9C/