JavaScript实现Ajax推荐用fetch，需手动处理HTTP错误和业务错误；跨域须后端配置CORS，前端无法绕过；错误应分网络失败、HTTP异常、业务错误三层处理。
JavaScript 实现 Ajax 请求主要靠 fetch 或 XMLHttpRequest，现代项目推荐用 fetch；跨域需后端配合设置 CORS 头，前端无法绕过；错误响应要区分网络失败、HTTP 状态码异常（如 404/500）和业务错误（如后端返回的 { code: 401, msg: "未登录" }），需分别处理。
用 fetch 发起基础 Ajax 请求
fetch 是基于 Promise 的原生 API，语法简洁，支持 async/await。注意它只在**网络请求失败时 reject**（比如断网、域名不存在），而 4xx/5xx 状态码仍会 resolve，需手动检查 response.ok 或 response.status。
- GET 请求示例：
<pre>const res = await fetch('/api/user?id=123');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();</pre> - POST 提交 JSON：
<pre>const res = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'a', password: 'b' })
});</pre>
跨域问题的核心是浏览器同源策略
跨域不是 Ajax 特有，而是所有浏览器发起的跨源 HTTP 请求都受限制。能否成功取决于**服务端是否允许当前源访问**，关键看响应头：
-
Access-Control-Allow-Origin: *或指定域名（如https://myapp.com） - 若带 Cookie 或认证头，还需
Access-Control-Allow-Credentials: true，且Allow-Origin不能为* - 预检请求（OPTIONS）需服务端正确响应
Access-Control-Allow-Methods和Access-Control-Allow-Headers
前端无法“解决”跨域，只能确认请求是否符合 CORS 规则。开发时可用代理（如 Webpack DevServer 的 proxy）临时规避，上线必须由后端配置。
立即学习“Java免费学习笔记（深入）”；
统一处理错误响应更可靠
真实项目中，错误不止一种类型，建议封装请求函数集中处理：
- 捕获网络异常（
try/catch捕获 fetch 抛出的错误） - 检查
response.ok === false或状态码范围（如 status ≥ 400） - 解析 JSON 后再判断业务字段（如
data.code !== 0） - 对不同错误类型做不同反馈：网络错误提示重试，401 跳登录页，403 提示无权限，业务错误显示
data.msg
需要兼容老浏览器时用 XMLHttpRequest
如果必须支持 IE10/11，可封装简易版 XHR 工具函数。注意设置 xhr.withCredentials = true 才能发带 Cookie 的跨域请求，且需监听 onerror、onload 和 onreadystatechange 综合判断状态。
不复杂但容易忽略细节，关键是把网络层、HTTP 层、业务层的错误分开识别和响应。
