Ajax request and browser cache during website construction

Ajax request and browser cache

In modern Web website construction, 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:

$.ajax({     url : 'http://www.hualai.net.cn',     dataType : "xml",     cache: true,     success : function(xml, status){         } });

It is very simple. Note that the 4th lines of code: cache: true explicitly requires that the current request be cached directly. If this attribute is set to false, the request is sent to the website server every time. The comments of jquery are as follows:

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.

So much work is done on the front-end. Can Ajax requests be cached using a Web 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 the URL of this website for the second time, an attribute is added to the header, check whether the file has been modified after the specified time. If the file on the website server 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 website server, the real-time data is not that high, there is no need to request from our website every time.

After explicitly adding the cache to AJAX is true, the problem persists. It is suspected that it is a problem with the website server. The website server uses jersey to build a restful Web 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.