html本身不支持ajax,但可通过javascript调用xmlhttprequest(默认异步,禁用同步)或fetch()(原生promise、需手动处理超时/cookie/兼容性)实现;常见失败源于状态误判、dom未就绪、cors、重定向等,而非ajax不支持异步。

HTML 本身不直接支持 Ajax,但 HTML 页面可以通过内嵌的 JavaScript 调用 XMLHttpRequest 或 fetch() 发起异步请求——这是现代前端开发的事实标准,无需额外框架即可运行。
XMLHttpRequest 默认就是异步的
调用 open() 时第三个参数为 true(默认值),即启用异步模式。若传 false,则进入同步阻塞状态,页面会卡死,已被现代浏览器弃用(Chrome 80+ 报 DeprecationWarning,Firefox 拒绝执行)。
-
xmlHttp.open("GET", "/api/data", true)是安全、推荐的写法 - 同步请求(
false)在移动端或复杂 DOM 下极易触发 UI 冻结,且无法被abort()中断 - 即使没显式写
true,只要没传false,浏览器就按异步处理
fetch() 是更现代的异步替代方案
fetch() 原生返回 Promise,天然异步,没有 readyState 状态机,代码更扁平。但它不支持超时控制、上传进度监听等细粒度操作,需手动封装。
- 基本用法:
fetch("/api/data").then(r => r.json()).then(data => console.log(data)) - 注意:
fetch()成功只表示请求已发出并收到响应头,r.ok才代表 HTTP 状态码为 2xx - 它不会自动带上 Cookie,如需认证,得加
{ credentials: "include" } - IE 完全不支持,必须用 polyfill 或降级到
XMLHttpRequest
常见“看似异步失败”的真实原因
不是 Ajax 不支持异步,而是开发者误判了执行时机或状态处理逻辑,导致数据没更新、回调没触发。
-
onreadystatechange忘记判断readyState === 4和status === 200,结果在readyState === 3(部分接收)时就解析了不完整响应 - 把异步请求写在函数里却没调用,或者按钮事件绑定失败(比如 DOM 尚未加载完成就执行
document.getElementById()) - 服务端返回了 302 重定向,但
XMLHttpRequest默认不跟随,status变成 0,容易误判为网络错误 - 跨域请求未配
Access-Control-Allow-Origin,浏览器直接拦截,连请求都发不出去,控制台报CORS error而非网络超时
真正要小心的,是混淆“异步行为”和“执行顺序保证”——比如连续发两个 fetch(),不能假设第二个一定在第一个 resolve 后才发起,除非用 await 显式串行化。这点容易在表单提交、轮询场景中引发竞态问题。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











