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次。
