Introduction to Ajax requests and browser caching

In modern Web applications, the front-end code is filled with a large number of Ajax requests, if the Ajax requests can be used for browser caching, then it can significantly reduce network requests and improve program response speed.

1. Ajax Request

Using the jQuery framework can be very convenient for Ajax requests, sample code is as follows:

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

It's very simple, note the 4th line of code in it:cache：true, which explicitly asks to use the cache directly if the current request is cached. If this property is set to false, the request is made to the server each time, and Jquery's Comments 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 for the front-end, in which case Ajax requests can utilize browser caching?

Keep looking.

2. Http protocol

The header section of the Http protocol defines whether and how the client should do Cache, see 14.9 Cache-Control and 14.21 Expires in the Http Header Field Definitions for a brief description:

Cache-Control

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

format in the packet:

Cache-Control: cache-directive

The cache-directive can be the following:

The request is used when requesting:

reUsed when sponse:

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 processed by the shared cache. This allows the server to describe only part of the response message for a user, which is invalid for requests from other users.

-no-cache Indicates that request or response messages cannot be cached (HTTP/1.0 replaces no-cache with Pragma)

-no-store is used to prevent unintentional distribution of important information. Sending it in a request message will cause neither the request nor the response message to use the cache.

-max-age Instructs the client that it can receive responses that live no longer than the specified time in seconds.

-min-fresh Instructs the client that it can receive a response with a response time less than the current time plus the specified time.

-max-stale Indicates that the client can receive response messages beyond the timeout period. If you specify a value for the max-stale message, then the client can

Receives a response message that is within the specified value of the timeout period.

Expires

Expires represents the validity time of the Cache, allowing clients not to send requests before this time, equivalent to the effect of max-age. However, if it exists at the same time, it will be overridden by Cache-Control's max-age.
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 a document in GMT format. The second time a client requests this URL, it adds an attribute to the header asking if the file has been modified since that time. If the document has not been modified on the server side, the return status is 304 and the content is empty, which saves the amount of data transferred.

3. My question

While working on the web front-end these days, I realized that every Ajax on the client-side requests data from the server-side that is not so immediate that it's not necessary to request it every time.

In the explicit Ajax plus cache to true, found that the problem remains. So suspect that the server-side problems, the server side using jersey built a Restful-based service, the code snippet is as follows:

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

After adding the Cache control, test it and everything is OK.

The final code is as follows:

@GET
@Produces("application/xml")
public Response getProducts() {
      response = (data);
     // Expires 3 seconds from now..this would be ideally based
     // of some pre-determined non-functional requirement.
     Date expirationDate = new Date(() + 3000);
     (expirationDate);
     return ();
}

The above is just sample code, you can also do more fine-grained control, such as the use of CacheControl, Last-Modified and so on.

Above this talk about Ajax requests and browser caching is all I have to share with you, I hope to be able to give you a reference, and I hope you will support me more.