What are the common mistakes when using Ajax

This time I will bring you what common mistakes are when using Ajax, what are the common mistakesnotes when dealing with Ajax, the following is a practical case, let's take a look.

1, Ajax status judgment if else statement problem when sending a request.

var xhr = new XMLHttpRequest(); 
xhr.open("get",strUrl);<br>
<br>xhr.onreadystatechange = function(){ 　　
<br><br>　　　
　if(xhr.readyState === 4){ 
<br><br><em id="mceDel">　　　　　　　　
if(xhr.status ===200){ 　　
console.log(xhr.responseText); 　　　　　
} 　
<br><br></em><em style="line-height: 1.5;" id="mceDel">
<em id="mceDel"><em id="mceDel"><em id="mceDel">　　　　
}else </em></em></em></em><em style="line-height: 1.5;" id="mceDel"><em id="mceDel"><em id="mceDel">
<em id="mceDel"><em id="mceDel">{<br>　　　　
console.log(xhr.status); } 　
<br>　}</em></em></em></em></em>

xhr.send();

At that time, two 200 status codes were output, and then xhr.responseText, the obtained content, was output. It was very strange at the time. I wonder where these two 200 came from?

I tried to output a lot of content at that time, but still couldn’t find the reason. The problem was discovered only when the else statement was changed to console.log(xhr.readystate). At this time, the output check was 2, 3, and the obtained content was obtained. Only then did I discover the reason:

From when xhr sends a request to the end of the request, it will go through 5 states. The status codes are 0, 1, 2, 3, 4 (which is the value of readystate). Each time the state changes, , the readystatechange event will be triggered and the event processing function will be called. When the status code changes to 2, it calls the readystatechange event, and then uses the if/else statement.

This is readystate, obviously not 4, and then uses the else statement to output 2. And so on, when it is 3 or 4 Then call the readystatechange event, and only when it is 4 will the content in the if be taken. If the request is successful, the request content will be returned.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How does ajax submit a form and implement file upload

Ajax transmits json format data to the background. How to handle errors

The above is the detailed content of What are the common mistakes when using Ajax. For more information, please follow other related articles on the PHP Chinese website!