XMLHttpRequest学习1-优快云博客

本文链接：https://blog.youkuaiyun.com/Matilda________/article/details/124599731

本文详细解析XMLHttpRequest的工作原理，涵盖创建对象、open()、send()方法的使用，以及异步请求控制、状态检查和跨域问题。通过实例演示如何监听readyState变化及错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网络请求这里总是似懂非懂，系统学习一下~

XMLHttpRequest对象，用于与服务器交换数据。声明XMLHttpRequest对象：

let xhr = new XMLHttpRequest()

使用XHR：

1.首先调用open()函数，该函数接受三个参数：a.请求类型 b.请求URL （只能访问同源url）c.是否异步。且open()函数只是为实际请求做准备。

2.调用send()函数，该函数接受一个参数，是作为请求体发送的数据。且该参数必填，若不需要发送请求体，则为null。

3.异步请求

XHR对象的readyState对象，表示当前处于请求或响应的哪个阶段。

0 未调用open()函数
1 以调用open()，未调用send()
2 以调用send(),未得到响应
3 部分响应
4 收到所有响应

且readyState每次改变时，都会调用onreadystatechange事件。考虑浏览器兼容性，onreadystatechange函数在open()之前赋值。上代码：

let xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200) {
            alert(xhr.responseText)
        } else {
            console.log("error",xhr.status)
        }
    }
}
xhr.open('get','XXXX',false)
xhr.send(null)

4.在收到请求前若想取消异步，可以调用abort()函数。