解決在IE中獲取數據的緩存問題,運行環境為node.js


IE下默認會開啟緩存策略,不管是頁面還是通過ajax請求的數據都會議一個url,url是uri(統一資源定位符)的實例,url就是資源的標識符。

寫一個demo進行驗證,測試環境:IE8,node.js 0.12.7,頁面模板為jade。

 

頁面代碼:testCache.jade

頁面上放一個按鈕,點下后從后台獲取一個自增的數值顯示在按鈕上。

doctype html
html
    head
        meta(charset='utf-8')
        title= title
        script(src='/js/jquery-1.10.2.min.js')
        script(src="/js/bootstrap.min.js")

    body
        button(id='btnTest', type='button', class='btn btn-default gap') 測試
    script.
        $(document).ready(function(){
            $('#btnTest').click(doTest);
        });

        function doTest(){
            $.ajax({
                type: 'GET',
                url: '/cache/data',
                data: '',
                dataType: 'html'})
                .done(function(data){
                    $('#btnTest').html(data);
                })
        }

 

后台關鍵代碼:

//獲取測試頁面
router.get('/cache/page', function(req, res){
    res.render('testCache', { title: 'testCache' }); }); //獲取自增數值 var index = 0; router.get('/cache/data', function(req, res){ var data = index++; res.write(data.toString()); res.end(); });

 

運行效果可以看出無數次瘋狂的點擊后,還是“0”,原因就是IE第一次拿到數據后,從相同路徑獲取數據時采用了默認的緩存策略,當然可以通過IE的設置來規避緩存。

 

緩存問題,根本上還是響應header的設置問題,只不過IE在發現響應頭中沒有緩存設置項時會采取緩存策略,和其他瀏覽器的處理方式不同而已。

緩存很多時候是必須的,比如:新聞頁面,升級頁面,靜態頁面,這些資源在被訪問后都可以緩存在瀏覽器段,通過根據資源的更新策略來設置規定的過期時間,可降低同服務器的資源獲取次數。

當然在不需要緩存的地方,也要堅決的避免被緩存。

在IE中避免被緩存,如果是一個頁面,那么就要在meta中設置緩存。

    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="-1">
    <meta http-equiv="progma" content="no-cache">

上面的三項設置其實只要cache-control就可以了,本質上來說,在meta中的http-equiv的設置都會有服務器填入頁面的響應header中。

如果是在頁面上通過ajax來獲取數據的,就要在后台數據的響應處,加上緩存的設置,明明白白地告訴瀏覽器,請你不要緩存。如下。

//獲取自增數值
var index = 0;
router.get('/cache/data', function(req, res){
    var data = index++;
    res.setHeader('cache-control', 'no-cache');
    res.write(data.toString());
    res.end();
});

通過設置了no-cache后,本文的demo中的字增值就可以隨着點擊而增加並顯示在按鈕上。 

 

在http的header中,緩存的配置項主要是5種,這里就列一下,網上的說明太多了。

1.cache-control

有4個值,private、no-cache、max-age、must-revalidate。

private:緩存到私有緩存。

max-age:相對過期時間,秒為單位,從瀏覽器獲取資源的相應秒數后過期。

must-revalidate:每次訪問都需要重新驗證。

no-cache:不緩存。

 

2.expires

 過期時間,這是一個絕對時間,時間格式是格林威治時間,如“Sun, 08 Nov2009 03:37:26 GMT”,過了這個時間,就過期

 

3.progma

對http1.0服務器的兼容。 

 

4.Last-Modified/If-Modified-Since

在你的請求中發送一個 If-Modified-Since 頭信息,它包含了上一次從服務器連同數據所獲得的日期。如果數據從那時起沒有改變,服務器將返回一個特殊的 HTTP 狀態代碼 304。

 

5.ETag/If-None-Match

 服務器發送你所請求的數據的同時,發送某種數據的 hash (在 ETag 頭信息中給出)。hash 的確定完全取決於服務器。當第二次請求相同的數據時,你需要在 If-None-Match: 頭信息中包含 ETag hash,如果數據沒有改變,服務器將返回 304 狀態代碼。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM