AJAX 是浏览器原生支持的异步通信模式，核心是 XMLHttpRequest 或 fetch()；XMLHttpRequest 仍必要，因支持上传进度监听、更可靠的 withCredentials、原生超时控制；fetch() 更简洁但需手动处理错误状态、cookie 和兼容性。
AJAX 不是某种新语言或框架，而是指一种**浏览器原生支持的异步通信模式**：JavaScript 在不刷新页面的前提下，向服务器发起请求并处理响应。核心在于 XMLHttpRequest 或更现代的 fetch()，而非“必须用 XML”或“必须配合 jQuery”。
为什么 XMLHttpRequest 还值得学？
虽然 fetch() 更简洁，但 XMLHttpRequest 仍不可替代——尤其需要监听上传进度、手动控制请求头（如带 cookie 的跨域请求）、或兼容 IE10+ 场景。它暴露了更多底层控制点：
-
XMLHttpRequest支持upload.onprogress，fetch()目前无法原生监听上传进度 - 设置
withCredentials: true时，XMLHttpRequest行为更可预测；fetch()需显式传{ credentials: 'include' }，且部分旧版 Safari 对其支持不稳定 - 超时控制：原生
XMLHttpRequest.timeout属性直接可用；fetch()需配合AbortController，稍繁琐
fetch() 的实际写法和常见陷阱
fetch() 默认不带 cookie，401 错误常因此而起；它也不会自动把 4xx/5xx 响应转为 rejected Promise，这点极易被忽略：
fetch('/api/user', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Alice' }),
credentials: 'include' // 必须加这行，否则 session 不会发送
})
.then(res => {
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`); // 手动检查状态码
}
return res.json();
})
.catch(err => {
console.error('Request failed:', err.message); // 401、网络断开、CORS 都会进这里
});
- 不要只依赖
.then()捕获错误：网络失败、CORS 拒绝、DNS 失败都会触发catch，但 400 响应本身不会 -
res.json()本身可能 reject（比如返回非 JSON 内容），需额外catch - GET 请求参数别拼在 URL 里手动编码，用
URLSearchParams更安全：fetch(`/api/list?${new URLSearchParams({ page: '1', size: '10' })}`)
如何判断该用 fetch() 还是 XMLHttpRequest？
看三个硬指标：
立即学习“Java免费学习笔记（深入）”；
- 是否要显示文件上传进度？→ 选
XMLHttpRequest - 是否要支持 IE11？→ 选
XMLHttpRequest（fetch()需 polyfill 且不完全可靠） - 是否只需简单 GET/POST 且目标环境明确支持现代浏览器？→ 优先
fetch()，代码更扁平
没有“通用最优解”。例如一个后台管理系统的文件导入页，必须显示上传百分比，那就绕不开 XMLHttpRequest.upload.onprogress；而一个纯展示型博客的点赞按钮，fetch() 一行发请求、两行处理结果就足够。
真正容易被忽略的不是语法，而是对“异步”的敬畏：无论用哪个 API，都要预设请求失败、响应超时、格式异常、用户中途关闭页面这些情况。写完 fetch() 别急着测成功路径，先断网、改响应头、删 cookie、模拟慢速 3G，看看 UI 是否卡死或报错泛滥。
