Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "sample analysis of Ajax requests and browser caching", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let me lead you to study and learn the article "sample Analysis of Ajax requests and browser caching".

In modern Web applications, the front-end code is full of Ajax requests. If browser caching can be used for Ajax requests, it can significantly reduce network requests and improve program response speed.

1. Ajax Request

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

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

Very simple, notice the fourth line of code: cache:true, which explicitly requires that the cache be used directly if the current request has a cache. If this property is set to false, a request will be made to the server every time, and the Comments of Jquery is 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 at the front end, so can Ajax requests take advantage of browser caching?

Keep looking.

2. Http protocol

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

Cache-Control

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

Format in the packet:

Cache-Control: cache-directive

The cache-directive can be as follows:

Request uses:

| | "no-cache" |

| | "no-store" |

| | "max-age" = "delta-seconds |

| | "max-stale" ["=" delta-seconds] |

| | "min-fresh" = "delta-seconds |

| | "no-transform" |

| | "only-if-cached" |

| | "cache-extension" |

Response uses:

| | "public" |

| | "private" ["="] |

| | "no-cache" ["="] |

| | "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.

-Private indicates that all or part of a response message for a single user cannot be processed by a shared cache. This allows the server to describe only part of the response message of the user, which is not valid for requests from other users.

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

-no-store is used to prevent important information from being inadvertently published. Sending in a request message causes both the request and response messages to be cached.

-max-age indicates that the client can receive responses with a lifetime not longer than the specified time in seconds.

-min-fresh indicates that the client can receive responses whose response time is less than the current time plus the specified time.

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

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

Expires

Expires represents the valid time of Cache, which allows the client not to send a request before this time, which is equivalent to the effect of max-age. But if it exists at the same time, it is 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, and the second time the client requests this URL, it adds an attribute to the header asking if the file has been modified after that 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 transferred.

3. My question.

When doing the front end of Web these days, I found that every Ajax on the client side will request data from the server, but the immediacy of these data is not so high, so it is not necessary to request it every time.

After explicitly adding cache to Ajax as true, it was found that the problem remained. Therefore, it is suspected that it is the problem of the server. 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 adding Cache control, test everything 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 ();}

It's just sample code, and you can also exercise finer control, such as using CacheControl, Last-Modified, and so on.

The above is all the contents of the article "sample Analysis of Ajax requests and browser caching". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.