AJAX是JavaScript通过XMLHttpRequest或fetch()发起异步HTTP请求的实践方式,核心是不刷新页面交换数据;fetch()更简洁且原生支持Promise,但需手动处理HTTP错误、响应解析、超时与取消。

AJAX 不是某种新语言或框架,它只是 JavaScript 用 XMLHttpRequest 或 fetch() 发起异步 HTTP 请求的一套实践方式——核心在于“不刷新页面就能和服务器交换数据”。
为什么 XMLHttpRequest 现在很少直接写了
它 API 冗长、回调嵌套深、错误处理分散。比如要发一个 GET 请求,得手动设置 open()、send()、监听 onload 和 onerror,还要自己解析响应体、判断状态码。
-
XMLHttpRequest默认不支持 Promise,得手动包装 - 超时控制、取消请求需额外维护
abort()逻辑 - 现代浏览器中,
fetch()已成事实标准,更简洁且原生返回 Promise
fetch() 的基本用法和必须处理的坑
fetch() 看似简单,但默认行为和直觉有偏差:它只在网络失败(如断网、DNS 错误)时 reject,而 404、500 这类 HTTP 错误仍会 resolve —— 必须手动检查 response.ok 或 response.status。
- GET 请求:
fetch('/api/user?id=123'),注意 URL 拼接需自行编码,建议用URLSearchParams - POST 提交 JSON:
fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user: 'a', pass: 'b' }) }) - 务必链式调用
.then(res => { if (!res.ok) throw new Error(res.status) }),否则 401 也会进后续.then - 响应体需显式解析:
res.json()、res.text()或res.blob(),它们也返回 Promise
用 async/await 写可读性更强的 AJAX 逻辑
避免 .then 嵌套,把异步流程写得像同步代码,但要注意错误必须用 try/catch 捕获两层:网络异常 + HTTP 错误。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容,不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
立即学习“Java免费学习笔记(深入)”;
async function loadUser(id) {
try {
const res = await fetch(`/api/user/${id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
return data;
} catch (err) {
console.error('加载用户失败:', err.message);
throw err;
}
}
- 不能只 catch 外层,因为
res.json()可能因非法 JSON 抛错 - 若需上传文件,
body直接传FormData实例,无需设Content-Type(浏览器自动设置带 boundary) - 跨域请求时,如需带 cookie,必须加
credentials: 'include',且服务端要响应Access-Control-Allow-Credentials: true
真正容易被忽略的是:fetch 默认没有超时机制,也没有请求取消能力;需要封装或借助 AbortController 才能实现——这在用户快速切换页面或重复提交时尤为关键。










