XMLHttpRequest 在现代 HTML5 页面中仍可直接使用,但新项目不推荐手动封装;它作为底层 API 被 fetch 和 axios 封装,适用于老代码维护、精细控制请求(如进度监听)或 IE10+ 兼容场景。

XMLHttpRequest 能否在现代 HTML5 页面中直接使用
能,但不推荐新项目直接用 XMLHttpRequest 手动封装。它仍是浏览器原生支持的底层 API,fetch() 和 axios 都构建在其之上。如果你维护老代码、需要精细控制请求生命周期(比如监听 upload.onprogress),或需兼容 IE10+,XMLHttpRequest 仍有明确价值。
最简可用的 XMLHttpRequest GET 请求写法
注意:必须调用 .open() 后再设置 .onload,否则可能错过状态变更;.send() 必须显式调用,即使无 body。
- GET 请求无需设置
Content-Type -
.responseType默认是""(即字符串),设为"json"可让.response自动解析(但仅限 200 状态且响应体合法) - 务必检查
xhr.status === 200,不能只依赖xhr.readyState === 4
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/users");
xhr.responseType = "json";
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.response); // 已解析为对象
} else {
console.error("请求失败:", xhr.status, xhr.statusText);
}
};
xhr.onerror = function() {
console.error("网络错误");
};
xhr.send();
POST 提交 JSON 数据时容易漏掉的关键点
常见错误是只传 JS 对象却没序列化,或忘了设请求头——这会导致后端收到空体或解析失败。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须用
JSON.stringify()将数据转为字符串 - 必须手动设置
Content-Type: application/json -
.responseType = "json"对 POST 同样有效,但仅影响响应解析 - 如果后端返回非 2xx 状态码(如 400),
.onload仍会触发,需主动判断status
fetch()
-
XMLHttpRequest的.abort()是唯一可取消原生请求的方式;fetch()需配合AbortController - 上传进度只能用
XMLHttpRequest.upload.onprogress,fetch无等效机制 - IE 完全不支持
fetch,若需兼容 IE11,XMLHttpRequest是底线选择
真正该纠结的不是“用不用”,而是“在哪一层封装”。裸写 XMLHttpRequest 现在基本只出现在 polyfill、调试工具或极简环境里。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










