在現代Web應用程式中，前端程式碼充斥著大量的Ajax請求，如果對於Ajax請求可以使用瀏覽器快取，那麼可以顯著地減少網路請求，提高程式響應速度。

1. Ajax Request

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

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

非常簡單，注意其中的第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請求就可以利用瀏覽器快取了嗎？

繼續看。

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

@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等等。

“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小夥伴，

53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”