參考文章: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端載入
這個做法可以減少網路傳輸的需求量
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端載入
這個做法可以減少網路傳輸的需求量
感謝分享!
回覆刪除