1. Principle of Ajax
The full name of Ajax is: Async JavaScript and XML
It is a JS+XML data object to update web pages asynchronously without refreshing. It is a technology that can update part of the web content without refreshing the entire page. Simply put, it sends an asynchronous request to the server through the XMLHttpRequest object. Get data from the server, and then update the page by manipulating dom elements through javascript
Second, the realization of the principle of Ajax
1. Instantiate xhr asynchronous object var xhr=new XMLHttpRequest()
2. Establish request connection xhr.open('get','url address',true) //request type get, post path: url address true: asynchronous request, false: Synchronous request
3. Send request xhr.send()
4. Whether the sending is successful xhr.onreadystatechange=function(){if(xhr.readyState==4){ //Whether the sending is successful: http request status: 0,1 ,2,3,4
if(xhr.status==200) //Server response status: 200<=xhr.status<300||xhr.status=304 means success
{ //What to do after a successful request: response content //console.log(xhr.responseText); } else { //What to do if the request fails: give you a status // console.log(xhr.status); }
}}
Three, onreadystatechange event
HTTP request status code: 5 states readyState value
0 initial state (ajax object creation completed)
1 connected (open method executed correctly)
2 sending completed (send execution completed)
3 Receive complete header url+get
4 Receive complete body post
0 1 2 3 4 Status, success or failure will trigger completion 4
The server returns an http response code
200<=xhr.status<300||xhr.status=304 means success
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)
Successful status code:
200 - the server successfully returned the page
304 - not modified
Failed status code:
404 - the requested page does not exist
503 - the server is temporarily unavailable
500 - internal server error