Analysis and solution to Ajax page cache problems

1. What is the Ajax cache principle?

After Ajax successfully sends the data, it stores the request URL and returned response results in the cache. When Ajax is called to send the same request, it retrieves data directly from the cache to improve the response speed and user experience of the page. Currently, the two request URLs must be identical, including parameters. At this time, the browser will not interact with the server.

II. Benefits of Ajax cache

This design allows the client to make some static page content requests, such as images, css files, and js scripts, faster, faster page response, and saves network communication resources.

III. Ajax cache insufficiency

Although Ajax cache has the above advantages, if Ajax is used to modify some background data, although the data has changed in the background, the page cache has not changed, for the same URL, after Ajax is submitted, the browser simply retrieves data from the cache, which of course won't work.

IV. Solutions to Ajax cache problems

The most effective way to solve this problem is to disable page caching. There are several solutions:

1. Add xmlHttpRequest. setRequestHeader ("Cache-Control", "no-cache") before ajax sends a request ");

2. Add the header on the server ("Cache-Control: no-cache, must-revalidate ");

3. Add xmlHttpRequest. setRequestHeader ("If-Modified-Since", "0 & Prime;) before ajax sends a request ;);

Supplement

4. Add "? Fresh = "+ Math. random (); // of course, the fresh parameter can be any one here

5. The fifth method is similar to the fourth method. Add "? Timestamp = "+ new Date (). getTime ();

6. Replace GET with POST: not recommended

1jQuery provides a method to prevent ajax from using the cache,

<! --

<Script type = "text/javascript" language = "javascript">
$. AjaxSetup ({
Cache: false // close AJAX cache
});
</Script>

The second is to modify the load url.

 

For example, if you add more time parameters to the url, you can use this method again in wap1.0 to avoid reading the cache.

<! --

Function loadEventInfoPage (eventId ){

$. AjaxSetup ({
Cache: true // js and css images on the page loaded after the time is added under the AJAX cache will be reloaded,

// This action will be reloaded, but js, css, and images will be cached.
});
$ ("# ShowEventInfo"). load (ctx + "/custeven TS/viewEvent. action ",
{"Complaint. Id": eventId, "tt" :( new Date (). getTime ()}, function (){})
}

Third, set html cache

<! --

<META HTTP-EQUIV = "Pragma" CONTENT = "no-cache">
<META HTTP-EQUIV = "Cache-Control" CONTENT = "no-cache">
<META HTTP-EQUIV = "Expires" CONTENT = "0">