A brief discussion on Ajax requests and browser caching-JS Tutorial-php.cn

A brief discussion on Ajax requests and browser caching

韦小宝

Release： 2018-01-13 11:42:03

Original

1681 people have browsed it

The following editor will bring you a brief discussion of Ajax requests and browser caching. The editor thinks it's pretty good, so now I'll share the ajax source code with you and give it as a reference. If you are interested in ajax, follow the editor to take a look.

In modern web applications, the front-end code is flooded with a large number of Ajax requests. If the browser cache can be used for Ajax requests, it can be significantly reduced. Network requests to improve program response speed.

1. Ajax Request

Using the jQuery framework can make Ajax requests very conveniently. The sample code is as follows:

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

Copy after login

is very simple, pay attention to the 4th line of code: cache: true, which explicitly requires that if the current request has a cache, use the cache directly. If this attribute is set to false, it will make a request to the server every time. 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.

There is only so much work on the front end, so can Ajax requests take advantage of the browser cache? ?

Keep watching.

2. Http protocol

The header part of the Http protocol defines whether the client should do Cache and how to do Cache. For details, see 14.9 Cache-Control and 14.21 Expires of Http Header Field Definitions. Here is a brief explanation:

Cache-Control

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

Format in the data packet:

Cache-Control: cache-directive

cache-directive can be the following:

Use when requesting:

response is used:

Description:

-Public indicates that the response can be cached by any cache area.

-Private Indicates that all or part of the response message for a single user cannot be sharedCache processing. This allows the server to only describe a partial response from a user that is not valid for other users' requests.

-no-cache indicates that the request or response message cannot be cached (HTTP/1.0 is replaced by Pragma's no-cache)

-no-store is used to prevent important information from being released unintentionally. Sending it in the request message will cause both the request and response messages to use caching.

-max-age Indicates that the client can receive responses with a lifetime no greater than the specified time in seconds.

-min-fresh Indicates that the client can receive responses 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 the value of max-stale message is specified, then the client can

receive response messages that exceed the specified value of the timeout period.

Expires

Expires represents the effective time of the Cache, allowing the client not to send requests before this time, which is equivalent to the effect of max-age. But if they exist at the same time, they 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 uses GMT format to indicate the last modification time of the document. When the client requests this URL for the second time, an attribute will be added to the header to ask whether the file has been modified after this time. If the file on the server side has not been modified, the return status is 304 and the content is empty, thus saving the amount of data to be transmitted.

3. My problem

When I was working on the Web front-end these days, I found that every Ajax request from the client would be made from the server. Data, and the immediacy of these data is not that high, there is no need to request it every time.

After explicitly adding cache to Ajax as true, I found that the problem remained. So I suspected that it was a problem on the server side. The server used 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();
}

Copy after login

添加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();
}

Copy after login

以上只是示例代码，还可以进行更精细的控制，例如使用CacheControl、Last-Modified等等。