JavaScript教程：深入理解XMLHttpRequest-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00035/article/details/148574780

JavaScript教程：深入理解XMLHttpRequest

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

什么是XMLHttpRequest？

XMLHttpRequest（简称XHR）是浏览器提供的一个内置对象，它允许开发者在不重新加载页面的情况下向服务器发送HTTP请求并接收响应。尽管名称中包含"XML"，但它实际上可以处理任何类型的数据，而不仅限于XML格式。

为什么现在还要学习XMLHttpRequest？

虽然现代JavaScript提供了更先进的fetch API，但学习XHR仍然有其价值：

维护遗留代码：许多老项目仍在使用XHR
浏览器兼容性：某些特殊场景需要支持老旧浏览器
特殊功能：XHR提供了一些fetch目前不具备的功能，如上传进度跟踪

基本用法

1. 创建XHR对象

let xhr = new XMLHttpRequest();

2. 初始化请求

xhr.open(method, URL, [async, user, password]);

参数说明：

method：HTTP方法（GET、POST等）
URL：请求地址
async：是否异步（默认为true）
user/password：HTTP基础认证凭据

3. 发送请求

xhr.send([body]);

对于GET请求通常不需要body，而POST请求可以在这里发送数据。

4. 处理响应

常用的事件处理程序：

xhr.onload = function() {
  // 请求完成（包括HTTP错误状态）
};

xhr.onerror = function() {
  // 网络错误（如无法连接）
};

xhr.onprogress = function(event) {
  // 下载进度事件
  console.log(`已接收 ${event.loaded} 字节`);
};

响应属性

请求完成后，可以通过以下属性获取响应信息：

status：HTTP状态码（200、404等）
statusText：状态文本（"OK"、"Not Found"等）
response：响应主体内容

设置超时

xhr.timeout = 10000; // 10秒超时
xhr.ontimeout = function() {
  console.log("请求超时");
};

响应类型

通过responseType可以指定期望的响应格式：

xhr.responseType = 'json'; // 可以是"text"、"arraybuffer"、"blob"等

HTTP头部操作

XHR提供了操作HTTP头部的方法：

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 获取响应头
const contentType = xhr.getResponseHeader('Content-Type');
const allHeaders = xhr.getAllResponseHeaders();

POST请求与FormData

发送表单数据：

let formData = new FormData();
formData.append('name', 'John');
formData.append('age', 30);

xhr.open('POST', '/submit');
xhr.send(formData);

发送JSON数据：

xhr.open('POST', '/submit');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John', age: 30 }));

上传进度跟踪

XHR可以跟踪上传进度：

xhr.upload.onprogress = function(event) {
  console.log(`已上传 ${event.loaded} / ${event.total} 字节`);
};

跨域请求

XHR也支持跨域请求，类似于fetch API：

xhr.withCredentials = true; // 发送凭据（cookies等）

完整示例

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data');
xhr.responseType = 'json';

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('收到数据:', xhr.response);
  } else {
    console.error('请求失败:', xhr.status);
  }
};

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

xhr.send();