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

What is the difference between readyState and status in Ajax? I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

The details are as follows:

Var getXmlHttpRequest = function () {try {/ / mainstream browsers provide XMLHttpRequest objects return new XMLHttpRequest ();} catch (e) {/ / lower versions of IE browsers do not provide XMLHttpRequest objects, below IE6 / / so you must use the specific implementation of IE browsers ActiveXObjectreturn new ActiveXObject ("Microsoft.XMLHTTP");}}; var xhr = getXmlHttpRequest (); / / readyState 0 = > initialization 1 = > load 2 = > load complete 3 = > parse 4 = > complete / / console.log (xhr.readyState) 0xhr.open ("TYPE", "URL", true); / / console.log (xhr.readyState); 1xhr.send (); / / console.log (xhr.readyState); 1xhr.onreadystatechange = function () {/ / console.log (xhr.status); / / HTTP status / / console.log (xhr.readyState); 2 3 4if (xhr.readyState = 4 & & xhr.status = 200) {alert (xhr.responseText);}}

The difference between 1.Ajax:readyState (status value) and status (status code)

ReadyState refers to several states experienced when running AJAX, and the steps that will respond regardless of whether the access is successful or not can be understood as AJAX running steps, which can be obtained by using "ajax.readyState".

Status, regardless of whether the AJAX access is successful or not, the HTTP header information code returned by the server based on the information submitted by the HTTP protocol is obtained by using "ajax.status".

Overall understanding: it can be simply understood that state represents the state of a whole. And status is the specific small state under the big state.

two。 What is readyState?

ReadyState is a property of the XMLHttpRequest object that identifies what state the current XMLHttpRequest object is in.

ReadyState has a total of five status values, each with a different meaning.

0: initialization. The XMLHttpRequest object has not been initialized yet.

1: load, and the XMLHttpRequest object starts sending the request

2: loading is complete, and the request for XMLHttpRequest object is sent

3: parsing, the XMLHttpRequest object starts to read the server's response

4: complete, the XMLHttpRequest object read server response ends

3. What is status?

Status is a property of the XMLHttpRequest object that represents the HTTP status code of the response

Under the HTTP1.1 protocol, HTTP status codes can be divided into five categories.

1xx: an information response class that indicates that a request has been received and processing continues

2xx: successfully handles the response class, indicating that the action is successfully received, understood, and accepted

3xx: redirects the response class, which must be further processed in order to complete the specified action

4xx: client error, customer request contains syntax error or cannot be executed correctly

5xx: server side error, the server cannot correctly execute a correct request

100buy-the customer must continue to make requests

101Mel-the customer requires the server to convert the HTTP protocol version according to the request

200Mutual-deal succeeded

201Mui-prompt to know the URL of the new file

202 color-accept and process, but processing is not completed

203mer-the return information is uncertain or incomplete

204music-request received, but the return message is empty

205Mel-the server has completed the request, and the user agent must reset the currently browsed file

206Mel-the server has completed the GET requests of some users

300mura-requested resources are available in multiple places

301mer-Delete request data

302mi-request data was found at another address

303mer-customers are advised to visit other URL or access methods

304Mel-the client has executed GET, but the file has not changed

305music-the requested resource must be obtained from the address specified by the server

306Mel-the code used in the previous version of HTTP, no longer used in the current version

307 music-declare that the requested resource is temporarily deleted

400m-incorrect request, such as syntax error

401 color-request for authorization failed

402 color-keep valid Chargeto header response

403muri-request not allowed

404Mel-No files, queries, or URl found

405Mel-the method defined by the user in the Request-Line field is not allowed

406Mel-the requested resource is inaccessible based on the Accept sent by the user

407 Mel-similar to 401, users must first be authorized on the proxy server

408Mel-the client did not complete the request within the hungry time specified by the user

409 color-the request could not be completed for the current resource status

410Mel-this resource is no longer available on the server and there is no further reference address

411Mel-the server rejects a user-defined request for Content-Length attributes

412Mel-one or more request header fields are incorrect in the current request

413Mel-the requested resource is larger than the size allowed by the server

414Mel-the requested resource URL is longer than the length allowed by the server

415Mel-request resource does not support request project format

416 range-the request contains the Range request header field, there is no range indication value within the scope of the current request resource, and the request does not contain the If-Range request header field

417Mel-the server does not meet the expected value specified in the request Expect header field. If it is a proxy server, it may be that the server at the next level cannot meet the request.

500mura-an internal error occurred on the server

501Mel-the server does not support the requested function

502Mel-the server is temporarily unavailable, sometimes to prevent system overload

503mura-server overload or suspension of maintenance

504Mel-the gate is overloaded and the server uses another gate or service to respond to the user. The set value of waiting time is long.

505Mel-the server does not support or reject the HTTP version specified in the request header

4. Question to consider: why does the functional implementation of onreadystatechange judge both readyState and status?

The first way of thinking: use only readyState

Var getXmlHttpRequest = function () {if (window.XMLHttpRequest) {return new XMLHttpRequest ();} else if (window.ActiveXObject) {return new ActiveXObject ("Microsoft.XMLHTTP");}}; var xhr = getXmlHttpRequest (); xhr.open ("get", "1.txt", true); xhr.send (); xhr.onreadystatechange = function () {if (xhr.readyState = 4) {alert (xhr.responseText);}}

There was an error in the service response, but the information was returned, which is not what we wanted.

If the return is not 200,404,500, because only using readystate to judge, it does not care whether the result is 200,404 or 500. as long as the response is returned successfully, the next javascript code will be executed, resulting in a variety of unexpected errors. So it is not feasible to use readyState alone to judge.

The second way of thinking: use only status to judge

Var getXmlHttpRequest = function () {try {return new XMLHttpRequest ();} catch (e) {return new ActiveXObject ("Microsoft.XMLHTTP");}}; var xhr = getXmlHttpRequest (); xhr.open ("get", "1.txt", true); xhr.send (); xhr.onreadystatechange = function () {if (xhr.status = 200) {alert ("readyState=" + xhr.readyState + xhr.responseText);}}

In fact, the result was not as expected. The response code did return 200, but a total of 3 windows popped up! The first is the "readyState=2" window, the second is the "readyState=3" window, and the third is the "readyState=4" window. Thus, it can be seen that the execution of the onreadystatechange function is not triggered only when readyState changes to 4, but every change in readyState (2, 3, 4) is triggered, so the situation mentioned above occurs. It can be seen that it is not feasible to use status alone to judge.

5. From the above experiments, we can know that readyState and status are indispensable in judgment. So will the order of readyState and status have an impact? We can adjust the status to the front to judge first, such as xhr.status = & & xhr.readyState = = 4

In fact, this has no effect on the final result, but the performance in the middle is different. We know from the experiment that every change in readyState will trigger the onreadystatechange function. If the status is judged first, then the state of the status will be judged again each time. Although there is little impact on performance, you should put readyState's judgment first with the idea of pursuing the ultimate code.

Xhr.readyState = = 4 & & xhr.status = = 200After reading the above, have you mastered the difference between readyState and status in Ajax? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.