Parse the AJAX cache mechanism on the browser side and parse the ajax Cache Mechanism

Parse the AJAX cache mechanism on the browser side and parse the ajax Cache Mechanism

The AJAX cache is maintained by the browser. For a url sent to the server, ajax only interacts with the server during the first request. In subsequent requests, ajax no longer submits requests to the server, instead, extract data directly from the cache.
In some cases, we need to obtain the updated data from the server every time. The idea is to make the URLs of each request different without affecting the normal application: Add random content after the url.
E.g.

url=url+"&"+Math.random();

Key points:
1. The URLs of each request are different (ajax cache does not work)
2. Normal applications are not affected (the most basic)

Here we come to two conclusions:

1: The Ajax cache is the same as the HTTP cache.
Modern browsers have much worse HTTP and cache mechanisms than Ajax XMLHttpRequest objects, so they do not know or care about Ajax requests. it only follows common HTTP cache rules and caches the Response Headers returned by the server.
If you already know about HTTP caching, you can use Ajax caching to understand HTTP caching. the difference is that the method for setting the response header is different from that for common files.
The following response headers can make your Ajax cache:
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 request is an inventory quantity, the Expires value can be 10 seconds later. if a photo is requested, the Expires value can be longer, because it will not change frequently. the Expires header allows the browser to reuse local cache data for a period of time, thus avoiding any unnecessary interaction with server data.
Last-Modified: setting this item is a good choice, when sending a conditional GET request, the browser uses the If-Modified-Since in the request header to check the locally cached content. if the data does not need to be updated, the server returns the 304 response status.
Cache-Control: when appropriate, this value should be set to Public so that all intermediate proxies and caches can be saved and shared with other users. firefox also supports HTTPS request caching.
Of course, if you use POST to send Ajax, it cannot be cached, because the POST request will never be cached. if your Ajax request has other functions (such as transfers between bank accounts), use the POST request.
We have set up a demo (this demo can no longer see the example (example □example) example) to illustrate how the header information works. in HttpWatch, you can see that the above three response headers are set in the response header information.

If you click the 'ajax Update' button regularly, the time changes every minute. because the Expires response header is set to one minute in the future. in the following figure, you can see that when you click the update button repeatedly, the Ajax request will read the local cache of the browser without generating network activity (the value of the send and transfer columns is 0)

Last time. 531 the Ajax request sent by clicking at the moment produces network data transmission, because the cached data has exceeded one minute. the server returns the 200 response status, indicating that a new data is obtained.
I guess this demo should be a button. Each time you click it to get the current time, it will be returned to the current page.

2: The IE browser will not refresh the content obtained through Ajax before the Expires time Expires.
Sometimes, Ajax is used to fill certain parts of the page (such as a price list) during page loading ). it is not triggered by a user event (such as clicking a button), but is sent through javascript during page loading. it's like Ajax requests are the same as those embedded resources (such as js and css.
If you develop such a page, you may want to update the embedded Ajax request content when refreshing it. for Embedded resources (CSS files, images, etc.), the browser will automatically send the following types of requests by refreshing 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 the 304 status to avoid unnecessary data transmission.
2. ctrl + F5 (Force refresh): tells the browser to send an unconditional update request. The Cache-Control in the request header is set to 'no-cache '. this tells all intermediate proxies and caches that the browser needs to obtain the latest version, whether or not it has been cached.
Firefox transmits this refresh Method to the Ajax requests sent when the page is loaded. These Ajax requests are processed as embedded resources. the following is the result of the Ajax request for HttpWatch refreshing (F5) page under Firefox, which shows the Ajax Caching demo (which can no longer be viewed by parse (batch □batch) refreshing:

Firefox ensures that Ajax requests are conditional. In this example, if the cached data is less than 10 seconds, the server returns 304, more than 10 seconds, the server returns 200, and the data is re-transmitted.
In ie, the Ajax request initiated when the page is loaded is regarded as unrelated to the refreshing of other parts of the page, and will not be left or right by the user's refreshing method. if the cached ajax data does not expire, no GET requests will be sent to the server. it reads data directly from the Cache, and the result is (Cache) from HttpWatch. the figure below shows that when the cache in ie is not expired, press F5 to refresh:

Even if you use Ctrl + F5 to force refresh, the data obtained through Ajax is also read from the cache:

This means that any content obtained through Ajax will not be updated in 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 is different from the 304 result. the Cache is actually 200 (cache), and 304 is 304. the Cache does not actually send a request to the server. We can see from chrome that the time consumed is 0 and the response is empty. 304 is different,
The 304 request is a conditional request initiated by the browser, which carries the If-Modified-Since request header. If the file is not Modified after the time sent by the browser, the server returns a 304 status, telling the browser to use its local cache content. it does not Cache fast, because the request is still sent to the server, but the server does not send data.
You can see the taobao homepage, which contains 200 (cache) and 304. You can view their differences.

Summary:

We all know that the main reason why ajax can speed up page loading is that it reduces the loading of duplicate data through ajax and truly achieves on-demand acquisition. In this case, when writing an ajax program, we may send it to the west and cache it again on the client side to further increase the data loading speed. That is, when loading data, the data is cached in the browser memory. Once the data is loaded, the data is always cached in the memory as long as the page is not refreshed, when you view the data again, you do not need to obtain the data from the server, which greatly reduces the server load and improves the user experience.