javascript AJAX是什么_如何实现无刷新数据请求？

紅蓮之龍 2026-01-11 00:00:00 次阅读

AJAX是一种通过XMLHttpRequest或fetch实现页面局部更新的通信模式，核心是不刷新页面交换数据；fetch为现代推荐方案，需注意手动处理错误、设置headers和credentials；XMLHttpRequest仅兼容旧IE时使用。

JavaScript AJAX 是什么？它不是某个函数，而是一种通信模式

AJAX（Asynchronous JavaScript and XML）本质是浏览器通过 XMLHttpRequest 或 fetch 在不重新加载页面的前提下，与服务器交换数据并更新局部内容的技术。名字里的 “XML” 已成历史包袱——现在传 JSON 更常见，但术语保留了下来。

关键不在“异步”，而在“局部更新”：点击按钮后只改页面某一块区域，URL 不跳转，历史记录不新增，用户体验更接近原生 App。

用 `fetch` 发起最简无刷新请求（推荐现代写法）

fetch 是当前标准，比 XMLHttpRequest 更简洁、更符合 Promise 语义。但它默认不带 cookie，且 4xx/5xx 状态码不会触发 catch，这点极易踩坑。

必须手动检查 response.ok 或 response.status 才能捕获业务错误
发送 JSON 数据时，记得设 Content-Type: application/json
需要携带登录态？加 credentials: 'include'

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  credentials: 'include',
  body: JSON.stringify({ id: 123 })
})
.then(response => {
  if (!response.ok) throw new Error(`HTTP error ${response.status}`);
  return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));

`XMLHttpRequest` 还值得学吗？只在需兼容 IE9 及以下时才用

除非维护老项目，否则不必主动写 XMLHttpRequest。它的回调嵌套深、API 冗长，比如监听进度、手动处理状态码、区分 onload 和 onerror 都要额外处理。

典型易错点：

readyState === 4 不代表成功，还得看 status === 200
responseText 是字符串，解析 JSON 前必须确认非空且合法
设置请求头要在 open() 之后、send() 之前

如果真要用，优先封装成 Promise，别裸写回调链。

为什么点了按钮没反应？常见拦截点和调试路径

无刷新请求失败，80% 情况不是代码逻辑错，而是被环境或配置拦下了：

CORS 报错？看浏览器控制台 Network 标签页里预检请求（OPTIONS）是否 403/405 —— 后端没配 Access-Control-Allow-Origin 或允许方法
请求发出去了但没进后端？检查 URL 路径是否漏了前缀（如 /api/v1/user 写成 /user），或代理配置（vite.config.js 的 proxy、webpackDevServer）没生效
返回数据对不上？确认后端响应头含 Content-Type: application/json，否则 response.json() 会抛错
本地开发正常，部署后失败？大概率是相对路径变绝对路径导致跨域，或 Nginx 没透传 Origin 头