XMLHttpRequest 是浏览器原生 HTTP 请求 API，虽仍被支持但不推荐新项目使用；应优先选用 fetch，因其基于 Promise、语法简洁，但需手动处理错误状态、JSON 解析及请求头等细节。
XMLHttpRequest 是什么，现在还该用吗
XMLHttpRequest（常缩写为 XHR）是浏览器原生提供的发起 HTTP 请求的 API，诞生早于 AJAX 这个概念，但正是它让“异步加载数据而不刷新页面”成为可能。AJAX 本身不是技术，而是使用 XMLHttpRequest（或现代替代方案）实现的一种交互模式。
它仍被广泛支持，包括 IE7+，但已不推荐用于新项目——主要因为语法冗长、错误处理繁琐、Promise 不原生支持，且无法取消请求。除非要兼容老系统，否则优先选 fetch。
fetch() 发起 GET 请求的最小可用写法
fetch() 是现代浏览器标准的替代方案，返回 Promise，语义清晰，天然支持 async/await。但要注意：它只在 HTTP 状态码为 200–299 时才进入 .then()，4xx/5xx 属于“成功响应”，不会触发 .catch()。
- 必须手动检查
response.ok或response.status - 响应体不是直接 JSON，需调用
response.json()（也是 Promise） - 默认不带 Cookie，如需发送，得加
{ credentials: 'include' }
fetch('/api/user?id=123')
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
POST 请求怎么传 JSON 数据
发 POST 时常见错误是漏掉 Content-Type 头，或把对象直接当 body 传——fetch 的 body 只接受字符串、FormData、Blob 等，不能直接传 JS 对象。
立即学习“Java免费学习笔记（深入）”；
- JSON 数据必须先
JSON.stringify() - 必须显式设置
headers: { 'Content-Type': 'application/json' } - 如果后端用
req.body（如 Express），这个配置才能被正确解析
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'admin',
password: '123'
})
})
.then(r => r.json())
.then(console.log);
fetch 的坑：超时、取消、重定向和错误边界
fetch 没有内置超时和取消机制，网络卡住会一直 pending；重定向默认跟随，有时你并不想要；更隐蔽的问题是：网络断开、DNS 失败、CORS 拒绝等底层错误才会进 catch，而 404、500 会进 then ——这点和 jQuery.ajax 或 axios 行为不同。
- 超时需手动封装：用
AbortController+setTimeout - 取消请求：调用
controller.abort()，并在fetch选项中传signal - 重定向控制：设
redirect: 'manual'或'error' - 真正健壮的请求函数，至少要统一处理 status、解析 JSON、捕获网络异常
这些细节一旦忽略，调试时容易误判是后端问题，其实是前端没检查 response.ok 或没处理拒绝的 Promise。
