AJAX

最新推荐文章于 2022-06-19 13:50:53 发布

Yin_Xiaobo

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/wulala_hei/article/details/80458154

版权

AJAX的注册流程

<script>
    //1.初始化 请求代理对象
    var xhr = new XMLHttpRequest();
     // ==> 0

    // 调用open方法，建立一个与服务器特定端口的连接
    // 第一个参数：请求方式
    // 第二个参数：请求地址
    xhr.open('GET','time.php');
     // ==> 1

    xhr.send();

    // 绑定事件 获得响应状态
    xhr.addEventListener('readystatechange',function(){
        if(this.readyState !== 4) return;

    })

</script>

readystatechange 事件返回的0，1，2，3，4 状态代表什么。

[ 0 ]

在初始化请求代理对象后返回0
var xhr = new XMLHttpRequest();
[ 1 ]

调用open方法，建立一个与服务器特定端口的连接
xhr.open(); xhr.send();

[ 2,3,4 ]

2，3，4 都在 readystatechange事件后返回

xhr.addEventListener('readystatechange',function(){
    switch(this.readyState){
        case 2:
            break;
        case 3:
            break;
        case 4:
            break;
    }
})

【2】代表接收到了响应报文的响应头。还没有拿到响应体。

    xhr.addEventListener('readystatechange',function(){

        // 可以拿到响应头全文,但是还没有拿到响应体。
        this.getAllResponseHeader();

        // 可以拿到其中某一个键。
        this.getResponseHeader('server');

        // 通过回车键分割拿到每一行
        this.getAllReaponseHeader().split('\n');
    })

【3】代表正在下载响应报文的响应体。

响应体有可能为空，也可能不完整，在这里处理响应体不安全

【4】整个响应报文已经完整下载完成。

onload 事件

    var xhr = new XMLHttpRequest();

    xhr.open();

    xhr.send();

    // onload 是HTML5 中提供的 XMLHttpRequest V2.0 定义的
    xhr.addEventListener('load',function(){
        console.log(this.readyState);

        console.log(this.responseText);

    })