---

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

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

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

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

<script>
    var btn = document.querySelector('.query-area button')
    var input = document.querySelector('.query-area input')
    var detailCt = document.querySelector('.detail-area ul')

    btn.addEventListener('click', function(){
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && (xhr.status == '200' || xhr.status == '304')){
                var friends = JSON.parse(xhr.responseText)
                var html = render(friends)
                detailCt.innerHTML = html
            }
        }
        xhr.open('get', '/friends?username=' + input.value, true)
        xhr.send()
    })
</script> 

然后我们通过监听的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