在前端开发中，经常使用 AJAX 技术来异步地从后端服务器获取数据。当服务器响应请求时，我们需要获取其中的响应内容以进行处理或展示。本文将介绍如何使用 JavaScript 来获取 AJAX 响应文本。
XMLHttpRequest 对象
在 AJAX 中，XMLHttpRequest 对象是用于与后端服务器进行交互的核心对象。通过它，我们可以发送 HTTP 请求并获取响应内容。以下是一个基本的 AJAX 请求示例：
----- --- - --- ----------------- --------------- ------------- -----------
上述代码向 /api/data 发送了一个 GET 请求，并且不需要传递任何参数。但是，在获得响应之前，我们需要注册一个事件监听器以便在请求完成后对其进行处理。
事件监听器
XMLHttpRequest 对象提供了多个事件来表示请求的不同阶段，我们可以使用这些事件来监听请求的进度和状态。其中，最重要的是 readystatechange 事件，该事件在每次 readyState 改变时被触发。readyState 是一个表示请求状态的数字，它有五种取值：
- 0：未初始化。尚未调用 open() 方法。
- 1：已打开。已经调用 open() 方法，但尚未调用 send() 方法。
- 2：已发送。已经调用 send() 方法，但尚未接收到响应。
- 3：正在接收。已经接收到部分响应数据。
- 4：已完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
因此，我们可以在 readystatechange 事件的回调函数中检查 readyState 的值来确定请求的当前状态，并获取响应内容：
----- --- - --- -----------------
--------------- -------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
----- ------------ - -----------------
--------------------------
-
--
-----------上述代码向 /api/data 发送了一个 GET 请求，并注册了一个 readystatechange 事件监听器。当 readyState 变为 4（即请求完成）时，同时响应状态码为 200（即请求成功），则获取响应文本并输出到控制台上。
错误处理
除了成功响应之外，服务器还可能返回错误信息或其他非 200 状态码的响应。因此，在处理 AJAX 响应时，我们也需要考虑如何处理这些错误情况。
如果请求失败，我们可以在 readystatechange 回调函数中检查 readyState 和 status 属性来确定错误类型。例如，如果 readyState 为 4 而 status 不是 200，则说明出现了错误。
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
----- ------------ - -----------------
--------------------------
- ---- -
--------------------- - ------------
-
-
--上述代码中，在 readystatechange 回调函数中，我们先检查 readyState 是否为 4，然后再判断响应状态码是否为 200。如果不是，就输出一个错误信息。
结语
通过本文的介绍，我们了解了如何使用 XMLHttpRequest 对象来获取 AJAX 响应文本，并处理了一些错误情况。当然，这只是 AJAX 技术的冰山一角，在实际开发中还需要结合其他技术和框架来完成更复杂的任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26030