AJAX's cache is maintained by the browser. For a certain URL sent to the server, ajax only interacts with the server during the first request. In subsequent requests, ajax no longer submits a request to the server, but extracts data directly from the cache.
In some cases, we need to get updated data from the server every time. The idea is to make the url requested differently without affecting the normal application: add random content after the url.
eg
url=url+"&"+Math.random();
Key points:
1. The URL requested each time is different (ajax cache does not work)
2. It does not affect normal application (most basic)
Here we have two conclusions:
1: Ajax cache and HTTP cache are the same
The HTTP and caching mechanisms of modern browsers are much worse than those of Ajax's XMLHttpRequest object, so it does not recognize or care about Ajax requests. It simply follows ordinary HTTP caching rules and caches them through the response header returned by the server.
If you already have an understanding of HTTP cache, you can use the knowledge of HTTP cache to understand Ajax cache. The only difference is that the way of setting response headers will be different from that of ordinary files.
The following response headers can make your Ajax cacheable:
Expires: This item should be set to a suitable time point in the future. The setting of the time point depends on the frequency of content changes. For example, if the requested inventory quantity, the value of Expires can be 10 seconds later. If the requested photo, the value of Expires can be longer because it will not change frequently. The Expires header allows the browser to reuse local cached data for a period of time, thereby avoiding any unnecessary interaction with the server data.
Last-Modified: Setting this item is a good choice. Through it, the browser will use If-Modified-Since in the request header to check the local cached content when sending a conditional GET request. If the data does not need to be updated, the server will return a 304 response status.
Cache-Control: In case of appropriate circumstances, this value should be set to Public so that all intermediate proxy and cache can be saved and shared with other users. In Firefox, it also supports cache for HTTPS requests.
Of course, if you use POST method to send Ajax, it cannot be cached, because POST requests will never be cached. If your Ajax request will have other effects (such as transfers between bank accounts), please use POST request.
We set up a demo (this demo can no longer be viewed (□)ノ) to clarify how these headers work. In HttpWatch, you can see that we set the above three response headers in the response header information.
If you click the 'Ajax Update' button regularly, the time changes tend to be every other minute. Because the Expires response header is set to the next minute. In the screenshot below, you can see: When you click the update button repeatedly, the Ajax request will read the browser's local cache without generating network activity (the values of the sending and transfer bars are 0)
The Ajax request sent by the last click at 1:06.531 time generated network data transmission because the cached data had exceeded one minute. The server returned 200 response status to indicate that a new copy of data was obtained.
Guess this demo should be a button, get the current time every time you click and then return to the current page.
2: IE browser will not refresh content obtained through Ajax before Expires time expires.
Sometimes, Ajax is used to fill certain parts of the page (such as a price list) when the page is loaded. It is not triggered by a user's event (such as clicking a button), but is sent through javascript when the page is loaded. It is as if Ajax requests are the same as those embedded resources (such as js and css).
If you develop such a page, when refreshing it, you may want to update the embedded Ajax request content. For embedded resources (CSS files, pictures, etc.), the browser will automatically send the following different types of requests by whether the user refreshes it is F5 (refresh) or Ctrl+F5 (force refresh):
1.F5 (refresh): If the request content has a Last-Modified response header, the browser will send a conditional update request. It uses the If-Modified-Since request header for comparison, so that the server can return a 304 state to avoid the transmission of unnecessary data.
2.Ctrl+F5 (force refresh): Tells the browser to send an unconditional update request, and the Cache-Control of the request header is set to 'no-cache'. This tells all intermediate proxy and cache: the browser needs to get the latest version, regardless of whether it has been cached.
Firefox propagates this refresh method to those Ajax requests sent when the page is loaded, and treats these Ajax requests as embedded resources. Below is a screenshot of HttpWatch under Firefox, showing the effect of Ajax requests when refreshing (F5) page:
Firefox ensures that the request initiated by Ajax is conditional. In this example, if the data is cached for less than 10 seconds, the server returns 304, if it exceeds 10 seconds, the server returns 200, and retransmits the data.
In ie, the Ajax request initiated when the page is loaded is considered to have nothing to do with refreshing other parts of the page, and will not be affected by the user's refresh method. If the cached ajax data has not expired, there will be no GET requests sent to the server. It will read the data directly from the cache, and from HttpWatch it is the (Cache) result. The following figure is to press F5 to refresh if the cache is not expired under ie:
Even if it is forced to refresh through Ctrl+F5, the data obtained through Ajax will be read from the cache:
This means that anything obtained through Ajax will not be updated under ie if it has not expired - even if you use Ctrl+F5 to force refresh. The only way to ensure that you get the latest data is to manually clear the cache. You can use the HttpWatch toolbar:
Note that the Cache result and 304 result are different. Cache is actually 200 (cache), 304 means 304. Cache actually does not send a request to the server. You can see from Chrome that its time is 0, and the response is also empty. However, 304 is different.
The 304 request is a conditional request initiated by the browser. This request carries the If-Modified-Since request header. If the file has not been modified after the browser sends the time, the server side will return a 304 status and tell the browser to use its local cache content. It is not as fast as the request is sent to the server side, but the server side does not send data.
You can check the home page of taobao, which has both 200 (cache) and 304. You can check their differences.
Summarize:
We all know that the main reason why ajax can increase the speed of page loading is that it reduces the loading of duplicate data through ajax, and truly achieves on-demand acquisition. Since this is the case, when we write ajax program, we might as well send it to the West and cache it again on the client to further improve the data loading speed. That is to cache the data in the browser memory while loading the data. Once the data is loaded, as long as the page is not refreshed, the data will be cached in the memory forever. When the user views the data again, there is no need to obtain data from the server, which greatly reduces the server's load and improves the user's experience.