JS中XMLHttpRequest (XHR) 发送HTTP请求的步骤详解

一、XHR 发送 HTTP 请求的标准五大步骤

为了保证网络连接可靠建立并不丢失服务端推送的事件通知，浏览器对 XMLHttpRequest 的调用顺序有明确要求。下面按照开发中最规范的执行路径逐步展开。

const xhr = new XMLHttpRequest();

xhr.open(method, url, async, user, password);

// 方式 A：现代化事件监听（推荐）
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('请求成功:', xhr.response);
  } else {
    console.error('服务端返回异常状态:', xhr.status, xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error('网络层故障或跨域拦截');
};

// 方式 B：经典状态机监听
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('数据接收完成:', xhr.responseText);
    }
  }
};

xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOi...');

// 发送 GET 请求（无需载荷）
xhr.send(null);

// 发送 POST 请求（携带 JSON 字符串或 FormData）
const payload = { username: "developer", role: "admin" };
xhr.send(JSON.stringify(payload));

图 1：XMLHttpRequest 发送 HTTP 请求的完整时序与操作流程图

二、核心状态机：readyState 与事件生命周期

要写出鲁棒的通信代码，必须准确区分 readyState（XHR 自身通道状态）与 status（HTTP 响应状态码）的区别。

1. readyState 五种常量的含义

图 2：XHR readyState 状态跃迁与事件生命周期示意图

三、实战范例：GET 与 POST 请求的完整实现

下面分别给出包含参数拼接、异常捕获、响应类型转换的规范代码模板。

1. 完整 GET 请求示例（含 Query 参数编码与 responseType）

/**
 * 发送标准 GET 请求
 * @param {string} baseUrl - 目标接口基础地址
 * @param {object} params - 查询参数键值对
 */
function fetchUserData(baseUrl, params) {
  // 1. 拼接并转义 Query 查询字符串
  const queryString = Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join('&');
  const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;

  // 2. 实例化
  const xhr = new XMLHttpRequest();

  // 3. 打开连接
  xhr.open('GET', fullUrl, true);

  // 4. 优化响应解析：指定返回为 JSON 对象，无需手动 JSON.parse
  xhr.responseType = 'json';

  // 5. 设置超时时间（单位：毫秒）
  xhr.timeout = 8000;

  // 6. 注册事件监听
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('获取数据成功:', xhr.response);
    } else {
      console.error('业务失败，状态码:', xhr.status);
    }
  };

  xhr.ontimeout = function() {
    console.error('网络请求超时，耗时超过 8000ms');
  };

  xhr.onerror = function() {
    console.error('发生网络底层错误或跨域违规');
  };

  // 7. 发送请求（GET 传 null）
  xhr.send(null);
}

// 调用示例
fetchUserData('https://api.example.com/users', { page: 1, pageSize: 20 });

2. 完整 POST 请求示例（提交 JSON 数据载荷）

/**
 * 发送标准 POST 请求提交 JSON 数据
 * @param {string} url - 提交地址
 * @param {object} data - 负载对象
 */
function submitOrder(url, data) {
  const xhr = new XMLHttpRequest();

  xhr.open('POST', url, true);

  // 关键步骤：设置报文头，声明请求体数据为 JSON 格式
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  xhr.setRequestHeader('Accept', 'application/json');

  xhr.responseType = 'json';

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('订单提交成功，返回数据:', xhr.response);
    } else {
      console.error('提交失败:', xhr.status, xhr.statusText);
    }
  };

  xhr.onerror = function() {
    console.error('提交发生网络错误');
  };

  // 将 JavaScript 对象序列化为 JSON 字符串并压入请求体
  const bodyPayload = JSON.stringify(data);
  xhr.send(bodyPayload);
}

// 调用示例
submitOrder('https://api.example.com/orders', {
  goodsId: 10086,
  quantity: 2,
  payChannel: 'wechat'
});

图 3：GET 与 POST 请求在 XHR 中的传输差异与数据封装结构

四、进阶场景与常见避坑指南

1. 跨域资源共享 (CORS) 与凭据携带

当 XHR 访问不同源（协议、域名、端口任一不同）的资源时，浏览器安全机制会触发同源策略检查：

• 基本跨域：服务端必须在响应头中包含 Access-Control-Allow-Origin: * 或指定来源站点。否则客户端触发 onerror，status 为 0，在控制台打印 CORS 拦截提示。
• 携带 Cookie 与身份认证：默认情况下，跨域 XHR 不会发送 Cookie。若要携带 Cookie，需在调用 send() 之前设置：
  xhr.withCredentials = true;
  此时服务端响应头必须明确指定具体域名，且附带 Access-Control-Allow-Credentials: true，绝不能配置为通配符 *。

2. 文件上传与进度监控 (XHR Level 2)

XHR 相比原始 Fetch 的一大优势在于对上传进度的原生支持。在 xhr.upload 对象上可监听 onprogress：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload', true);

// 监听上传进度
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = Math.round((event.loaded / event.total) * 100);
    console.log(`上传进度: ${percentComplete}%`);
  }
};

// 注意：上传 FormData 时严禁手动设置 Content-Type，让浏览器自动补充 boundary 分界字符串！
xhr.send(formData);

3. 请求超时控制与手动中止

在用户快速切换页面、Tab 标签或输入自动补全时，未完成的请求应及时丢弃以节省带宽：

// 随时调用 abort() 中止尚未完成的请求
xhr.abort(); // 此时 readyState 重置为 0，且触发 onabort 回调

图 4：XMLHttpRequest 核心 API 属性、方法与异常排错全景总结

五、结语与总结

熟练掌握 XMLHttpRequest 的五大操作步骤（new 实例化 → open 配置 → onload 监听 → setRequestHeader 报头 → send 投递）及其背后的状态机运作机制，不仅是应对老旧项目维护与高精细度网络任务（如带进度的断点续传、底层报文探针）的必备技能，更能帮助前端开发者从根本上透彻理解现代 Fetch、Axios 乃至全栈 HTTP 通信库的演化逻辑。