Ajax頁面緩衝問題分析與解決辦法

一、什麼是Ajax緩衝原理？

Ajax在發送的資料成功後，會把請求的URL和返回的響應結果儲存在緩衝內，當下一次調用Ajax發送相同的請求時，它會直接從緩衝中把資料取出來，這是為了提高頁面的響應速度和使用者體驗。當前這要求兩次請求URL完全相同，包括參數。這個時候，瀏覽器就不會與伺服器互動。

二、Ajax緩衝的好處

這種設計使用戶端對一些靜態頁面內容的請求，比如圖片，css檔案，js指令碼等，變得更加快捷，提高了頁面的響應速度，也節省了網路通訊資源。

三、Ajax緩衝的不足

Ajax緩衝雖然有上述的好處，但是如果通過Ajax對一些後台資料變更的時候，雖然資料在後台已經發生改變，但是頁面緩衝中並沒有改變，對於相同的URL，Ajax提交過去以後，瀏覽器還只是簡單的從緩衝中拿資料，這種情況當然就不行了。

四、解決Ajax緩衝問題的方法

解決這個問題最有效辦法是禁止頁面緩衝，有以下幾種處理方法：

1.在ajax發送請求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

2.在服務端加 header(“Cache-Control: no-cache, must-revalidate”);

3.在ajax發送請求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

補充

4、在 Ajax 的 URL 參數後加上 "?fresh=" + Math.random(); //當然這裡參數 fresh 可以任意取了

5、第五種方法和第四種類似，在 URL 參數後加上 "?timestamp=" + new Date().getTime();

6、用POST替代GET：不推薦

1jQuery提供一個防止ajax使用緩衝的方法，

<!--

<script type="text/javascript" language="javascript">
$.ajaxSetup ({
cache: false //close AJAX cache
});
</script>

第二就是修改load 載入的url地址

 

例如 再url 多加個時間參數就可以 這個方法再wap1.0 中 我也用過避免讀取緩衝

<!--

function loadEventInfoPage(eventId){

    $.ajaxSetup ({
       cache: true // AJAX cache  下面加上時間後load的頁面中的js、css圖片等都會重新載入，   

         //加上這句action會重新載入，但是js、css、圖片等會走緩衝
    });
    $("#showEventInfo").load(ctx + "/custEvents/viewEvent.action",
                    {"complaint.Id":eventId, "tt":(new Date()).getTime()},function(){})
}

第三種、設定html的緩衝

<!--

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">   
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">   
<META HTTP-EQUIV="Expires" CONTENT="0">