Ajax readystatus 和 status的“使命”

18.jpg

readyState 是XMLHtttpRreadyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。

• readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义
  • 0 || UNSEND 未发送初始化状态： 此时，已经创建了一个 XMLHttpRequest 对象
  • 1 || OPENED 准备发送状态：此时，已经调用了XMLHttpRequst对象的open方法，并且XMLHttpRequest对象已经准备好一个请求发送到服务器端
  • 2 || HEADERS_RECEIVED 已经发送状态：此时，已经发送状态：此时，已经通过send方法把一个请求发送到服务器，但是还没有收到一个响应(请求头接收完毕)
  • 3 || LOADING 正在接收状态，此时，已经接收到HTTP响应头部信息，但是消息体部分还没有全部收到 （请求数据正在加载中)
  • 4 || DOME 完成响应状态；已经完成了HTTP响应的接收

status :是XMLHttpRequest对象的一个属性，表示相应的HTTP状态码。

• 在HTTP1.1协议下，HTTP状态总共可分为5大类常见的我列举一下：
  • 101状态码，表示服务器将通知客户端使用更高版本的HTTP协议。
  • 200 Ok 文档正确返回
  • 301 Redirect 永久重定向。一直从其他地方获取资源
  • 302 Redirect 临时重定向。 临时到其他地方获取资源
  • 303 see other、307 Temporary Redireact 将客服端重定位到一个负载不大的服务器上，用于负载均衡和服务器失联
  • 404 Not Found 无法获取这个资源
  • 500 Internal Server Error 服务器错误

问题思考我们常常在接收请求信息是的判断 xhr.readystatte == 4 && /^2\d{2}$/.test(xhr.status),既然readyState === 4 已经表示响应成功了，为什么还要后续的status呢？带着这个问题，搭建环境做了一下测试：

• 只使用readystate判断

• javascript端的实现代码如下：

 var getXHR = function(){
        var xhr = null,
            ary = [
                function(){
                   return new XMLHttpRequest(); //IE7+
                },
                function(){
                    return new ActiveXObject("Microsoft.XMLHTTP");//code forIE6,IE5
                },
                function(){
                    return new ActiveXObject("Msxml2.XMLHTTP");
                },
                function(){
                    return new ActiveXObject("Msxml3.XMLHttP");
                }
            ];
        for(var i = 0;i < ary.length;i++){
            try{
                xhr = ary[i]();
                getXHR = ary[i];  //函数第一次运行的时候发现可用的xml对象实例，让提供该实例的函数覆盖掉getXHR,这样下次运行getXHR就不用重复检查啦！（函数惰性重载的思想---听起来高大上）
                break;
            }catch (e){

            }
        }
        if(xhr == undefined){
           throw Error("你的浏览器不支持异步数据请求！");
        }
        return xhr;
    };
  var xhr = getXHR();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            console.log(xhr.responseText);
        }
    };
   
    xhr.open("GET","/data.json",true);
    xhr.send(null);

• node服务器代码：

let http = require('http');
let url = require('url');
let fs = require('fs');
let mime = require('mime');

let listener = function(req,res){
    let {pathname,query} = url.parse(req.url,true);
    

    if(pathname == '/'){
        let result = fs.readFileSync('1.html',"utf-8");
        res.setHeader('Content-Type','text/html;charset=utf-8');
        res.statusCode = 200;
        return res.end(result); //First argument must be a string or Buffer;
    }
    let flag = fs.existsSync('.' + pathname);
   if(flag){
       let result = fs.readFileSync('.' + pathname,"utf-8");
       res.setHeader('Content-Type',mime.lookup(pathname) + ';charset=utf-8');
       res.statusCode = 200;
       return res.end(result)
   }else{
       res.setHeader('Content-Type','text/plain;charset=utf-8');
       res.statusCode = 404;
       return res.end('你请求的内容不存在!');
   }
};

http.createServer(listener).listen(3001,function(){
    console.log("server port is 3001!");
});

• chrome 测试结果：

[
  {"id": 1,"name": "jmty","age": 23}
]

• ps： node的响应数据类型只有字符串和buffer两种类型

• IE10 测试结果：

[
  {"id": 1,"name": "jmty","age": 23}
]

• ps IE10一下也正常

• 总结： 从本次实验来看只是用readystate做判断测试正常。在实际的项目中有碰到当状态码返回值是5xx系列时readystate也会等于4；实践中会发现只是用readystate做判断，它不理会放回的结果是500还是200，只要响应成功返回了，就执行接下来的javascript代码，结果将造成各种不可预料的错误。所以只使用readyState判断是行不通的。

• 换另外一个角度想，状态码返回200就表示这次响应是成功的了，那么是不是可以不使用readyState，单独只使用status做判断呢？好，带着问题，继续来做试验吧。

• 只使用status判断

  • javascript端的代码实现如下、

xhr.onreadystatechange = function(){
     if(xhr.status == 200){
     console.log("readyState=" + xhr.readyState + xhr.responseText);
     }
     };

*其他 ajax部分，和 node部分 同上

• chrome测试结果

readyState=2
 readyState=3[
  {"id": 1,"name": "jmty","age": 23}
]
 readyState=4[
  {"id": 1,"name": "jmty","age": 23}
]

• IE10 测试结果：

readyState=2
 readyState=3[
  {"id": 1,"name": "jmty","age": 23}
]
 readyState=4[
  {"id": 1,"name": "jmty","age": 23}
]

• ps : IE10- 会抛出错误

• 总结： 由此可以看出响应码确实返回的200，但是返回了3次！分别是：
  • 第一次是 "readyState=2"
  • 第二次是 "readyState=3"
  • 第三次是 "readySate=4"
• 由此，可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的，而是readyState的每次变化都会触发，所以就出现了前面说的那种情况。可见，单独使用status判断也是行不通的。

• 进一步思考： 我们单独使用readyState或status都会出现问题，因此必须同时使用；从性能上来讲建议不readystate放前面判断，由于&&的短路操作就不会执行xhr.status啦! 毕竟返回的状态码只有一个而readyState需要执行3次。