jquery 之ajax cache

   最近在做一個企業通訊錄的功能，功能很簡單，我的本意是做數據存儲並且做同步更新，時間原因以及服務端的同事更傾向於簡單點的方式，呵呵，於是我們就采取了實時查詢的方式。

   由於get請求有點多，由於頁面的生命周期就是打開頁面-關閉頁面，想到cache，但是由於公司是使用的原生的ajax，因此研究一下jq的ajax的緩存是如何寫的。

        jq的思路大概是檢測到需要cache這個請求，就會在對象池中檢測是不是存在該url的Last-Modified值，存儲容器如下：

     

// Last-Modified header cache for next request
lastModified: {},
etag: {},

然后，在發送請求的時候檢測是否cache后，有如下的代碼：

// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
if ( s.ifModified ) {
    if ( jQuery.lastModified[ cacheURL ] ) {
        jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );
    }
    if ( jQuery.etag[ cacheURL ] ) {
        jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );
    }
}

這里的代碼意思是如果說jq根據jQuery.lastModified字典中是否包含數據來決定是否設置If-Modified-Since。那第一次請求jQuery.lastModified是沒有數據的（JS是無法獲取瀏覽器緩存的信息），因此第一次請求jqXHR是沒有設置If-Modified-Since，那也就解釋了第一次請求jqXHR.status為200。因為有了第一次請求，jq獲取獲取到第一次請求響應中的Last-ModifiedjQuery.lastModified有了數據，第二次請求jqXHR是會加上If-Modified-Since頭的，因此jqXHR.status收到了瀏覽器直接傳遞過來的請求響應及內容。

  然后等到請求成功了的時候，

if ( s.ifModified ) {
    modified = jqXHR.getResponseHeader("Last-Modified");
    if ( modified ) {
        jQuery.lastModified[ cacheURL ] = modified;
    }
    modified = jqXHR.getResponseHeader("etag");
    if ( modified ) {
        Query.etag[ cacheURL ] = modified;
    }
}

此時，從返回頭中獲取Last-Modified的值，一般是個時間，etag一般是一個hash，兩種方式比較類似，然后這個值就會被緩存在jq的池子中，下次再請求就是304了。

  關於lastModified 跟 etag可以參考 一下鏈接 http://www.51testing.com/html/28/116228-238337.html