ajax的readyState状态值和onreadystatechange事件，帮助你更好的理解ajax

1.readyState是什么？

注意：如果不懂得ajax是什么的先了解ajax是什么东西

readyState：返回XMLHTTP请求的当前状态。
（也就是说你有一个ajax请求，你想知道它已经发送了吗？发送后它接收到数据了吗？它现在进行到哪一步了？你就可以获取readyState这个属性的值来知道它现在的状态）

2.readyState它有多少个值，分别代表什么？

readyState属性一共有5个值，分别是0，1，2，3，4

值	含义
0	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置
1	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送
2	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。接收到了响应头,但未接收到响应体
3	所有响应头部都已经接收到。响应体开始接收但未完成
4	HTTP 响应已经完全接收，也就是响应头与响应体都接收到了

3.认识ajax的onreadystatechange事件(能帮助理解readyState)

先来写一个简单的原生ajax请求，01time.php是我本地服务端的一个数据接口

var xhr = new XMLHttpRequest();
        xhr.open('GET', './01time.php');
        xhr.send();
        xhr.onreadystatechange = function () {
            console.log('1'); //1,打印了三次
        };

这里可以看出onreadystatechange事件是在它ajax状态改变时触发的，所以打印了3次1，我理解为它是由：
状态1变成状态2打印了一次1
状态2变成状态3打印了一次1
状态3变成状态4打印了一次1

4.尝试获取某个ajax请求的全部readyState值

理解了上面的onreadystatechange事件，你就可以知道为什么下面打印的是2，3，4了

 var xhr1 = new XMLHttpRequest();
        console.log(xhr1.readyState); //0
        xhr1.open('GET', './01time.php');
        console.log(xhr1.readyState); //1
        xhr1.send();
        console.log(xhr1.readyState); //1
        xhr1.onreadystatechange = function () {
            console.log(this.readyState); //2,3,4
        };

这里有一点你可能会疑惑：
为什么send()方法后的打印的状态值还是1，这里你可以理解为：浏览器执行js代码速度是很快的，而ajax请求的每个步骤是比浏览器执行js代码慢很多的，send()方法之后才算发生了一个ajax请求并且执行，send()方法之后js代码立马就去查看它的状态值，这个ajax请求的响应头都没接收完，那打印的状态值就是1了

5.为什么获取响应体时一般要if来判断一下

下面我先写一个比较完善和大众的一个原生ajax请求：

 var xhr2 = new XMLHttpRequest();
        xhr2.open('GET', './01time.php');
        xhr2.send();
        xhr2.onreadystatechange = function () {
            if (this.readyState !== 4) return;
            console.log(this.responseText);
        };

这里为要用判断，而且为什么是判断 readyState!==4 ：

            if (this.readyState !== 4) return;

原因：
因为只有在状态值为4的时候一个ajax请求才算完成了，状态为4的时候整个响应报文才下载下来了，这样你才能拿到响应报文的数据。

在这里再啰嗦几句：
为什么不判断在状态值为3的时候拿响应报文的数据，因为状态值为3的时候响应体可能为空或者响应体不完整，在这里拿数据不保险（不可靠），所以人们都在状态4的时候拿数据。

下一章节：小屁鸿教你认识——什么是ajax遵循http协议，怎么样才算遵循