请解释 AJAX 的工作原理。如何使用原生 JavaScript 发送 AJAX 请求？-JavaScript中文网-JavaScript教程资源分享门户

请解释 AJAX 的工作原理。如何使用原生 JavaScript 发送 AJAX 请求？

推荐答案

AJAX (Asynchronous JavaScript and XML) 是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。其核心在于利用 XMLHttpRequest (或现代的 fetch API) 对象发送 HTTP 请求到服务器，并异步处理服务器返回的数据。

AJAX 的工作原理如下：

事件触发: 用户在页面上的操作（如点击按钮、提交表单等）触发 JavaScript 代码。
创建 XMLHttpRequest 对象或 fetch 请求: JavaScript 代码创建一个 XMLHttpRequest 对象或者使用 fetch API 来发起请求。
配置请求: 通过 open() 方法指定请求类型（GET、POST等）、URL 以及是否异步。
设置请求头 (可选): 通过 setRequestHeader() 方法设置请求头，例如 Content-Type 或 Authorization。
发送请求: 通过 send() 方法将请求发送到服务器。对于 POST 请求，可以将数据作为参数传递给 send() 方法。
服务器处理请求: 服务器接收到请求并进行相应的处理。
服务器响应: 服务器将处理结果作为响应返回。
异步接收响应: XMLHttpRequest 对象或 fetch API 会异步接收服务器的响应。
回调函数处理响应: 当服务器响应返回时，会触发 onreadystatechange 事件（对于 XMLHttpRequest）或使用 then() 处理 Promise (对于 fetch)。在回调函数中，可以检查请求的状态码和响应数据，然后更新页面上的相应部分。

使用原生 JavaScript 发送 AJAX 请求 (使用 XMLHttpRequest) 的示例代码如下：

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

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

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

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

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

-


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

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

本题详细解读

AJAX 的核心概念

异步 (Asynchronous): AJAX 最重要的特性在于它的异步特性。这意味着 JavaScript 代码发起请求后，不会阻塞后续代码的执行，而是等待服务器响应返回后再进行处理。这提升了用户体验，避免了页面假死的情况。
XMLHttpRequest 对象 (或 fetch API): XMLHttpRequest 是传统的 AJAX 实现方式，它提供了发送 HTTP 请求和处理服务器响应的能力。 fetch API 是一个更现代的替代方案，使用 Promise 来处理异步操作，代码更简洁。
局部更新 (Partial Updates): AJAX 的目标是只更新页面的局部内容，而不是重新加载整个页面。这可以显著提高性能和响应速度。
数据格式: AJAX 可以处理多种数据格式，例如 XML、JSON、HTML 等。目前最常用的是 JSON 格式，因为它易于解析和传输，特别适合 JavaScript 处理。

`XMLHttpRequest` 的工作流程

创建 XMLHttpRequest 对象:
```
const xhr = new XMLHttpRequest();
```

配置请求 (open):
open() 方法用于配置请求的类型（GET, POST, PUT, DELETE 等）、URL 和是否异步。

xhr.open('GET', '/api/data', true); // GET 请求，异步
xhr.open('POST', '/api/submit', true); // POST 请求，异步

设置请求头 (setRequestHeader): setRequestHeader() 方法用于设置请求头，通常用于指定请求的数据类型、身份验证信息等。
```
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer token');
```
发送请求 (send):
send() 方法用于发送请求。对于 GET 请求，不需要传递参数，可以直接调用 send()。对于 POST 请求，通常需要将数据作为参数传递给 send()，并需要设置正确的 Content-Type 请求头。
```
xhr.send(); // GET 请求
xhr.send(JSON.stringify({ key: 'value' })); // POST 请求
```
监听 onreadystatechange 事件: onreadystatechange 事件会在请求状态发生变化时触发。通过检查 xhr.readyState 属性值可以判断请求的状态： * 0: 请求未初始化。 * 1: 服务器连接已建立。 * 2: 请求已接收。 * 3: 请求处理中。 * 4: 请求已完成，且响应已就绪。通过 xhr.status 可以获取服务器返回的状态码，例如 200 表示成功，404 表示未找到。
```
-- -------------------- ---- -------
---------------------- - ---------- -
  -- --------------- --- -- -
      -- ----------- --- ---- -
          ----- ------------ - -----------------------------
          ------------------------ --------------
      - ---- -
          ---------------------- --------- ------------
      -
  -
--
```
处理错误事件: onerror 事件会在请求发生网络错误时触发。

   xhr.onerror = function(){
     console.error('Network Error');
   }

`fetch` API 的使用 (现代 AJAX 实现)

fetch API 提供了一种更简洁的，基于 Promise 的方式来处理 AJAX 请求。

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

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

fetch API 的优点：

使用 Promise 处理异步请求，使得代码更易读和维护。
提供了更强大的特性，例如 AbortController 用于取消请求，更好的错误处理机制。
代码更简洁，易于使用

注意事项

跨域请求 (CORS): 当请求的 URL 与当前页面的 URL 的域名、协议或端口不同时，会发生跨域请求。浏览器会出于安全原因阻止这种请求。服务器需要设置正确的 CORS 头信息才能允许跨域请求。
安全性: 需要防止 CSRF 攻击，确保服务器端对请求进行验证。
错误处理: 需要良好的错误处理机制，以应对网络错误、服务器错误等情况。
数据类型: 根据服务器的响应数据，需要选择正确的解析方式（例如，JSON.parse() 或 response.json()）。

纠错
反馈