javascript如何发送HTTP请求_AJAX的工作原理是什么【教程】
fetch()是当前推荐的HTTP请求方式，基于Promise、语义清晰；需手动检查res.ok、显式解析响应体；credentials默认omit，跨域需配对设置include与CORS头；网络层错误如Failed to fetch多因URL错误、服务未启或拦截。
JavaScript 发送 HTTP 请求不依赖“AJAX”这个名词本身，而是靠 XMLHttpRequest 或更现代的 fetch() —— 后者已是当前推荐方式，前者仅需兼容 IE11 及更旧环境时才考虑。
用 fetch() 发起 GET/POST 请求最简写法
fetch() 是基于 Promise 的原生 API，语义清晰、链式自然。它默认只带基本请求头，不发 Cookie，且 4xx/5xx 状态码不会自动 reject（这点常被忽略）：
- GET 请求：
fetch('/api/users')即可，参数拼在 URL 后 - POST 提交 JSON：
fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user: 'a', pass: 'b' }) }) - 必须手动检查响应状态：
if (!res.ok) throw new Error(res.status)，否则 404、500 会静默进入.then() - 响应体需显式解析：
res.json()、res.text()、res.blob()，不能直接当对象用
XMLHttpRequest 还有必要学吗？
除非维护老项目或需精细控制上传进度、取消请求（IE10+）、或处理流式响应（如长轮询），否则不建议新代码使用。它的回调风格和状态机逻辑（readyState）容易出错：
- 必须监听
onload而非onrea，否则可能漏掉成功响应
dystatechange
- 设置请求头要在
open()之后、send()之前，顺序错则无效 - 发送 FormData 时不要设
Content-Type，浏览器会自动生成带 boundary 的 multipart 头 - 超时需手动设
xhr.timeout = 5000并监听ontimeout，否则永不结束
为什么 fetch() 不带 Cookie？如何带上？
出于安全默认策略，fetch() 的 credentials 选项默认是 'omit'，跨域时不发 Cookie，同域也不发（与浏览器地址栏直接访问行为不一致）：
- 要发 Cookie（含 session），必须显式传
{ credentials: 'include' } - 若后端用 CORS，还需确保响应头包含
Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为*（必须是具体域名） - 开发时若本地前端端口（如
http://localhost:3000）调后端（如http://localhost:8000），属于跨域，credentials必须配对生效
常见错误：TypeError: Failed to fetch / NetworkError when attempting to fetch resource
这类报错不是 HTTP 状态码问题，而是网络层失败，通常意味着请求根本没发出或被拦截：
- URL 协议/主机名错误（比如写了
http://但服务跑在https://，或域名拼错） - 后端服务未启动、端口被占、防火墙拦截
- 浏览器扩展（如广告屏蔽器、隐私插件）主动阻止了该请求
- Service Worker 拦截了请求但没正确返回响应（检查
navigator.serviceWorker.ready和 DevTools 的 Application → Service Workers） - CORS 预检（OPTIONS）失败时，浏览器控制台可能只显示“Failed to fetch”，需看 Network 标签页确认是否卡在 OPTIONS 上
真正麻烦的从来不是“怎么发”，而是“发完怎么稳稳收回来”——状态判断、错误分类、重试边界、取消机制、凭证管理，这些细节堆起来才是实际工程里的分水岭。
