解析瀏覽器端的AJAX緩衝機制_javascript技巧

AJAX的緩衝是由瀏覽器維持的，對於發向伺服器的某個url，ajax僅在第一次請求時與伺服器互動資訊，之後的請求中，ajax不再向伺服器提交請求，而是直接從緩衝中提取資料。
有些情況下，我們需要每一次都從伺服器得到更新後資料。思路是讓每次請求的url都不同，而又不影響正常應用：在url之後加入隨機內容。
e.g.

url=url+"&"+Math.random();

Key points:
1.每次請求的url都不一樣（ajax的緩衝便不起作用）
2.不影響正常應用（最基本的）

這裡我們由兩條結論：

1:Ajax的緩衝和HTTP的緩衝是一樣的
現代瀏覽器的HTTP和緩衝機制比Ajax的XMLHttpRequest對象要差很多,所以它不認識也不關心Ajax請求.它僅僅是遵循普通的HTTP緩衝規則,通過伺服器返回的回應標頭來進行緩衝.
如果你已經對 HTTP緩衝 有瞭解,那麼你可以把HTTP緩衝的知識用對Ajax緩衝的理解上. 他們只有一點不同的,就是設定回應標頭的方式會和普通檔案不一樣.
下面這些回應標頭可以讓你的Ajax可緩衝:
Expires: 這一項應該被設定成未來的某個合適的時間點,時間點的設定取決於內容變動的頻繁程度.舉個栗子,如果請求的是個庫存數量,那麼Expires的值可以是10秒以後.如果請求的是一個相片,那麼Expires的值就可以久一點,因為它不會經常變動.Expires頭可以讓瀏覽器在一段時間內重用本機快取資料,從而避免任何不必要的與伺服器資料互動.
Last-Modified: 設定這一項是一個很好的選擇,通過它,瀏覽器在發送條件性GET請求的時候會使用要求標頭裡的 If-Modified-Since 來檢查本機快取的內容.如果資料不需要更新,伺服器會返回304響應狀態.
Cache-Control: 在合適的情況下,這個值應該被設定為 Public ,這樣所有的中間代理和緩衝都可以被儲存並且與其他使用者共用內容.在Firefox裡,它還支援HTTPS請求的緩衝
當然,如果你使用POST方式發送Ajax是不能緩衝的,因為POST請求永遠不會被緩衝.如果你的Ajax請求會產生其他作用(比如銀行賬戶之間的轉賬),請使用POST請求.
我們設定了一個demo(這個demo已經不能看了ヽ（≧□≦）ノ)來闡明這些頭資訊是如何工作的. 在HttpWatch裡,你可以看到我們在回應標頭資訊裡設定了以上三個回應標頭

如果你規律的點擊 ‘Ajax Update' 按鈕,時間的改變會趨向於每隔一分鐘一次.因為Expires回應標頭被設定為未來的一分鐘.在下面這張截圖裡你可以看到:重複的點擊更新按鈕時,Ajax請求會讀取瀏覽器本地的緩衝而不會產生網路活動(發送和傳輸欄的值都是0)

最後一次1:06.531時刻的點擊發送的Ajax請求產生了網路資料轉送,因為緩衝的資料已經超過了一分鐘. 伺服器返回200響應狀態表示擷取到了一份新的資料.
猜測這個demo應該是一個按鈕,每點擊一次擷取一次目前時間然後回現在頁面上.

2:IE瀏覽器在Expires時間到期之前不會重新整理通過Ajax擷取的內容.
有些時候,Ajax在頁面載入的時候就被用來填充頁面的某些部分(比如一個價格列表).它並不是通過使用者的某個事件(比如點擊某個按鈕)觸發的,而是在頁面載入的時候就通過javascript來發送的.就好像Ajax請求和那些嵌入資源(比如js和css)是一樣的.
如果你開發這樣的頁面,在重新整理它的時候,很可能想要更新嵌入的Ajax請求內容.對於嵌入資源(CSS檔案,圖片等),瀏覽器會通過使用者重新整理的方式是F5(重新整理)還是Ctrl+F5(強制重新整理)來自動發送下列不同類型的請求:
1.F5(重新整理): 如果請求內容帶有 Last-Modified 回應標頭,那麼瀏覽器會發送條件性更新要求. 它使用 If-Modified-Since 要求標頭進行比較,這樣伺服器就可以返回304狀態來避免傳輸不必要的資料.
2.Ctrl+F5(強制重新整理): 告訴瀏覽器發送無條件更新要求,要求標頭的 Cache-Control 被設定為‘no-cache'.這告訴所有的中間代理和緩衝:瀏覽器需要擷取最新的版本,無論它是否已經被緩衝.
Firefox把這個重新整理的方式傳播到了那些在頁面載入的時候就發送的Ajax請求上,把這些Ajax請求當成嵌入資源來處理.下面是HttpWatch在Firefox下的截圖,顯示了Ajax Caching demo(這個demo已經不能看了ヽ（≧□≦）ノ)重新整理(F5)頁面時Ajax請求的效果:

Firefox確保Ajax發起的請求是條件性的.在這個例子裡,如果快取資料不到10秒,伺服器返回304,超過10秒,伺服器返回200,重新傳送資料.
在ie裡,載入頁面時就發起的Ajax請求被看做是和頁面其他部分重新整理毫無關係的,也不會被使用者的重新整理方式所左右.如果緩衝的ajax資料沒有到期,就不會有GET請求發送到伺服器.它會直接從緩衝裡讀取資料,從HttpWatch裡看就是(Cache)結果.下面這個圖是在ie下緩衝沒有到期的情況下按F5重新整理:

就算是通過 Ctrl+F5 強制重新整理,通過Ajax擷取的資料也是從緩衝裡讀取:

這就意味著,任何通過Ajax得到的內容如果沒有到期,在ie下都不會被更新 - 即使你使用Ctrl+F5強制重新整理. 唯一能確保你擷取最新資料的方法就是手動清楚緩衝. 可以使用HttpWatch的工具列:

注意,Cache結果和304結果是不同的.Cache其實是200(cache),304就是304.Cache其實沒有向伺服器發送請求,可以從chrome裡看到,它的耗時是0,response也是空.而304不同,
304請求是瀏覽器發起了一個條件性的請求,這個請求攜帶了 If-Modified-Since 要求標頭,如果這個檔案在瀏覽器發送的這個時間之後沒有修改過,伺服器端就回返回一個304狀態,告訴瀏覽器使用它本地的緩衝內容.它沒有Cache快,因為請求還是發送到了伺服器端,只不過伺服器端沒有發送資料.
可以看下taobao首頁,裡面既有200(cache)也有304.可以查看他們的區別.

總結：

我們都知道，ajax能提高頁面載入的速度的主要原因是通過ajax減少了重複資料的載入，真正做到按需擷取，既然如此，我們在寫ajax程式的時候不妨送佛送到西，在用戶端再做一次緩衝,進一步提高資料載入速度。那就是在載入資料的同時將資料緩衝在瀏覽器記憶體中，一旦資料被載入，只要頁面未重新整理，該資料就永遠的緩衝在記憶體中，當使用者再次查看該資料時，則不需要從伺服器上去擷取資料，極大的降低了伺服器的負載和提高了使用者的體驗。