AJAX是什么以及如何在javascript中使用它【教程】

幻影之瞳 2026-01-22 00:00:00 次阅读

AJAX是JavaScript通过XMLHttpRequest或fetch()发起异步HTTP请求的实践方式，核心是不刷新页面交换数据；fetch()更简洁且原生支持Promise，但需手动处理HTTP错误、响应解析、超时与取消。

AJAX 不是某种新语言或框架，它只是 JavaScript 用 XMLHttpRequest 或 fetch() 发起异步 HTTP 请求的一套实践方式——核心在于“不刷新页面就能和服务器交换数据”。

为什么 `XMLHttpRequest` 现在很少直接写了

它 API 冗长、回调嵌套深、错误处理分散。比如要发一个 GET 请求，得手动设置 open()、send()、监听 onload 和 onerror，还要自己解析响应体、判断状态码。

XMLHttpRequest 默认不支持 Promise，得手动包装
超时控制、取消请求需额外维护 abort() 逻辑
现代浏览器中，fetch() 已成事实标准，更简洁且原生返回 Promise

`fetch()` 的基本用法和必须处理的坑

fetch() 看似简单，但默认行为和直觉有偏差：它只在网络失败（如断网、DNS 错误）时 reject，而 404、500 这类 HTTP 错误仍会 resolve —— 必须手动检查 response.ok 或 response.status。

GET 请求：fetch('/api/user?id=123')，注意 URL 拼接需自行编码，建议用 URLSearchParams
POST 提交 JSON：fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user: 'a', pass: 'b' }) })
务必链式调用 .then(res => { if (!res.ok) throw new Error(res.status) })，否则 401 也会进后续 .then
响应体需显式解析：res.json()、res.text() 或 res.blob()，它们也返回 Promise

用 `async/await` 写可读性更强的 AJAX 逻辑

避免 .then 嵌套，把异步流程写得像同步代码，但要注意错误必须用 try/catch 捕获两层：网络异常 + HTTP 错误。

async function loadUser(id) {
  try {
    const res = await fetch(`/api/user/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('加载用户失败:', err.message);
    throw err;
  }
}

不能只 catch 外层，因为 res.json() 可能因非法 JSON 抛错
若需上传文件，body 直
接传 FormData 实例，无需设 Content-Type（浏览器自动设置带 boundary）
跨域请求时，如需带 cookie，必须加 credentials: 'include'，且服务端要响应 Access-Control-Allow-Credentials: true