AJAX – IE 會 cache 住回傳的結果

實際上在測試 ajax 的程式時,會發現 firefox 每次 request 都會重新再回一次 server 取得最新的資料,但是 IE 就不一樣了,他會 cache 住之前的連線所傳回的資料,只有第一次 request 時會真正的去 server 讀取資料,導致畫面上的資料不會隨時間而更新….
解決方式就是在 ajax 所要讀取的網頁上加上下面 2 行控制 cache 的 header,在此以用 ajax 連線回 server 抓某一個 php 網頁為例:

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past

這樣 IE 就會在每一次 request 時,重新再連回 server 了。

另一種方式是在 request 物件上設定 setRequestHeader(),如下所示:

<script type="text/javascript" language="javascript">

    var http_request = false;

    function xmlRequest(url) {
      // branch for native XMLHttpRequest object
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = alertContents;
        req.open("GET", url, true);
        req.setRequestHeader("If-Modified-Since","0");
        req.send(null);
      } // branch for IE/Windows ActiveX version
      else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
          req.onreadystatechange = alertContents;
          req.open("GET", url, true);
          //let IE refresh page 
          req.setRequestHeader("If-Modified-Since","0");
          req.send();
        }
      }
    }

    function alertContents() {
        if (req.readyState == 4) {
            if (req.status == 200) {
                alert(req.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
</script>

參考資料:
1.做了两个月ajax,总结一些小经验

Advertisements

4 則回應給 AJAX – IE 會 cache 住回傳的結果

  1. D.Y 說道:

    太好了!
    我正是面對著這個問題.
    IE老是不能update新的resultset.
    現在解決了, 先行謝過…

    P.S: 如果您不介意的話, 小弟想把閣下的Blog link放在我的blog list上.

  2. GongDa 說道:

    歡迎取用~ :p

  3. 易春木 說道:

    請問 在 request 物件上設定 setRequestHeader()
    不知可否這方法可以說明更清楚一些嗎..非常感謝

    • GD 說道:

      如網頁上所示,直接在 javascript 程式中,加上 req.setRequestHeader(“If-Modified-Since","0″);
      就可以了。

      透過加上 “If-Modified-Since" header, 再設定數值為一個過去的時間點,讓 IE 可以直接使用新的資料,而不是用之前下載回來的舊資料。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: