Differences between readyState and status of jQuery Ajax and detailed instructions for use, jqueryreadystate

Differences between readyState and status of jQuery Ajax and detailed instructions for use, jqueryreadystate

In the previous articles, I analyzed ajax Asynchronization and synchronization of jquery and some exception handling. I feel that I haven't made clear the ajax readyState and status. Today I will talk about the ajax status.

The source code of the jquery ajax function is as follows:

Var getXmlHttpRequest = function () {if (window. XMLHttpRequest) {// the XMLHttpRequest object return new XMLHttpRequest ();} else if (window. activeXObject) {// The earlier version of IE does not provide the XMLHttpRequest object // you must use the specific implementation of the IE browser ActiveXObject return new ActiveXObject ("Microsoft. XMLHTTP ") ;}}; var xhr = getXmlHttpRequest (); xhr. onreadystatechange = function () {if (xhr. readyState === 4 & xhr. status = 200) {// after obtaining the information, perform the operation // the data is stored in xhr. responseText }}; xhr. open ("TYPE", "URL", true); xhr. send ("");

What is readyState?

ReadyState is an attribute of the XMLHttpRequest object, used to identify the status of the current XMLHttpRequest object.

ReadyState has a total of five Status values, 0 ~ 4. Each value represents a different meaning, as shown in the following table:

0 Uninitialized: An XMLHttpRequest object has been created.

1. Prepare the sending status: At this time, the open method of the XMLHttpRequest object has been called, and the XMLHttpRequest object is ready to send a request to the server.

2. Sent status: At this time, a request has been sent to the server through the send method, but no response has been received.

3. receiving status: At this time, the HTTP response header information has been received, but the message body has not completely received

4. response status: At this time, the HTTP response is received.

What is status?

Status is an attribute of the XMLHttpRequest object, indicating the HTTP status code of the response.

Under HTTP1.1, HTTP status codes can be divided into five categories, as shown in the following table:

The 1XX server receives the request and needs to continue processing. For example, the 101 Status Code indicates that the server will notify the client to use a later version of HTTP protocol.

2XX request successful. For example, the 200 Status Code indicates that the request's desired response header or data body will be returned with this response.

3XX redirection. For example, the 302 status code indicates temporary redirection. The request will contain a new URL address, and the client will make a GET request for the new address.

4XX client error. For example, Status Code 404 indicates that the resource requested by the client does not exist.

5XX server error. For example, the 500 Status Code indicates that the server encountered an unexpected situation, which caused it to fail to respond. Generally, this problem occurs when the program code fails.

Throw a problem

Why should the onreadystatechange function be used to determine both readyState and status?

We know that readyState = 4 indicates that the request response is successful. Why do we need the subsequent status? Let's start experimenting with the problem.

Only use readyState to judge

The javascript implementation code is as follows:

var getXmlHttpRequest = function () {  if (window.XMLHttpRequest) {    return new XMLHttpRequest();  }  else if (window.ActiveXObject) {    return new ActiveXObject("Microsoft.XMLHTTP");  }};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function () {  if (xhr.readyState === 4) {    alert(xhr.responseText);  }};xhr.open("GET", "/data.aspx", true);xhr.send("");

We throw an exception on the server:

public partial class data : System.Web.UI.Page{  protected void Page_Load(object sender, EventArgs e)  {    throw new Exception("Error");  }}

Run the javascript code and the prompt window displays the following:

The service response failed, but still returned information, which is not the expected result. Enable Fiddler monitoring and you can see data. aspx returns a 500 response, but because it only uses readystate for judgment, it ignores whether the returned result is 500 or 200. As long as the response is returned successfully, the following javascript code is executed, the results may cause unexpected errors. Therefore, it does not work if you only use readyState.

From another perspective, if the status code 200 is returned, the response is successful. Can I use status alone instead of readyState? Okay. Let's continue the experiment with questions.

Only use status to judge

The javascript code is implemented as follows:

var getXmlHttpRequest = function () {  if (window.XMLHttpRequest) {    return new XMLHttpRequest();  }  else if (window.ActiveXObject) {    return new ActiveXObject("Microsoft.XMLHTTP");  }};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function () {  if (xhr.status === 200) {    alert("readyState=" + xhr.readyState + xhr.responseText);  }};xhr.open("GET", "/data.aspx", true);xhr.send("");

In fact, the results are not as expected. The response code returns 200, but a total of three windows are displayed! The first is the "readyState = 2" window, the second is the "readyState = 3Test" window, and the third is the "readyState = 4Test" window. As a result, we can see that the onreadystatechange function is not triggered only when the readyState is changed to 4, but every change to the readyState will be triggered, so the situation described above appears. It can be seen that it is not feasible to use status alone.

Further consideration

From the above test, we can know that the readyState and status are indispensable at the time of judgment. So will the order of readyState and status be affected? We can adjust the status to the previous one to determine the Code, such as xhr. status = 200 & xhr. readyState = 4.

In fact, this does not affect the final result, but the intermediate performance is different. From the previous test, we know that every change in readyState triggers the onreadystatechange function. If the status is first determined, The status will be determined once more. Although the performance has little impact, we should hold the idea of pursuing the ultimate code and put the readyState judgment in front.

The above section describes the differences and usage of jQuery Ajax readyState and status. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!