AJAX是一种不刷新页面即可与服务器交换数据并更新部分网页内容的开发模式，核心是异步通信；请求由JavaScript发起、后台进行、响应多为JSON、DOM局部更新；现代推荐用fetch API，旧环境可用XMLHttpRequest。

AJAX（Asynchronous JavaScript and XML）不是某个具体技术，而是一种在不刷新页面的前提下，与服务器交换数据并更新部分网页内容的开发模式。核心在于“异步”——请求发出后，页面不用卡住等待响应，用户仍可继续操作。

AJAX 的关键特点

• 请求由 JavaScript 发起，不依赖表单提交或页面跳转
• 通信过程后台进行，用户无感知阻塞
• 响应数据通常为 JSON（现代更常用），而非必须是 XML
• 更新 DOM 只需局部重绘，体验更流畅

用原生 fetch 实现异步加载（推荐方式）

fetch 是现代浏览器内置的 Promise 风格 API，语法简洁、可读性高：

Gradle 9.8.0

下载

<!-- HTML 示例：点击按钮加载用户列表 -->
<button id="loadBtn">加载用户</button>
<div id="userList"></div>

// JavaScript 示例：获取并渲染用户数据
document.getElementById('loadBtn').addEventListener('click', async () => {
  try {
    const res = await fetch('/api/users');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const users = await res.json();
    const html = users.map(u => `

${u.name} (${u.email})

`).join('');
    document.getElementById('userList').innerHTML = `

${html}

`;
  } catch (err) {
    console.error('加载失败：', err);
    document.getElementById('userList').textContent = '加载出错，请重试';
  }
});

用 XMLHttpRequest（XHR）手动控制请求（兼容旧环境）

虽然较底层，但适合需要精细控制超时、进度、取消等场景：

// 简化版 XHR 示例
function loadUsers() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/users', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status         const users = JSON.parse(xhr.responseText);
        renderUserList(users);
      } else {
        console.error('请求失败：', xhr.status);
      }
    }
  };
  xhr.send();
}

常见注意事项

• 后端接口需支持 CORS（跨域资源共享），否则浏览器会拦截响应
• 建议始终处理网络错误和 HTTP 错误状态（如 404、500）
• 避免直接 innerHTML 插入不可信数据，防止 XSS；优先用 textContent 或 DOM 方法构建元素
• 多次快速点击触发重复请求？可加 loading 状态或 abortController 控制取消