AJAX 是通过 XMLHttpRequest 或 fetch() 实现的异步通信机制;现代项目应优先使用 fetch(),但需手动检查 response.ok 以处理 HTTP 错误,且注意 credentials、超时等限制。

JavaScript 的 AJAX 不是某个函数或语法糖,而是一种通过 XMLHttpRequest 或 fetch() 在不重载页面的前提下与服务器交换数据的机制。它本身没有“实现教程”一说——只有具体怎么用、在哪用、为什么有时失败。
为什么用 fetch() 而不是 XMLHttpRequest?
现代项目基本应优先选 fetch():语法简洁、基于 Promise、更易配合 async/await。但要注意它不会自动拒绝 HTTP 错误状态(如 404、500),需手动检查 response.ok。
-
XMLHttpRequest是老式写法,回调嵌套深、错误处理分散,仅在需兼容 IE11 或特殊上传进度控制时才考虑 -
fetch()默认不带 cookie,跨域请求需显式加{ credentials: 'include' } - 超时控制需额外封装(
fetch原生不支持 timeout 选项)
fetch() 发 GET 请求的最小可靠写法
看似简单,但漏掉 response.ok 判断会导致 404 静默成功、前端逻辑错乱。
async function loadData() {
try {
const res = await fetch('/api/user?id=123');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
return data;
} catch (err) {
console.error('请求失败:', err.message);
}
}
- 不要只靠
try/catch捕获网络异常,HTTP 状态码错误(如 401)不会进catch,必须检查res.ok或res.status >= 200 && res.status -
后端返回非 JSON(比如纯文本或空响应体),调用
res.json()会报错,可先用res.headers.get('content-type')判断
POST 提交表单数据的常见坑
发 JSON 和发表单(application/x-www-form-urlencoded)是两回事,后端接收方式完全不同。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容,不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
立即学习“Java免费学习笔记(深入)”;
- 发 JSON:设置
headers: { 'Content-Type': 'application/json' },且body: JSON.stringify({ name: 'Alice' }) - 发表单:不用设
Content-Type(浏览器自动设),用URLSearchParams构造 body:body: new URLSearchParams({ name: 'Alice' }) - 若后端是 PHP 或传统表单接口,却发了 JSON,
$_POST为空——这是最常被忽略的前后端约定断裂点
AJAX 的复杂性不在“怎么发”,而在“怎么稳”:错误边界是否清晰、loading 状态是否可控、重复提交是否拦截、认证凭据是否一致。这些细节没对齐,无刷新就变成无提示失败。










