Shulou(Shulou.com)06/02 Report--

readyState and status attributes and how AJAX receives data returned by the server, many novices are not very clear about this, in order to help you solve this problem, the following small series will explain in detail for everyone, there are people who need this can learn, I hope you can gain something.

Before explaining how to receive server data, take a look at the readyState and status properties of the XMLHttpRequest object. What are the readyState and status attributes? How does AJAX receive data from the server?

What are readyState and status attributes?

The readyState property holds the interaction state of the XMLHttpRequest object, varying from 0 to 4:

0: uninitialized (send() method has not been called);

1: Load (send() method called, request being sent);

2: Load completed (send() method execution completed, all response data has been received);

3: Interactive (parsing response data);

4: Completed (response data parsing completed, can be called in the client).

The status property holds a status code returned by the server when the XMLHttpRequest object interacts with the background. For example:

200: OK, request sent successfully;

404: Page not found.

View the full status code: Ajax status comparison table

Note: ReadyState and status have different meanings. ReadyState is the interactive state of the XMLHttpRequest object. There are 5 states in total, regardless of the server. Status is a status code returned by the server, indicating the response result of the server. For example, 200 indicates that the server response is successful, and 404 indicates that the requested file does not exist on the server.

AJAX request successful, xmlhttp.readyState=4, xmlhttp. status =200, code:

if (xmlhttp.readyState==4 && xmlhttp.status==200){

// AJAX request successful, processing response data

}

Event handle onreadystatechange

onreadystatechange is an event handler that stores a function (or function name) that is called whenever the readyState property changes.

When an AJAX request is sent, the client cannot determine when the request is complete, so an event mechanism is needed to capture the state of the request, i.e. the readyState value.

This code is shown below:

xmlhttp.onreadystatechange=function(){

//This method is called every time readyState is changed

if (xmlhttp.readyState==4 && xmlhttp.status==200){

// AJAX request successful, processing response data

}

}

How AJAX receives data from the server

To receive response data from the server, use the responseText or responseXML attribute of the XMLHttpRequest object.

attribute description

responseText Parses the response data as a string.

responseXML Parses the response data as XML.

For example, update the data returned by the server to the node id="demo":

?

1

document.getElementById("demo")[xss_clean]=xmlhttp.responseText ;

Note: The data returned by the server is generally parsed as a string, rarely as XML, and responseXML is not covered here.

At this point, we can finally implement a complete AJAX request.

The following code shows how to get the client IP address:

script type="text/javascript">

var xmlhttp;

//Create XMLHttpRequest object

try{

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}catch(e){

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function(){

if (xmlhttp.readyState==4 && xmlhttp.status==200){ //Response succeeded

document.getElementById("demo")[xss_clean]=xmlhttp.responseText;

}

}

xmlhttp.open("POST","/demo/javascript/ajax/ajaxDemo.php? action=getIP",true);

xmlhttp.send();

/script>

Note: onreadystatechange needs to be set before the request is sent, and when writing code, write it before open() and send().

Did reading the above help you? If you still want to have further understanding of related knowledge or read more related articles, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.