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); //0xhr1.open('GET', './01time.php');console.log(xhr1.readyState); //1xhr1.send();console.log(xhr1.readyState); //1xhr1.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协议，怎么样才算遵循

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

简单解析Ajax中onreadystatechange事件的readyState属性和status属性
简单解析Ajax中的onreadystatechange 事件 onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务.每当 readyState 改变时, ...
AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例
AJAX(二)ResponseText.onreadystatechange 事件.readyState.status.ASP和PHP.数据库实例.XML实例文章目录 AJAX(二)Response ...
IE中同一个url第二次AJAX调用无法触发onreadystatechange事件
如果第二次通过XMLHttpRequest去请求一个URL,则不会触发onreadystatechange时间,虽然从调试插件来看,ie是进行了这次请求. 后来发现,这个是因为在ie下,如果请求的UR ...
AJAX —— onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务.每当 readyState 改变时,就会触发 onreadystatechange 事件. readyState 属性存有 XMLHttpReq ...
对ajax中onreadystatechange事件执行流程的理解
对Ajax中onreadystatechange事件执行流程的理解 onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务. 每当 readyState 改 ...
ajax打开后回调事件,[AJAX系列]onreadystatechange事件
onreadystatechange事件: 当请求被发送到服务器时,我们需要执行一些基于响应的任务每当readyState改变时,就会触发onreadystatechange事件 readyStat ...
[JavaScript][AJAX]onreadystatechange事件；AJAX含义及组成部分；AJAX工作原理/HTTP工作原理；一个页面从输入url到呈现网页过程；FormData对象；防抖
目录 onreadystatechange事件 AJAX含义及组成部分 AJAX工作原理/HTTP工作原理一个页面从输入url到呈现网页过程 TCP三次握手图示渲染引擎渲染网页流程图编辑 Fo ...
AJAX - onreadystatechange 事件
AJAX - onreadystatechange 事件 1.当请求被发送到服务器时,我们需要执行一些基于响应的任务. 2.每当 readyState 改变时,就会触发 onreadystatecha ...
Ajax onreadystatechange事件
onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务. 每当 readyState 改变时,就会触发 onreadystatechange 事件. rea ...

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

认识ajax的readyState状态值和onreadystatechange事件