XMLHttpRequest基本用法步骤详解

本文深入解析了 XMLHttpRequest（XHR）在实际开发中的核心用法与关键避坑要点：从兼容旧版IE的实例创建方案，到强制异步（async=true）以避免UI卡死的硬性要求；从必须结合status码判断响应状态以防止错误页解析异常，到GET请求中URL参数的手动编码规范；再到responseType设置对性能和安全的影响——每一步都直击开发者易错细节，尤其适用于仍需支持老旧环境的政企或内网系统，堪称现代前端网络请求的扎实基石指南。

创建 XMLHttpRequest 实例必须检查兼容性

现代浏览器（IE7+、Chrome、Firefox、Safari、Opera）都支持 new XMLHttpRequest()，但旧版 IE5/6 只能用 ActiveXObject("Microsoft.XMLHTTP")。不加判断直接写 new XMLHttpRequest() 在 IE6 下会报 ReferenceError: XMLHttpRequest is not defined。

实际项目中仍需兜底，尤其面向政企或内网系统时。推荐写法：

let xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  // IE6/5
  try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e) {
    throw new Error("当前浏览器不支持 XMLHttpRequest");
  }
}

open() 的第三个参数 async 决定阻塞与否

xhr.open(method, url, async) 中的 async 参数默认为 true（异步），但若设为 false，脚本会阻塞等待响应完成，UI 完全卡死，现代开发中严禁使用。

• 异步（true）：请求发出去后立即继续执行后续 JS，靠事件监听响应
• 同步（false）：JS 执行暂停，直到服务器返回，status 和 response 才可用
• Chrome 已在 DevTools 控制台对同步 XHR 发出警告；Firefox 86+ 完全禁用主线程同步请求

监听响应不能只靠 loadend，status 判断必不可少

loadend 事件在请求结束时触发（无论成功失败），但它不区分 HTTP 状态码。常见错误是直接解析 xhr.response，结果遇到 404 或 500 时抛出 SyntaxError: Unexpected token（因返回的是 HTML 错误页而非 JSON）。

正确做法是结合 onload（仅成功）或 onloadend + 显式状态判断：

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status 

<h3>GET 请求的查询参数必须手动拼接，URL 编码不能省</h3>
<p><code>xhr.open()</code> 不处理参数，所有查询参数（如 <code>userId=1&completed=false</code>）必须手动拼到 URL 后，并确保值经过 <code>encodeURIComponent()</code>。否则中文、空格、& 等字符会导致后端解析失败或 400 错误。</p>
<p>错误示例：<code>xhr.open('GET', '/api/todos?title=我的任务&status=done')</code> → <code>我的任务</code> 未编码，URL 中断在第一个 <code>&</code> 前。</p>
<p>正确写法：</p>
<pre class="brush:php;toolbar:false;">const params = new URLSearchParams({
  userId: 1,
  completed: false,
  title: "我的任务"
});
xhr.open('GET', '/api/todos?' + params.toString());

注意：URLSearchParams 兼容性较好（IE 不支持，需 polyfill 或手写编码逻辑），但比字符串拼接更安全可靠。

最容易被忽略的是：没有设置 xhr.responseType 却直接用 JSON.parse(xhr.response) —— 默认 responseType 是 ""（即 text），对大响应体可能引发内存暴涨；而设为 "json" 后，xhr.response 直接是解析好的对象，但失败时为 null，需额外判空。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《XMLHttpRequest基本用法步骤详解》文章吧，也可关注golang学习网公众号了解相关技术文章。