什么是AJAX以及如何在javascript中实现_怎样与服务器进行异步通信【教程】

ajax 是浏览器原生支持的异步通信模式，核心是 xmlHttpRequest 或 fetch()；XMLHttpRequest 仍必要，因支持上传进度监听、更可靠的 withCredentials、原生超时控制；fetch() 更简洁但需手动处理错误状态、cookie 和兼容性。

AJAX 不是某种新语言或框架，而是指一种**浏览器原生支持的异步通信模式**：javaScript 在不刷新页面的前提下，向服务器发起请求并处理响应。核心在于 XMLHttpRequest 或更现代的 fetch()，而非“必须用 XML”或“必须配合 jquery”。

为什么 XMLHttpRequest 还值得学？

虽然 fetch() 更简洁，但 XMLHttpRequest 仍不可替代——尤其需要监听上传进度、手动控制请求头（如带 cookie 的跨域请求）、或兼容 IE10+ 场景。它暴露了更多底层控制点：

• XMLHttpRequest 支持 upload.onprogress，fetch() 目前无法原生监听上传进度
• 设置 withCredentials: true 时，XMLHttpRequest 行为更可预测；fetch() 需显式传 { credentials: 'include' }，且部分旧版 safari 对其支持不稳定
• 超时控制：原生 XMLHttpRequest.timeout 属性直接可用；fetch() 需配合 AbortController，稍繁琐

fetch() 的实际写法和常见陷阱

fetch() 默认不带 cookie，401 错误常因此而起；它也不会自动把 4xx/5xx 响应转为 rejected promise，这点极易被忽略：

fetch('/api/user', {   method: 'POST',   headers: { 'Content-Type': 'application/json' },   body: JSON.stringify({ name: 'Alice' }),   credentials: 'include' // 必须加这行，否则 session 不会发送 }) .then(res => {   if (!res.ok) {     throw new Error(`HTTP error! status: ${res.status}`); // 手动检查状态码   }   return res.json(); }) .catch(err => {   console.error('Request failed:', err.message); // 401、网络断开、CORS 都会进这里 });

• 不要只依赖 .then() 捕获错误：网络失败、CORS 拒绝、DNS 失败都会触发 catch，但 400 响应本身不会
• res.json() 本身可能 reject（比如返回非 json 内容），需额外 catch
• GET 请求参数别拼在 URL 里手动编码，用 URLSearchParams 更安全：fetch(`/api/list?${new URLSearchParams({ page: '1', size: '10' })}`)

如何判断该用 fetch() 还是 XMLHttpRequest？

看三个硬指标：

立即学习“Java免费学习笔记（深入）”；

• 是否要显示文件上传进度？→ 选 XMLHttpRequest
• 是否要支持 IE11？→ 选 XMLHttpRequest（fetch() 需 polyfill 且不完全可靠）
• 是否只需简单 GET/POST 且目标环境明确支持现代浏览器？→ 优先 fetch()，代码更扁平

没有“通用最优解”。例如一个后台管理系统的文件导入页，必须显示上传百分比，那就绕不开 XMLHttpRequest.upload.onprogress；而一个纯展示型博客的点赞按钮，fetch() 一行发请求、两行处理结果就足够。

真正容易被忽略的不是语法，而是对“异步”的敬畏：无论用哪个 API，都要预设请求失败、响应超时、格式异常、用户中途关闭页面这些情况。写完 fetch() 别急着测成功路径，先断网、改响应头、删 cookie、模拟慢速 3G，看看 ui 是否卡死或报错泛滥。