跳到主要內容

取消 IE 針對Ajax的 Cache 處理法

參考文章:AJAX XMLHttpRequest cache IE上不會重新request
                    AJAX – IE 會 cache 住回傳的結果

前情提要:
發現在IE會遇到沒辦法透過Ajax進行資料更新
後來發現原因是 IE 會自動 cache GET方式取得的Ajax資料,而導致IE直接不發送 request

分析:
實際上對資料做 cache 並不完全是不好的作法,但這個做法應該由設計者自己決定
現在我們要取消 IE 的雞婆做法,主要的方法有以下幾種
1.針對 url 加上亂數參數,例如 var url = "...?date=" + new Date().getTime();
   如此瀏覽器會認為這次查詢的內容與上次不同,IE也會再發送請求(並再做一次cache)
   當然缺點就是 IE 會幫你做非常多的 cache,不算個好作法就是

2.改用POST去做Ajax request

3.阻止IE做 cache
   var req = new XMLHttpRequest();
   req.setRequestHeader("If-Modified-Since","0");

   又或者是依各語言的寫法直接寫Meta
   例如JSP頁面上增加 response.addHeader("Cache-Control", "no-cache");
 
   推薦使用 If-Modified-Since 的作法
   Ajax增加這個header後,會主動判斷要查詢的頁面的最後更新時間是否有變動
   如果沒有就回傳304告知 local 端的cache已經是最新的,request會直接從local端載入
   這個做法可以減少網路傳輸的需求量

留言

張貼留言