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