JavaScript 中如何发送 AJAX 请求?

推荐答案

在 JavaScript 中,可以使用 XMLHttpRequest 对象或 fetch API 来发送 AJAX 请求。以下是两种方法的示例:

使用 XMLHttpRequest

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

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

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

-----------

使用 fetch API

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

本题详细解读

XMLHttpRequest 方法

  1. 创建对象: 使用 new XMLHttpRequest() 创建一个新的 XMLHttpRequest 对象。
  2. 初始化请求: 使用 open() 方法初始化请求。参数包括请求方法(如 GETPOST)、请求的 URL 和一个布尔值表示请求是否异步。
  3. 处理响应: 使用 onload 事件处理程序来处理请求成功时的响应。onerror 事件处理程序用于处理请求失败的情况。
  4. 发送请求: 使用 send() 方法发送请求。对于 POST 请求,可以在 send() 方法中传递请求体。

fetch API 方法

  1. 发起请求: 使用 fetch() 函数发起请求。fetch() 返回一个 Promise,该 Promise 在请求完成后解析为 Response 对象。
  2. 处理响应: 使用 .then() 方法处理响应。首先检查 response.ok 属性以确保请求成功,然后使用 response.json() 方法将响应解析为 JSON 格式。
  3. 错误处理: 使用 .catch() 方法捕获和处理请求过程中可能出现的错误。

选择哪种方法?

  • XMLHttpRequest: 兼容性更好,支持更老的浏览器,但代码相对冗长。
  • fetch API: 更现代、简洁,支持 Promise,但不支持所有老版本浏览器。

根据项目需求和目标浏览器的兼容性要求,选择合适的方法。

纠错
反馈