ajax請(qǐng)求與瀏覽器緩存

在現(xiàn)代Web應(yīng)用程序中，前端代碼充斥著大量的Ajax請(qǐng)求，如果對(duì)于Ajax請(qǐng)求可以使用瀏覽器緩存，那么可以顯著地減少網(wǎng)絡(luò)請(qǐng)求，提高程序響應(yīng)速度。


1. Ajax Request


使用jQuery框架可以很方便的進(jìn)行Ajax請(qǐng)求，示例代碼如下：


1  $.ajax({
2     url : 'url',
3     dataType : "xml",
4     cache: true,
5     success : function(xml, status){    
6             }
7 });

非常簡(jiǎn)單，注意其中的第4行代碼：cache：true，顯式的要求如果當(dāng)前請(qǐng)求有緩存的話(huà)，直接使用緩存。如果該屬性設(shè)置為 false，則每次都會(huì)向服務(wù)器請(qǐng)求，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.
前端的工作也就這么多了，這樣的話(huà)Ajax請(qǐng)求就可以利用瀏覽器緩存了嗎？


繼續(xù)看。



2. Http 協(xié)議


Http協(xié)議的header部分定義了關(guān)于客戶(hù)端是否應(yīng)該做Cache，以及如何做Cache。具體參見(jiàn)Http Header Field Definitions 的 14.9 Cache-Control 和 14.21 Expires。這里簡(jiǎn)單說(shuō)一下：


Cache-Control


Cache-control用于控制HTTP緩存（在HTTP/1.0中可能部分沒(méi)實(shí)現(xiàn)，僅僅實(shí)現(xiàn)了Pragma: no-cache）
數(shù)據(jù)包中的格式：
Cache-Control: cache-directive
cache-directive可以為以下：
request時(shí)用到：
| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response時(shí)用到：
| "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"
說(shuō)明：
     -Public  指示響應(yīng)可被任何緩存區(qū)緩存。
     -Private  指示對(duì)于單個(gè)用戶(hù)的整個(gè)或部分響應(yīng)消息，不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶(hù)的部分響應(yīng)消息，此響應(yīng)消息對(duì)于其他用戶(hù)的請(qǐng)求無(wú)效。
     -no-cache  指示請(qǐng)求或響應(yīng)消息不能緩存（HTTP/1.0用Pragma的no-cache替換）
     -no-store  用于防止重要的信息被無(wú)意的發(fā)布。在請(qǐng)求消息中發(fā)送將使得請(qǐng)求和響應(yīng)消息都不使用緩存。
     -max-age  指示客戶(hù)端可以接收生存期不大于指定時(shí)間（以秒為單位）的響應(yīng)。
     -min-fresh  指示客戶(hù)端可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)。
     -max-stale  指示客戶(hù)端可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值，那么客戶(hù)端可以
接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。


Expires


Expires 表示Cache的有效時(shí)間，允許客戶(hù)端在這個(gè)時(shí)間之前不去發(fā)請(qǐng)求，等同max-age的效果。但是如果同時(shí)存在，則被Cache-Control的max-age覆蓋。
格式：Expires = "Expires" ":" HTTP-date
示例：Expires: Thu, 01 Dec 1994 16:00:00 GMT


Last-Modified


Last-Modified用GMT格式表明了文檔的最后修改時(shí)間，客戶(hù)端第二次請(qǐng)求此URL時(shí)，會(huì)在頭部加入一個(gè)屬性，詢(xún)問(wèn)該時(shí)間之后文件是否有被修改過(guò)。如果服務(wù)器端的文件沒(méi)有被修改過(guò)，則返回狀態(tài)是304，內(nèi)容為空，這樣就節(jié)省了傳輸數(shù)據(jù)量。


3. 問(wèn)題


在做Web前端的時(shí)候，發(fā)現(xiàn)客戶(hù)端的每次Ajax都會(huì)從服務(wù)器端請(qǐng)求數(shù)據(jù)，而這些數(shù)據(jù)的即時(shí)性沒(méi)有那么高，沒(méi)必要每次都請(qǐng)求。


在顯式的給Ajax加上cache為true后，發(fā)現(xiàn)問(wèn)題依舊。于是懷疑是服務(wù)端的問(wèn)題，服務(wù)端使用 jersey 搭建了基于Restful的服務(wù)，代碼片段如下：


@GET
@Produces("application/xml")
public Response getProducts() {
          Response.ResponseBuilder response = Response.ok(data);
          return response.build();
}
添加Cache控制后，進(jìn)行測(cè)試，一切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();
}

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