Ajax調用就像任何其他的HTTP請求一樣可以用來構建一個網頁。然而，由於其動態的性質人們常常忽略了可以緩存它們而從中受益。
高性能網站建設的第14條規則:
緩存Ajax
確保您的Ajax請求遵循這條規則，特別是包含一個Expires頭.
這個博客帖子的其餘部分包括兩個重要的事實，將幫助您理解並有效應用Ajax緩存
事實1 : Ajax緩存和HTTP緩存效果相同
現代瀏覽器的HTTP系統和緩存系統要比Ajax的XMLHttpRequest對象更靠近底層. 在這個層面上，瀏覽器並不知道或關心Ajax請求。它只是服從正常的基於從服務器返回的HTTP響應頭緩存規則。
如果你已經知道HTTP緩存，您可以將這種知識應用到Ajax的緩存。唯一真正的區別是，您可能需要以不同的方式爲靜態文件設置響應頭。
以下HTTP響應頭是可以用來做Ajax緩存的：
- Expires: 應該被應用在你知道內容何時被修改的情況下。 例如，如果是股票價格您可能會設置一個在10秒後過期的數值。對於照片，你可以設置一個更長時間的Expires頭，因爲你指望它永遠不改變。 Expires頭允許瀏覽器在一段時間內可以重複使用緩存內容，並避免任何不需要的同服務器的交互過程.
- Last-Modified: 設置這個標記會通知瀏覽器可以使用If-Modified-Since頭來產生一個條件GET請求以便檢查其本地緩存。如果數據不需要更新，服務器將使用HTTP 304狀態碼來響應此請求
- Cache-Control: 如果允許，這應該被設置爲'public'，使其他用戶可以在中間代理和緩存服務器上存儲和共享數據，在Firefox上，這還將啓用針對HTTPS的緩存
當然，如果您使用Ajax的POST方法，這並不適用，因爲POST請求不會被緩存。如果您的Ajax請求有安全性要求，你應該總是使用POST方法，例如：銀行帳戶的資金轉賬。
我們創建了一個Ajax緩存例子來展示這些響應頭的效果. 使用HttpWatch, 你可以看到我們在ajax響應頭裏面設置了上述全部3個響應頭:
如果你以固定頻率多次點擊'Ajax Update'按鈕, 你會發現ajax大約每隔1分鐘更新一次，因爲Expires頭設置爲在未來的1分鐘後過期。在HttpWatch截圖裏面你可以看到重複點擊刷新按鈕導 致ajax請求直接從瀏覽器緩存裏面讀取，沒有發生任務網絡活動(即在發送和接收列裏面字節數都爲0) :
最後一次點擊發生在 1:06.531 ，因爲緩存的數據已經超過1分鐘，Ajax請求發生了一次網絡通訊。從服務器返回的響應頭200指明新的內容應該被重新下載。
事實2: IE瀏覽器不會刷新過期日期前的Ajax內容
有時，Ajax是用來在加載時填充網頁的內容（如價格清單）。當頁面加載完畢事件發生後，它直接被JavaScript調用，而不是依靠按一個按鈕來觸發。這使得Ajax調用表現爲它好像是一個嵌入的資源
當你開發一個這樣的網頁時，通常的想法是試圖通過更新嵌入的Ajax內容來刷新頁面。對於其它嵌入的資源比如CSS或圖片，瀏覽器自動發送的請求取決於F5 (刷新)或 Ctrl+F5 (強制刷新)：
- F5(刷新) 如果原本的內容有一個Last-Modified 響應頭，瀏覽器會建立一個有條件的更新請求. 瀏覽器使用If-Modified-Since 請求頭使得服務器可以返回HTTP 304響應代碼來避免不必要的下載。
- Ctrl+F5 (強制刷新) 導致瀏覽器發送一個沒有條件的GET請求，其中Cache-Control請求頭被設置爲'no-cache'. 這代表不管瀏覽器需要的內容是否已經被緩存，所有的中間代理和緩存服務器都需要重新從原始服務器來下載此內容。
Firefox會將刷新類型傳遞給所有Ajax請求來刷新頁面，因此任何Ajax派生的內容都會被更新。這個HttpWatch插件的屏幕快照顯示了我們的Ajax緩存刷新 頁面效果:
Firefox 確保Ajax請求是被假定爲帶條件的GET。在我們這個例子頁面內，如果緩存的數據在10秒以內，服務器會返回304代碼，如果數據過期 ，服務器會返回200的代碼.
在 Internet Explorer中, 已加載的Ajax請求被視爲和頁面刷新無關的內容，用戶的刷新動作也不會被傳遞到Ajax中。如果緩存的Ajax內容還沒過期，IE不會發生GET請求到 服務器，它直接從緩存讀取內容，導致在HttpWatch中看到(Cache)數據的產生。下面是在IE中緩存沒有過期時按F5的效果:
即時按Ctrl+F5, Ajax仍然從緩存中加載內容:
這意味這在IE中，即使你按強制刷新（Ctrl+F5），在內容過期之前，Ajax也不會更新。確保更新的唯一方法是從緩存中刪除此記錄。在HttpWatch中, 你可以通過使用下面的工具:
