如何获取 AJAX 响应文本?

阅读时长 4 分钟读完

在前端开发中,经常使用 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 回调函数中检查 readyStatestatus 属性来确定错误类型。例如,如果 readyState 为 4 而 status 不是 200,则说明出现了错误。

-- -------------------- ---- -------
---------------------- - ---------- -
  -- --------------- --- -- -
    -- ----------- --- ---- -
      ----- ------------ - -----------------
      --------------------------
    - ---- -
      --------------------- - ------------
    -
  -
--

上述代码中,在 readystatechange 回调函数中,我们先检查 readyState 是否为 4,然后再判断响应状态码是否为 200。如果不是,就输出一个错误信息。

结语

通过本文的介绍,我们了解了如何使用 XMLHttpRequest 对象来获取 AJAX 响应文本,并处理了一些错误情况。当然,这只是 AJAX 技术的冰山一角,在实际开发中还需要结合其他技术和框架来完成更复杂的任务。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/26030

纠错
反馈