1、创建XMLHttpRequest对象:
var xhr = new XMLHttpRequest();
2.创建一个处理响应的回调函数:
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功,处理响应数据
var responseData = JSON.parse(xhr.responseText);
// 进行后续操作
} else {
// 请求失败或正在处理中
}
};
xhr.readyState和xhr.status是用于判断HTTP请求状态和响应状态的属性
xhr.readyState
表示 XMLHttpRequest 对象的状态,它有以下几个可能的值:
0
:未初始化。XMLHttpRequest
对象已创建或已被abort()
方法重置。1
:打开。已调用open()
方法,但尚未调用send()
方法。2
:发送。已调用send()
方法,但尚未接收到响应。3
:接收。正在接收响应数据,部分数据已经可用。4
:完成。响应数据已完全接收。
xhr.status
表示响应的 HTTP 状态码,例如200
表示成功,404
表示未找到,500
表示服务器错误等。
因此,xhr.readyState === 4 && xhr.status === 200
的条件判断表示当请求的状态为完成(readyState
为 4
)且响应的状态码为 200
时,执行特定的操作。通常这意味着请求成功并且服务器返回了正常的响应。
JSON.parse()方法将xhr.responseText()中的JSON字符串解释为JavaScript对象或者数组,并将其赋值给变量responseData,经过转换后,我们就可以直接访问responseData变量中的属性和值了。
3.构建请求URL和数据:
var url = "your_api_url";
var data = { a: "value", b: ["a", "b"], c: { d: ["a", "b"] } };
var requestData = JSON.stringify(data); // 将数据对象转换为 JSON 字符串
4.设置请求方法和URL,并发送请求:
xhr.open("POST", url, true); // true 表示异步请求
xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求头
xhr.send(requestData); // 发送请求