Discuss issues related to readyState and status in Ajax

This article mainly introduces relevant information on issues related to readyState (status value) and status (status code) in Ajax. It is very good and has reference value. Friends who need it can refer to it

Let’s first look at the following piece of code, and then give you a detailed introduction to the issues related to readyState (status value) and status (status code) in Ajax. The specific content is as follows:

var getXmlHttpRequest = function () {
try{
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
}catch(e){
//低版本的IE浏览器没有提供XMLHttpRequest对象，IE6以下
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
// readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
// console.log(xhr.readyState); 0
xhr.open("TYPE", "URL", true);
// console.log(xhr.readyState); 1
xhr.send();
// console.log(xhr.readyState); 1
xhr.onreadystatechange = function () {
// console.log(xhr.status); //HTTP状态吗
// console.log(xhr.readyState); 2 3 4
if(xhr.readyState === 4 && xhr.status === 200){
alert(xhr.responseText);
}
};

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

readyState refers to the experience of running AJAX Several states have been passed, and the steps that will respond regardless of whether the access is successful can be understood as AJAX running steps. Use "ajax.readyState" to obtain the

status, which means that regardless of whether the AJAX access is successful or not, by The HTTP protocol uses "ajax.status" to obtain the HTTP header information code returned by the server based on the submitted information.
Overall understanding: It can be simply understood that state represents an overall status. And status is the specific small status under this big state.

2. What is readyState

readyState is an attribute of the XMLHttpRequest object, used to identify the state of the current XMLHttpRequest object.

readyState has a total of 5 status values, ranging from 0 to 4. Each value represents a different meaning

0: Initialization, the XMLHttpRequest object has not yet completed initialization

1: Loading, the XMLHttpRequest object begins to send the request

2: Loading is completed, the request of the XMLHttpRequest object is completed

3: Parsing, the XMLHttpRequest object begins to read the server's response

4: Completed, the XMLHttpRequest object reads the server response and ends

3. What is status

status is the XMLHttpRequest object An attribute indicating the response HTTP status code

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

1xx: Information response class, indicating that the request is received and continued Processing

2xx: Processing success response class, indicating that the action was successfully received, understood and accepted

3xx: Redirect response class, in order to complete the specified action, further processing must be accepted

4xx: Client error, the client request contains syntax errors or cannot be executed correctly

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

100 - The client must continue Make a request

101——The client requires the server to convert the HTTP protocol version according to the request

200——The transaction is successful

201——Prompt to know the URL of the new file

202——Accepted and processed, but the processing was not completed

203——The return information is uncertain or incomplete

204——The request was received, but the return information was empty

205 - The server has completed the request, the user agent must reset the currently browsed files

206 - The server has completed some of the user's GET requests

300 - The requested Resource available in multiple places

301 - Request data removed

302 - Request data found at other address

303 - Customers advised to visit other URLs or visit Method

304——The client has performed GET, but the file has not changed

305——The requested resource must be obtained from the address specified by the server

306——Previous Code used in a version of HTTP, no longer used in the current version

307 - Declaring that the requested resource is temporarily deleted

400 - Error request, such as syntax error

401 - Request authorization failed

402 - Preserve valid ChargeTo header response

403 - Request not allowed

404 - No file, query or URL found

4.思考问题：为什么onreadystatechange的函数实现要同时判断readyState和status呢？

第一种思考方式：只使用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);
}
};

服务响应出错了，但还是返回了信息，这并不是我们想要的结果

如果返回不是200，而是404或者500，由于只使用readystate做判断，它不理会放回的结果是200、404还是500，只要响应成功返回了，就执行接下来的javascript代码，结果将造成各种不可预料的错误。所以只使用readyState判断是行不通的。

第二种思考方式：只使用status判断

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);
}
};

事实上，结果却不像预期那样。响应码确实是返回了200，但是总共弹出了3次窗口！第一次是“readyState=2”的窗口，第二次是“readyState=3”的窗口，第三次是“readyState=4”的窗口。由此，可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的，而是readyState（2、3、4）的每次变化都会触发，所以就出现了前面说的那种情况。可见，单独使用status判断也是行不通的。

5.由上面的试验，我们可以知道判断的时候readyState和status缺一不可。那么readyState和status的先后判断顺序会不会有影响呢？我们可以将status调到前面先判断，代码如 xhr.status === 200 && xhr.readyState === 4

事实上，这对于最终的结果是没有影响的，但是中间的性能就不同了。由试验我们知道，readyState的每次变化都会触发onreadystatechange函数，假如先判断status，那么每次都会多判断一次status的状态。虽然性能上影响甚微，不过还是应该抱着追求极致代码的想法，把readyState的判断放在前面。

xhr.readyState === 4 && xhr.status === 200

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

全面解析$.Ajax()方法参数（图文教程）

IE8下Ajax缓存问题及解决办法

浅谈ajax请求技术

The above is the detailed content of Discuss issues related to readyState and status in Ajax. For more information, please follow other related articles on the PHP Chinese website!