1. 程式人生 > >ajax請求流程以及readyState請求狀態含義

ajax請求流程以及readyState請求狀態含義

<script>

    var xhr = new XMLHttpRequest()
    console.log(xhr.readyState)
    // => 0
    // 初始化 請求代理物件

    xhr.open('GET', 'time.php')
    console.log(xhr.readyState)
    // => 1
    // open 方法已經呼叫,建立一個與服務端特定埠的連線

    xhr.send()

    xhr.addEventListener('readystatechange', function () {
        switch (this.readyState) {
            case 2:
                // => 2
                // 已經接受到了響應報文的響應頭

                // 可以拿到頭
                // console.log(this.getAllResponseHeaders())
                console.log(this.getResponseHeader('server'))
                // 但是還沒有拿到體
                console.log(this.responseText)
                break

            case 3:
                // => 3
                // 正在下載響應報文的響應體,有可能響應體為空,也有可能不完整
                // 在這裡處理響應體不可靠
                console.log(this.responseText)
                break

            case 4:
                // => 4
                // 一切 OK (整個響應報文已經完整下載下來了)
                console.log(this.responseText)
                break
        }
    })

</script>

在這裡插入圖片描述