Detailed Explanation of Ajax Basic Knowledge

Ajax mainly realizes the browser-side asynchronous access to the server: through the browser's XMLHttpRequest object, a small amount of data is sent to the server, interacts with the server, and the server returns a small amount of data, and then updates a part of the client's page.

1.first instantiate the XMLHttpRequest object

var request;
if (window.XMLHttpRequest){
 request=new XMLHttpRequest();
}
else{
 request=new ActiveXObject("Microsoft.XMLHTTP");
 //compatible with ie5 6
}

2.XMLHttpRequest method sends the request to the server

request.open("POST",get.php,true);//request
//Sets the http header information, telling the server that we will send a form in send key-value pairs
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded);
//POST must set Content-The value of Type is between open and send
request.send("name=王二狗&sex=男");//submitted to the server using the send method

3.methods to get the response

responseText obtains the response data in string format
responseXML obtains the response data in XML format
status and statusText return the HTTP status code in numeric and text form
getAllResponseHeader() retrieves all the response headers
getResponseHeader() queries the value of a certain field in the response

4Listen to the change of readyState attribute is very important

　　　 For 0, the request has not been initialized, and open has not been called

　　　 For1 The server connection has been established, and open has been called

　　　 For2 The request has been received, and the header information has been received

　　　 For3 The request is being processed, and the response body has been received

　　　 For4 The request is complete, and the response is ready, the response is complete

//Triggered when readyState changes
//Judge the change of readyState attribute through the onreadystatechange event
request.onreadystatechange=function(){
 if(request.readyState===4&&request.status===200){
 //Do something, like getting the response data request.responseText
 }
}

5Complete XHR

var request=new XMLHttpRequest();//1Create an XHR object
request.open("GET","get.php?number=" +The data to be submitted in the form, true);//2Call the open method
//If it is a POST request, send is an object containing data
request.send();//Send some data
request.onreadystatechange=function(){ //3Listen and judge whether the server responds correctly
 if(request.readyState===4&&request.status===200){
 //4Do something, like getting the server response content request.responseText
 }
}

That's all for this article. I hope the content of this article can bring some help to your learning or work, and I also hope to support the Yelling Tutorial more!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.