JavaScript教程：深入理解XMLHttpRequest对象

JavaScript教程：深入理解XMLHttpRequest对象

【免费下载链接】ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

XMLHttpRequest是JavaScript中一个重要的内置浏览器对象，它允许开发者通过JavaScript发起HTTP请求。本文将全面介绍XMLHttpRequest的使用方法和相关概念。

XMLHttpRequest概述

XMLHttpRequest（简称XHR）是一个浏览器内置对象，用于在JavaScript中发送HTTP请求。虽然名称中包含"XML"，但它可以处理任何格式的数据，而不仅限于XML。

在现代Web开发中，虽然fetch API逐渐成为主流，但XMLHttpRequest仍然在以下场景中发挥作用：

1. 需要支持使用XHR的现有脚本
2. 需要兼容老旧浏览器而不想使用polyfill
3. 需要fetch目前无法实现的功能，如上传进度跟踪

基本使用方法

使用XMLHttpRequest发起请求通常包含以下步骤：

1. 创建XHR对象

let xhr = new XMLHttpRequest();

2. 初始化请求

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

参数说明：

• method：HTTP方法，如"GET"或"POST"
• URL：请求的URL地址
• async：是否异步，默认为true
• user/password：HTTP基础认证的凭据

3. 发送请求

xhr.send([body]);

对于GET请求通常不需要请求体，而POST请求可以通过body参数发送数据。

4. 监听响应事件

常用的事件处理程序：

xhr.onload = function() {
  // 请求完成时触发
};

xhr.onerror = function() {
  // 请求失败时触发
};

xhr.onprogress = function(event) {
  // 接收数据过程中周期性触发
  // event.loaded - 已接收字节数
  // event.total - 总字节数(如果可计算)
};

完整示例

下面是一个完整的GET请求示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');

xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('响应数据:', xhr.response);
  } else {
    console.error('请求错误:', xhr.status);
  }
};

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

响应处理

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

• status：HTTP状态码（如200、404等）
• statusText：HTTP状态消息（如"OK"、"Not Found"）
• response：服务器响应体

设置超时

可以通过timeout属性设置请求超时时间（毫秒）：

xhr.timeout = 10000; // 10秒超时

超时后会触发timeout事件。

响应类型

通过responseType属性可以指定响应格式：

xhr.responseType = 'json'; // 期望JSON响应

支持的类型包括：

• ""或"text"：字符串（默认）
• "arraybuffer"：ArrayBuffer
• "blob"：Blob对象
• "document"：XML文档
• "json"：JSON对象

请求状态

XHR对象在请求过程中会经历不同状态，可通过readyState属性获取：

UNSENT = 0; // 初始状态
OPENED = 1; // open()已调用
HEADERS_RECEIVED = 2; // 接收到响应头
LOADING = 3; // 正在接收响应体
DONE = 4; // 请求完成

可以通过readystatechange事件跟踪状态变化，但现代代码更推荐使用load/error/progress事件。

中止请求

可以随时调用abort()方法中止请求：

xhr.abort();

这会触发abort事件，并将status设为0。

HTTP头部操作

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

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

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

// 获取所有响应头
const headers = xhr.getAllResponseHeaders();

POST请求与FormData

发送POST请求时，可以使用FormData对象：

let formData = new FormData();
formData.append('key', 'value');

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

对于JSON数据：

xhr.open('POST', '/submit');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({key: 'value'}));

上传进度跟踪

不同于下载进度，上传进度需要通过xhr.upload对象跟踪：

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

跨域请求

XHR支持跨域请求，遵循CORS策略。默认不发送cookie和HTTP认证，需要显式设置：

xhr.withCredentials = true;

总结

XMLHttpRequest虽然逐渐被fetch API取代，但在某些场景下仍然是必要的工具。理解它的工作原理和使用方法对于维护旧代码和处理特殊需求非常重要。本文涵盖了XHR的主要功能，包括请求发送、响应处理、进度跟踪和跨域请求等核心概念。

【免费下载链接】ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info