Ajax request and browser cache

Ajax request and browser cache

In modern web applications, front-end code is filled with a large number of Ajax requests. If Ajax requests can be cached in a browser, network requests can be significantly reduced and the program response speed can be improved.

1. Ajax request

Using the jquery framework, you can easily perform Ajax requests. The sample code is as follows:

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

Very simple. Pay attention to the 4th lines of code:Cache: TrueExplicitly requires that the current request be cached directly. If this attribute is set to false, a request is sent to the server every time. The comments of jquery are as follows:

If setfalse, It will force requested pages not to be cached by the browser. Setting cachefalseAlso appends a query string parameter, "_ = [timestamp]", to the URL.

So much work is done on the front-end. Can Ajax requests be cached in the browser?

Continue.

 

2. http protocol

The header section of the HTTP protocol defines whether the client should perform cache and how to perform cache. For more information, see http header field definitions 14.9 cache-control and 14.21 expires. Here is a brief introduction:

Cache-control

Cache-control is used to control the HTTP cache (in HTTP/1.0, it may not be partially implemented, but only Pragma: No-cache is implemented)
Data packet format:
Cache-control: cache-Directive
Cache-directive can be:
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"
Note:
-Public indicates that the response can be cached in any cache area.
-Private indicates that the whole or part of the response message of a single user cannot be processed by the shared cache. This allows the server to only describe part of the user's response message, which is invalid for requests of other users.
-No-Cache indicates that the request or response message cannot be cached (HTTP/1.0 is replaced with no-cache of Pragma)
-No-store is used to prevent the unintentional release of important information. Sending a request message does not cache the request and response messages.
-Max-age indicates that the client can receive responses with a lifetime not greater than the specified time (in seconds.
-Min-fresh indicates that the client can receive a response whose response time is earlier than the current time plus the specified time.
-Max-stale indicates that the client can receive response messages beyond the timeout period. If the value of the Max-stale message is specified, the client can
Receive response messages that exceed the timeout period.

Expires

Expires indicates the cache validity period, which allows the client not to send requests before this time, equivalent to the max-age effect. If both exist, it will be overwritten by the Max-age of cache-control.
Format: expires = "expires": "http-Date
Example: expires: Thu, 01 Dec 1994 16:00:00 GMT

Last-modified

Last-modified indicates the last modification time of the document in GMT format. When the client requests this URL for the second time, it adds an attribute to the header and asks if the file has been modified after the time. If the file on the server side has not been modified, the returned status is 304 and the content is blank, which saves the amount of data transmitted.

 

3. My questions

In the past few days, when we were working on the Web Front-end, we found that every time the client Ajax requests data from the server, the real-time nature of the data was not that high, and there was no need to request the data each time.

After explicitly adding the cache to AJAX is true, the problem persists. It is suspected that it is a server problem. The server uses jersey to build a restful-based service. The code snippet is as follows:

@GET@Produces("application/xml")public Response getProducts() {          Response.ResponseBuilder response = Response.ok(data);          return response.build();}

After the Cache control is added, perform the test. Everything is 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 be ideally based          // of some pre-determined non-functional requirement.          Date expirationDate = new Date(System.currentTimeMillis() + 3000);          response.expires(expirationDate);          return response.build();}

The above is only the sample code and can be further controlled, such as using cachecontrol and last-modified.

 

Written in a rush. Please make an axe if there is something wrong with it.