XMLHttpRequest对象的使用及调试

最新推荐文章于 2024-02-25 09:30:00 发布

_Lilly

最新推荐文章于 2024-02-25 09:30:00 发布

阅读量583

点赞数

分类专栏： Javascript 文章标签： XMLHttpRequest XHR XHR using

本文链接：https://blog.csdn.net/qq_37331119/article/details/79116670

版权

Javascript 专栏收录该内容

34 篇文章

订阅专栏

XMLHttpRequest的作用

简而言之，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，是AJAX的核心。

XHR的使用

只需三步就能上手

//创建XHR对象，调用XMLHttpRequest构造函数
var xhr = new XMLHttpRequest();
//启动请求以备发送数据
xhr.open("get","URL",true);
//发送
xhr.send(null);

参数解释

open("get/post","url",true/false); 
//三个参数分别为要发送请求的类型，请求的URL，是否异步发送请求的布尔值；

send(null); //接受一个参数，就是要发送的数据，若不需要发送数据也必须传入一个null

XHR对象属性

收到响应后响应的数据会自动填充XHR对象的属性

属性	简介
responseText	作为响应主体被返回的文本
responseXML	包含响应数据的XML文档
status	响应的HTTP状态
statusText	HTTP状态的说明

对于readyState:请求或响应过程的当前活动阶段

值	简介
0	未初始化。未调用open方法
1	启动。调用了open方法
2	发送。已经调用send()方法，但是还没有接收到响应
3	已经接受到部分数据
4	完成

判断请求是否成功

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log("xhr.responseText");
        }else{
            console.log("Error:"+xhr.status);
        }
    }
}