XMLHttpRequest（XHR）是一种在Web应用程序中使用的标准API，它可以在不重新加载页面的情况下向服务器发送HTTP请求和接收响应。在前端开发中，我们经常需要使用XHR来发送数据并获取服务器的响应结果。
发送GET请求
使用XMLHttpRequest发送GET请求非常简单，只需创建一个XHR对象并调用open()和send()方法即可。以下示例演示如何向服务器发送一个GET请求：
// 创建XHR对象
const xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', '/api/data?id=123', true);
// 发送请求
xhr.send();以上代码通过调用XHR对象的open()和send()方法向服务器发送了一个GET请求，并指定请求参数id的值为123。这个请求是异步的，因为第三个参数传入了true。
为了获取服务器的响应结果，我们可以监听XHR对象的readystatechange事件，并在状态码为4（即请求完成）时处理响应数据：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = xhr.responseText;
console.log(data);
}
};以上代码监听了XHR对象的readystatechange事件，并在状态码为4且请求成功时获取响应数据并打印到控制台上。
发送POST请求
与发送GET请求类似，发送POST请求也需要创建XHR对象并调用open()和send()方法。不同之处在于，需要在调用send()方法前设置请求头和请求体。
以下示例演示如何向服务器发送一个POST请求：
-- -------------------- ---- ------- -- ------- ----- --- - --- ----------------- -- ---- ---------------- ------------ ------ ------------------------------------ -------------------- -- ---- ----- ---- - - --- ---- ----- ------ -- -------------------------------
以上代码通过调用XHR对象的setRequestHeader()方法设置了请求头，并通过调用send()方法并传入JSON序列化后的请求体向服务器发送了一个POST请求。
为了获取服务器的响应结果，我们可以监听XHR对象的readystatechange事件，并在状态码为4（即请求完成）时处理响应数据，方法同发送GET请求。
总结
XMLHttpRequest是一种强大且灵活的API，它可以帮助我们轻松地向服务器发送HTTP请求并获取响应结果。在使用XHR时，我们需要注意异步请求的处理方式以及请求头和请求体的设置。
希望这篇文章能够帮助到你学习和使用XMLHttpRequest。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8463
