Talking about Ajax request and browser cache _ajax correlation

In modern Web applications, front-end code is flooded with Ajax requests, and if you can use browser caching for AJAX requests, you can dramatically reduce network requests and increase program response speed.

1. Ajax Request

The jquery framework makes it easy to make AJAX requests, with sample code as follows:

$.ajax ({
  url: ' url ',
  dataType: "xml",
  Cache:true,
  success:function (XML, status) {  
      }
});

Very simple, note that the 4th line of code:cache:true, explicit requirements if the current request is cached, use the cache directly. If this property is set to False, each time the server is requested, the comments of jquery is as follows:

If set to False, it would force requested pages not to is cached by the browser. Setting cache to False also appends a query string parameter, ' _=[timestamp ', to the URL.

The front-end work is so much, so that the AJAX request can use browser cache it?

Keep looking.

2. Http protocol

The header section of the HTTP protocol defines whether the client should be cache and how to do it. See the 14.9 Cache-control and 14.21 Expires of the HTTP Header Field definitions specifically. Here's a quick word:

Cache-control

Cache-control is used to control HTTP caching (which may be partially not implemented in http/1.0, only Pragma:no-cache implemented)

Format in the packet:

Cache-control:cache-directive

Cache-directive can be as follows:

The request is used:

| "No-cache"
| "No-store"
| "Max-age" "=" delta-seconds
| "Max-stale" ["=" delta-seconds]
| "Min-fresh" "=" delta-seconds
| "No-transform"
| "Only-if-cached"
| "Cache-extension"

Response to use:

| "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"

Description

-public indicates that the response can be cached by any buffer.

-private indicates that the entire or partial response message for a single user cannot be handled by the shared cache. This allows the server to simply describe a partial response message from the user, which is not valid for other users ' requests.

-no-cache indicates that the request or response message cannot be cached (http/1.0 replaced with pragma no-cache)

-no-store is used to prevent important information from being inadvertently released. Sending in a request message will not use caching for both request and response messages.

-max-age indicates that the client can receive a response that is not longer than the specified time in seconds.

-min-fresh indicates that the client can receive response times that are less than the current time plus a specified time.

-max-stale indicates that the client can receive response messages that exceed the timeout period. If you specify a value for the Max-stale message, the client can

Receives a response message that exceeds the specified value for the timeout period.

Expires

Expires represents the cache's effective time, allowing the client to not send a request before this time, equivalent to the max-age effect. However, if they exist at the same time, they are overwritten by Cache-control Max-age.
Format: Expires = "Expires" ":" Http-date
Example: Expires:thu, Dec 1994 16:00:00 GMT

Last-modified

Last-modified indicates the last modification time of the document in GMT format, and when the client requests this URL for the second time, a property is added to the header asking if the file has been modified after that time. If the server-side files have not been modified, the return status is 304 and the contents are empty, thus saving the amount of data transferred.

3. My question

These days in the Web front-end, found that every time the client Ajax will request data from the server, and the real-time data is not so high, no need to request each time.

After the explicit Ajax plus cache is true, the problem is still found. It is suspected that the server side of the problem, the server using jersey to build a restful service, the code fragment is as follows:

@GET
@Produces ("Application/xml") public
Response getproducts () {
     Response.responsebuilder Response = Response.ok (data);
     return Response.build ();
}

Add cache control After the test, all OK.

The final code is as follows:

@GET
@Produces ("Application/xml") public
Response getproducts () {
     Response.responsebuilder Response = Response.ok (data);
     Expires 3 seconds from now. This would is ideally based
     //of some pre-determined non-functional.
     Date expirationdate = new Date (System.currenttimemillis () + 3000);
     Response.Expires (expirationdate);
     return Response.build ();
}

The above is just sample code, and more granular control is available, such as using CacheControl, last-modified, and so on.

This article on the AJAX request and browser caching is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.