XMLHttpRequest对象的使用及调试

最新推荐文章于 2023-07-04 18:47:25 发布

原创最新推荐文章于 2023-07-04 18:47:25 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#XMLHttpRequest #XHR #XHR using

Javascript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了XMLHttpRequest的基本作用及其在AJAX中的核心地位，并详细讲解了如何使用XMLHttpRequest进行数据请求及响应处理的过程。通过简单的三步操作，即可实现与服务器之间的数据交互。

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);
        }
    }
}