ajax方法XHR.readyState五种状态与示例

 XHR.readyState == 状态（0，1，2，3，4），而且状态也是不可逆的：

0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。

 下面是一个demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #url{
            width: 1000px;
            height: 30px;
            outline: none;
            border: 1px solid #000;
            border-radius: 5px;
            margin-left: 10px;
        }
        #btn{
            width: 90px;
            height: 30px;
            outline: none;
            border: 1px solid #000;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        <label for="url">
            URL:<input type="text" placeholder="请输入要检测的URL" id="url">
        </label>
    </div>
    <br>
     <button class="btn" id="btn">点击测试</button>
    <div id="content">
        
    </div>
</body>
<script>
    var str = ''
    document.getElementById('btn').onclick = function(){
        var xhr = new XMLHttpRequest();
        var url = document.getElementById('url').value;
        if (!url) {
            alert('请输入URL');
            return false;
        }
        // console.log(url)
        console.log(xhr.status, xhr.readyState) // 0,0
        xhr.onreadystatechange=function(){
            // console.log(xhr)
            if(xhr.status === 200){
                console.log(xhr.status, xhr.readyState)//200,2;200,3;200,4
                str += `status:${xhr.status}`
                if(xhr.readyState === 4){
                    // console.log(xhr.getAllResponseHeaders())
                    str += xhr.getAllResponseHeaders() + '<br/>'
                }
            }
            document.getElementById('content').innerHTML = str;
        }
        xhr.open("GET",url,true);
        console.log(xhr.status, xhr.readyState)// 0,1
        xhr.send(null)
    }
</script>
</html>

　　

如果觉得文章不错,可以给小编发个红包给予鼓励.

posted @ 2019-03-14 14:38  地铁程序员  阅读(9898)  评论(0)  编辑  收藏  举报