A brief discussion on the caching mechanism of ajax---IE browser

This article mainly introduces the caching mechanism of ajax in IE browser. The article mentions that Ajax solves the browser's caching problem. There are many solutions. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

IE browser only returns the same results for the same URL. Because, by default, IE caches the ajax request results. For the same URL address, only the first request will be actually sent to the server before the cache expires. In most cases, we use ajax to achieve partial refresh, so this involves an improvement issue.

If we want to get the latest data every time, we only need to ensure that the URL passed in is different each time. The simplest way is to splice parameters into the url. Use the random() method of the math function to generate random numbers.

For example, when visiting Baidu www.baidu.com, we can write the address as www.baidu.com?t=Math.random(); or?t=new Date().getTime();

Speaking of which, you might as well review the basic usage of ajax.

*Ajax created object: 　

　var xmlhttp;
　if (window.XMLHttpRequest){
  //IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else{
  //IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

*Ajax request:

//GET请求：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
//POST请求：
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

GET or POST?

Compared to POST, GET is simpler and faster, and works in most cases.

However, please use POST requests in the following situations:

Cache files cannot be used (updating files or databases on the server)
Sending a large amount of data to the server (POST has no data volume Limitations)
When sending user input containing unknown characters, POST is more stable and reliable than GET

*Ajax response:

To get the server's response, you need to use the responseText or responseXML property of the XMLHttpRequest object.

ResponseText: Get response data in string form.

document.getElementById("myp").innerHTML=xmlhttp.responseText;

ResponseXML: Get response data in XML form.

If the response from the server is XML and needs to be parsed as an XML object.

*Ajax - onreadystatechange:

When a request is sent to the server, we need to perform some response-based tasks.

Whenever readyState changes, the onreadystatechange event will be triggered.

In the onreadystatechange event, we specify the tasks to be performed when the server response is ready to be processed.

When readyState is equal to 4 and the status is 200, it means that the response is ready:

xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("myp").innerHTML=xmlhttp.responseText;
  }
 }

Additional: Let’s take a look at Ajax to solve browser caching problems

The main reason why Ajax can improve the page loading speed is to reduce the loading of duplicate data through Ajax, that is, the data is cached into the memory while loading the data. Once the data is loaded , as long as the page is not refreshed, these data will always be cached in memory. When the submitted URL is consistent with the historical URL, there is no need to submit it to the server, that is, there is no need to obtain data from the server, although the load on the server is reduced. , which improves user experience, but cannot obtain the latest data. In order to ensure that the read information is up-to-date, its caching function needs to be disabled.

The solutions are as follows:

① Add anyAjaxObj.setRequestHeader("If-Modified-Since", "0") before sending the Ajax request.

② Add anyAjaxObj.setRequestHeader("Cache-Control", "no-cache") before sending the Ajax request.

③ Add a random number after the URL: "fresh=" Math.random();.

④ Add the time after the URL: "nowtime=" new Date().getTime();.

⑤ If you are using jQuery, use $.ajaxSetup({cache:false}). In this way, all Ajax on the page will execute the statement without saving cache records.

Summary

The above is the ajax caching mechanism of IE browser introduced by the editor to you. I hope it will be useful to everyone. Helps. For more related tutorials, please visit AJAX Basics Video Tutorial, JavaScript Video Tutorial, bootstrap Video Tutorial!

The above is the detailed content of A brief discussion on the caching mechanism of ajax---IE browser. For more information, please follow other related articles on the PHP Chinese website!