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

推荐答案

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) 的示例代码如下：

// www.javascriptcn.com code example
function ajaxRequest(url, method, data, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url, true); // true 表示异步
  xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头

  xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) { // 请求完成
          if (xhr.status === 200) { // 请求成功
              try {
                const responseData = JSON.parse(xhr.responseText);
                callback(null, responseData);
              } catch (error) {
                callback(error);
              }

          } else {
             callback(`Request failed with status: ${xhr.status}`);
          }
      }
  };

  xhr.onerror = function(){
    callback('Network Error')
  }

  if(method.toUpperCase() === 'POST') {
    xhr.send(JSON.stringify(data));
  } else {
    xhr.send();
  }

}


// 发送 GET 请求示例
ajaxRequest('https://api.example.com/data', 'GET', null, (error,data) => {
    if (error) {
      console.error('GET Request Error:', error);
    } else {
      console.log('GET Response:', data);
    }
});

// 发送 POST 请求示例
const postData = { key: 'value' };
ajaxRequest('https://api.example.com/submit', 'POST', postData, (error, data) => {
    if (error) {
       console.error('POST Request Error:', error);
    } else {
      console.log('POST Response:', data);
    }
});

本题详细解读

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 表示未找到。
```
// www.javascriptcn.com code example
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
      if (xhr.status === 200) {
          const responseData = JSON.parse(xhr.responseText);
          console.log('Response:', responseData);
      } else {
          console.error('Request failed:', xhr.status);
      }
  }
};
```
处理错误事件: onerror 事件会在请求发生网络错误时触发。

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

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

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

// www.javascriptcn.com code example
fetch('https://api.example.com/data')
  .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json(); // 将响应解析为 JSON
  })
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Fetch error:', error));

// POST 请求示例
fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
  })
  .then(response => response.json())
  .then(data => console.log('POST Response:', data))
  .catch(error => console.error('Fetch error:', error));

fetch API 的优点：

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

注意事项

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

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