【Ajax（技术方案）】通过浏览器的代码调试了解readyState的0~4步的状态

---

通过浏览器的代码调试了解readyState的0~4步的状态

readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪

我们创建一个简单的Ajax请求代码如下

然后我们通过监听的onreadystatechange事件打断点看看readyState0~4分别是什么状态如下图

image.png

然后我们发送请求分别看看个状态下的情况

0: 请求未初始化

  红框内表示XMLHttpRequest的状态
  xhr:undefined

image.png

执行下一步

image.png

1: 服务器连接已建立

xhr.readyState = 1 
xhr.status = '0' 

image.png

2: 请求已接收

xhr.readyState = 2 
xhr.status = '200' 

image.png

3: 请求处理中

xhr.readyState = 3 
xhr.status = '200' 
能看到获取的数据了

image.png

4: 请求已完成，且响应已就绪

xhr.readyState = 4 
xhr.status = '200' 
此时前端能获取到数据展示在页面了

image.png