2013年5月4日 星期六

IE針對Ajax的Cache

在實作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/