Detailed explanation of the use of Ajax and browser cache

This time I will bring you a detailed explanation of the use of Ajax and browser caching. What are the precautions when using Ajax and browser caching? The following is a practical case, let's 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, the network requests can be significantly reduced and the program response speed can be improved.

1. Ajax Request

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

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

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 property is set to false, it will request 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, only Pragma is implemented: no-cache)

Format in the data packet:

Cache-Control: cache-directive

cache-directive can be the following:

Use when requesting:

| "no-cache"
| "no-store"
| "max-age" "=" delta- seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if -cached"
| "cache-extension"

response is used:

| "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 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 describe only 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 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用GMT格式表明了文档的最后修改时间，客户端第二次请求此URL时，会在头部加入一个属性，询问该时间之后文件是否有被修改过。如果服务器端的文件没有被修改过，则返回状态是304，内容为空，这样就节省了传输数据量。

3. 我的问题

这几天在做Web前端的时候，发现客户端的每次Ajax都会从服务器端请求数据，而这些数据的即时性没有那么高，没必要每次都请求。

在显式的给Ajax加上cache为true后，发现问题依旧。于是怀疑是服务端的问题，服务端使用 jersey 搭建了基于Restful的服务，代码片段如下：

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

$.ajax()的使用方法（附代码）

ajax怎么实现远程通信功能

The above is the detailed content of Detailed explanation of the use of Ajax and browser cache. For more information, please follow other related articles on the PHP Chinese website!