在現代web應用程式中,前端**充斥著大量的ajax請求,如果對於ajax請求可以使用瀏覽器快取,那麼可以顯著地減少網路請求,提高程式響應速度。
1. ajax request
使用jquery框架可以很方便的進行ajax請求,示例**如下:
1$.ajax(
7 });
非常簡單,注意其中的第4行**:cache:true,顯式的要求如果當前請求有快取的話,直接使用快取。如果該屬性設定為 false,則每次都會向伺服器請求,jquery的comments如下:
false
前端的工作也就這麼多了,這樣的話ajax請求就可以利用瀏覽器快取了嗎?
繼續看。
2. http 協議
http協議的header部分定義了關於客戶端是否應該做cache,以及如何做cache。具體參見http header field definitions 的 14.9 cache-control 和 14.21 expires。這裡簡單說一下:
cache-control
cache-control用於控制http快取(在http/1.0中可能部分沒實現,僅僅實現了pragma: no-cache)
資料報中的格式:
cache-control: cache-directive
cache-directive可以為以下:
request時用到:
| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response時用到:
| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"
說明:-public 指示響應可被任何快取區快取。
-private 指示對於單個使用者的整個或部分響應訊息,不能被共享快取處理。這允許伺服器僅僅描述當使用者的部分響應訊息,此響應訊息對於其他使用者的請求無效。
-no-cache 指示請求或響應訊息不能快取(http/1.0用pragma的no-cache替換)
-no-store 用於防止重要的資訊被無意的發布。在請求訊息中傳送將使得請求和響應訊息都不使用快取。
-max-age 指示客戶端可以接收生存期不大於指定時間(以秒為單位)的響應。
-min-fresh 指示客戶端可以接收響應時間小於當前時間加上指定時間的響應。
-max-stale 指示客戶端可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值,那麼客戶端可以
接收超出超時期指定值之內的響應訊息。
expires
expires 表示cache的有效時間,允許客戶端在這個時間之前不去發請求,等同max-age的效果。但是如果同時存在,則被cache-control的max-age覆蓋。
格式:expires = "expires" ":" http-date
示例:expires: thu, 01 dec 1994 16:00:00 gmt
last-modified
last-modified用gmt格式表明了文件的最後修改時間,客戶端第二次請求此url時,會在頭部加入乙個屬性,詢問該時間之後檔案是否有被修改過。如果伺服器端的檔案沒有被修改過,則返回狀態是304,內容為空,這樣就節省了傳輸資料量。
3. 我的問題
這幾天在做web前端的時候,發現客戶端的每次ajax都會從伺服器端請求資料,而這些資料的即時性沒有那麼高,沒必要每次都請求。
在顯式的給ajax加上cache為true後,發現問題依舊。於是懷疑是服務端的問題,服務端使用 jersey 搭建了基於restful的服務,**片段如下:
@getpublic
response getproducts()
新增cache控制後,進行測試,一切ok。
最後的**如下:
@getpublic
response getproducts()
以上只是示例**,還可以進行更精細的控制,例如使用cachecontrol、last-modified等等。
倉促成文,有不對的地方請斧正。
唯獨ie瀏覽器快取ajax請求
用fiddler除錯http請求,在ie瀏覽器下,如果請求命中快取,fiddler不會包含該請求。但是在chrome下會包含快取的請求,result顯示為304。ie瀏覽器還會快取通過ajax請求的資料,導致後續ajax的請求資料不能更新。實際上是只快取get方式的請求,post方法因為每次的資料不...
IE瀏覽器快取導致Ajax請求失敗
在ie瀏覽器中通過ajax請求後台的資料,如果page請求是postback型別的,可能會導致ajax請求失敗的問題 我們都知道ajax能提高頁面載入的速度主要的原因是通過ajax減少了重複資料的載入,也就是說在載入資料的同時將資料快取到記憶體中,一旦資料被載入其中,只要我們沒有重新整理頁面,這些資...
ajax瀏覽器快取問題
我們都知道ajax能提高頁面載入的速度主要的原因是通過ajax減少了重複資料的載入,也就是說在載入數 據的同時將資料 快取到 記憶體中,一旦資料被載入其中,只要我們沒有重新整理頁面,這些資料就會一直被快取在內 存中,當我們提交 的url與歷 史的url一致 時,就不需要提交給伺服器,也就是不需要從伺...