網站建設中的Ajax請求與瀏覽器緩存

 

Ajax請求與瀏覽器緩存

在現代Web網站建設中，前端代碼充斥着大量的Ajax請求，如果對於Ajax請求可以使用瀏覽器緩存，那麼可以顯著地減少網絡請求，提高程序響應速度。

1. Ajax Request

使用jQuery框架可以很方便的進行Ajax請求，示例代碼如下：

 

$.ajax({

     url : 'http://www.hualai.net.cn',

     dataType : "xml",

     cache: true,

     success : function(xml, status){    

             }

 });

非常簡單，注意其中的第4行代碼：cache：true，顯式的要求如果當前請求有緩存的話，直接使用緩存。如果該屬性設置爲 false，則每次都會向網站服務器請求，Jquery的Comments如下：

If set to false, it will force requested pages not to be cached by the browser. Setting cache to false also appends a query string parameter, "_=[TIMESTAMP]", to the URL.

前端的工作也就這麼多了，這樣的話Ajax請求就可以利用web瀏覽器緩存了嗎？

繼續看。

 

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的web服務，代碼片段如下：

@GET

@Produces("application/xml")

public Response getProducts() {

          Response.ResponseBuilder response = Response.ok(data);

          return response.build();

}

添加Cache控制後，進行測試，一切OK。

最後的代碼如下:

@GET

@Produces("application/xml")

public Response getProducts() {

          Response.ResponseBuilder response = Response.ok(data);

          // Expires 3 seconds from now..this would be ideally based

          // of some pre-determined non-functional requirement.

          Date expirationDate = new Date(System.currentTimeMillis() + 3000);

          response.expires(expirationDate);

          return response.build();

}

以上只是示例代碼，還可以進行更精細的控制，例如使用CacheControl、Last-Modified等等。