在前端开发中，经常需要使用 AJAX 技术来进行异步数据交互。而实现 AJAX 的核心技术是 XMLHttpRequest 对象。在本文中，我们将讨论如何正确地使用 XMLHttpRequest 来进行数据请求，并处理响应结果。
XMLHttpRequest 简介
XMLHttpRequest 对象是由微软首先引入的，用于向服务器发送 HTTP 请求并接收响应的 JavaScript API。它最初是为了实现 Ajax 而设计的，但现在已经成为了所有 Web 应用程序中不可或缺的一部分。
在早期浏览器版本中，XMLHttpRequest 只支持同步请求。这意味着，当一个请求被发出时，浏览器会等待服务器返回响应后才能继续执行代码。这在某些情况下会导致网页卡死或加载缓慢，因此现代浏览器通常都支持异步请求。
发送异步请求
在发送异步请求时，我们需要创建一个新的 XMLHttpRequest 对象：
const xhr = new XMLHttpRequest();
然后，我们可以使用 open 方法来指定请求的类型、URL 和是否异步：
xhr.open('GET', '/api/data', true);这里我们使用 GET 方法请求 /api/data URL 的数据，并设置异步为 true。
接下来，我们可以给 xhr 对象添加一个 onload 回调函数，以便在接收到响应后执行一些操作：
xhr.onload = function() {
// 处理响应结果
};最后，我们使用 send 方法发送请求：
xhr.send();
这将触发异步请求，并在接收到响应后执行 onload 回调函数。
处理响应结果
在 onload 回调函数中，我们可以使用 xhr.responseText 属性来获取服务器返回的数据。如果服务器返回的是 JSON 数据，则可以使用 JSON.parse 方法将字符串转换为 JavaScript 对象：
xhr.onload = function() {
const data = JSON.parse(xhr.responseText);
// 处理数据...
};此外，我们还可以根据服务器返回的状态码来判断请求是否成功。通常情况下，HTTP 状态码以 2 开头表示请求成功，否则表示请求失败。我们可以使用 status 属性来获取状态码：
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
// 处理数据...
} else {
console.error('请求失败');
}
};错误处理
当请求出现错误时，我们也需要进行相应的处理。XMLHttpRequest 提供了一些事件来处理请求过程中的错误：
onerror：在请求过程中发生错误时触发；ontimeout：在请求超时时触发；onabort：在请求被取消时触发；
这里我们以 onerror 事件为例，来演示错误处理的方法。当请求失败时，onerror 事件将被触发，并传递一个 Event 对象作为参数。我们可以使用 event.target.status 属性来获取状态码：
xhr.onerror = function(event) {
console.error('请求失败，状态码为：', event.target.status);
};示例代码
下面是一个完整的异步请求示例，包括发送请求、处理响应和错误处理：
-- -------------------- ---- -------
----- --- - --- -----------------
--------------- ------------ ------
---------- - ---------- -
-- ----------- --- ---- -
----- ---- - -----------------------------
-- -------
- ---- -
----------------------
-
--
----------- - --------------- -
--------------------------- ---------------------
--
-----------总结
在本文中，我们介绍了如何正确地
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10307
