AJAX是什么以及如何在javascript中使用它【教程】-js教程-PHP中文网

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

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

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。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

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

真正容易被忽略的是：fetch 默认没有超时机制，也没有请求取消能力；需要封装或借助 AbortController 才能实现——这在用户快速切换页面或重复提交时尤为关键。