面试题：什么是 AJAX？如何实现一个 AJAX 请求？

什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）不是一种单一的技术，而是一种编程范式或技术组合。它指的是使用一组 Web 技术（主要是 JavaScript 和 XMLHttpRequest 对象）在不重新加载整个页面的情况下，与服务器进行异步通信，并局部更新网页内容。

• 核心思想：异步请求。浏览器可以在后台发送 HTTP 请求到服务器，获取数据（通常是 JSON、XML 或 HTML 片段），然后用 JavaScript 动态更新页面的某一部分，而无需刷新整个页面。
• 主要优势：
• 提升用户体验：页面交互更流畅，避免了整页刷新带来的闪烁和延迟。
• 减少带宽消耗：只传输必要的数据，而不是整个页面。
• 实现动态内容：如搜索建议、无限滚动、表单验证、实时聊天等。

注意：虽然名字中有 “XML”，但现代 AJAX 应用中传输的数据格式更多是 JSON，因为它更轻量、易解析。

---

如何实现一个 AJAX 请求？

虽然现在有 fetch API 和 axios 等更现代的库，但理解基于原生 XMLHttpRequest 的实现有助于掌握底层原理。

使用原生 XMLHttpRequest 实现

// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 2. 配置请求：指定方法、URL 和是否异步
xhr.open('GET', '/api/data', true); // true 表示异步

// 3. （可选）设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 4. 设置响应处理函数
xhr.onreadystatechange = function() {
  // 当 readyState 变为 4 (DONE) 时，表示请求完成
  if (xhr.readyState === 4) {
    // 检查 HTTP 状态码
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功
      const data = JSON.parse(xhr.responseText); // 解析 JSON 响应
      console.log('Success:', data);
      // 在这里可以更新 DOM
    } else {
      // 请求失败
      console.error('Error:', xhr.status, xhr.statusText);
    }
  }
};

// 5. 发送请求（POST/PUT 请求可在 send() 中传入数据）
xhr.send();

// 对于 POST 请求的例子：
/*
const postData = { name: 'John', age: 30 };
xhr.open('POST', '/api/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      const response = JSON.parse(xhr.responseText);
      console.log('User created:', response);
    } else {
      console.error('Failed to create user');
    }
  }
};
xhr.send(JSON.stringify(postData)); // 发送 JSON 字符串
*/

使用现代 fetch API 实现

fetch 是基于 Promise 的现代替代方案，代码更简洁。

// GET 请求
fetch('/api/data')
  .then(response => {
    // fetch 只在网络错误时 reject，需手动检查 HTTP 状态
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 返回一个 Promise
  })
  .then(data => {
    console.log('Success:', data);
    // 更新 DOM
  })
  .catch(error => {
    console.error('Error:', error);
  });

// 或使用 async/await (更推荐)
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Success:', data);
    // 更新 DOM
  } catch (error) {
    console.error('Error:', error);
  }
}
fetchData();

使用 axios 库实现

axios 是一个流行的第三方库，API 更友好。

// GET 请求
axios.get('/api/data')
  .then(response => {
    console.log('Success:', response.data);
    // 更新 DOM
  })
  .catch(error => {
    console.error('Error:', error);
  });

// 或使用 async/await
async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    console.log('Success:', response.data);
    // 更新 DOM
  } catch (error) {
    console.error('Error:', error);
  }
}

---

总结

• AJAX 是一种实现异步局部更新的技术理念。
• 实现方式：
• 底层：使用 XMLHttpRequest 对象。
• 现代：使用 fetch API。
• 便捷：使用 axios 等第三方库。
• 关键步骤：创建请求 -> 配置 (URL, 方法, 头部) -> 发送 -> 处理响应（成功/失败）-> 更新 UI。

在实际项目中，推荐使用 fetch (原生) 或 axios (功能丰富) 来发起 AJAX 请求。