最推荐使用 fetch API 获取 JSON 数据，它原生支持 Promise、语法简洁，需用 response.json() 解析且须检查 response.ok 并捕获网络及解析错误；async/await 写法更清晰，兼容性差时才考虑 XMLHttpRequest。
用 Ajax 获取 JSON 数据，最常用、最推荐的方式是使用 fetch API，它原生支持 Promise，语法简洁，且默认能处理 JSON 响应。传统 XMLHttpRequest 也能实现，但代码更冗长，现已较少手动使用。
用 fetch 获取 JSON 数据（推荐）
fetch 返回一个 Promise，调用 response.json() 方法可自动解析响应体为 JavaScript 对象（前提是服务端返回的是合法 JSON，且响应头 Content-Type 为 application/json）：
- 确保请求 URL 正确，后端确实返回 JSON（如
{"name":"张三","age":28}） - 必须用
.then(response => response.json())解析，不能直接读取response.body - 记得捕获网络错误和 JSON 解析错误：网络失败（如离线、404）会进
catch；但 500 或 200 但内容不是 JSON 会导致response.json()拒绝 Promise
示例：
fetch('/api/user')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log(data.name); // 如：张三
})
.catch(err => {
console.error('获取数据失败：', err);
});
用 async/await 写法（更清晰）
配合 async 函数，代码更接近同步逻辑，易于理解和维护：
立即学习“Java免费学习笔记（深入）”；
- 用
try...catch统一处理所有异步错误（网络、HTTP 状态、JSON 解析） - 仍需检查
response.ok来区分业务异常（如 401 未登录、404 资源不存在）
示例：
async function loadUser() {
try {
const response = await fetch('/api/user');
if (!response.ok) {
throw new Error(`请求失败，状态码：${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (err) {
console.error('加载用户失败：', err.message);
}
}
loadUser();
注意事项与常见问题
-
CORS 限制：前端向不同源发起请求时，服务端必须设置
Access-Control-Allow-Origin响应头，否则浏览器会拦截响应 -
Content-Type 头不匹配：即使返回了 JSON 字符串，若响应头不是
application/json，response.json()仍可工作（规范允许），但部分旧环境或严格模式下可能出错；建议后端正确设置该头 -
空响应或非 JSON 响应：比如后端返回纯文本
"success"或 HTML 错误页，调用.json()会抛出 SyntaxError；可在解析前用response.headers.get('content-type')?.includes('json')做简单判断 -
超时控制：fetch 本身不支持 timeout，需用
AbortController实现（如 10 秒未响应则中止）
兼容老浏览器？用 XMLHttpRequest（不推荐新项目）
仅在需支持 IE11 或更低版本时考虑。关键点：
- 设置
request.responseType = 'json'（IE10+ 支持），或手动JSON.parse(request.responseText) - 监听
load事件而非onreadystatechange，避免重复触发 - 同样要检查
request.status和解析异常
不复杂但容易忽略
