当前位置：首页 > news >正文

彻底掌握 XMLHttpRequest（XHR）：前端通信的基石

news 来源：原创 2025/9/12 15:31:37

一、XHR 的起源与演进

1.1 技术背景

XHR（XMLHttpRequest）是现代 Web 应用的异步通信基石，最早由微软在 IE5 中通过 ActiveXObject 引入，后来被 Mozilla 推广并成为 W3C 的标准接口。XHR 的出现推动了 AJAX（Asynchronous JavaScript and XML）技术的兴起，使得网页可以在不刷新页面的情况下与服务器进行数据交互。

1.2 演进历程

在这里插入图片描述
XHR 虽已被 Fetch、Axios 等现代 API 所部分取代，但其仍在兼容性处理、老旧系统维护和底层封装中具有重要地位。

二、XHR 的运行机制

2.1 基本工作流程

XHR 的运行基于以下步骤：
在这里插入图片描述

2.2 请求状态详解

XHR 的 readyState 属性定义了XMLHttpRequest生命周期中的五个阶段，开发者可以据此精确控制异步通信逻辑：
在这里插入图片描述

各状态说明：

0: UNSENT（未初始化）

请求未初始化，尚未调用.open()方法。

1: OPENED（已建立连接）

已调用.open()方法，但尚未调用 .send()。此时可以设置请求头信息。适合做以下操作：

xhr.setRequestHeader(...)
绑定 onreadystatechange 等事件监听器

2: HEADERS_RECEIVED（已接收响应头）

send() 已被调用，响应头已经接收完成，可以使用：

xhr.getAllResponseHeaders()
xhr.getResponseHeader("Content-Type") 等方法

3: LOADING（正在接收响应体）

浏览器正在下载响应体数据（如果响应较大可多次触发）。可用于：

监听进度（onprogress）
构建流式数据加载方案（如大文件处理）

4: DONE（请求已完成）

响应数据全部接收完成。此时可以访问：

xhr.responseText（默认）
或根据 responseType 访问 xhr.response（如 blob, arraybuffer, json）

三、XHR 接口与 API 详解

3.1 常用方法

方法名	功能说明
`open(method, url, async)`	初始化请求
`send(data)`	发送请求体
`setRequestHeader(name, value)`	设置 HTTP 请求头
`abort()`	中止请求
`getResponseHeader(name)`	获取指定响应头
`getAllResponseHeaders()`	获取所有响应头

3.2 常用属性

属性名	描述
`readyState`	请求状态（0-4）
`status`	响应状态码（如 200）
`statusText`	状态描述文字（如 OK）
`responseText`	返回的纯文本数据
`responseXML`	返回的 XML 数据
`response`	返回值，格式依据 `responseType`
`timeout`	请求超时时间（ms）

3.3 事件处理器

事件名	描述
`onreadystatechange`	`readyState` 改变时触发
`onload`	请求成功完成触发
`onerror`	请求出错时触发
`ontimeout`	请求超时时触发

四、使用实例与实战技巧

4.1 GET 请求示例

const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data", true);
xhr.onload = () => {if (xhr.status === 200) {console.log(xhr.responseText);}
};
xhr.send();

4.2 POST 请求（发送 JSON）

const xhr = new XMLHttpRequest();
xhr.open("POST", "/submit", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = () => {if (xhr.status === 200) {console.log("成功：", xhr.responseText);}
};
xhr.send(JSON.stringify({ username: "alice" }));

4.3 表单上传

const formData = new FormData();
formData.append("file", fileInput.files[0]);const xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onload = () => console.log(xhr.responseText);
xhr.send(formData);

五、异常处理、安全与跨域

5.1 网络错误与超时

xhr.onerror = () => console.error("请求失败");
xhr.timeout = 3000;
xhr.ontimeout = () => alert("超时");

5.2 状态码判断

if (xhr.status >= 200 && xhr.status < 300) {console.log("成功响应");
} else {console.error("失败状态码：", xhr.status);
}

5.3 跨域请求（CORS）

// 服务器响应头
Access-Control-Allow-Origin: *

在这里插入图片描述

5.4 安全建议

始终使用 HTTPS
实现 CSRF Token 检查
设置 SameSite Cookie 限制

六、XHR 的现代比较与总结

6.1 与 Fetch API 对比

特性	XHR	Fetch
Promise 支持	否	是
拦截器支持	无	可封装实现
请求取消	有 `abort()`	支持 `AbortController`
响应流处理	不支持	支持
兼容性	高	中

6.2 与框架集成

jQuery：$.ajax() 内部使用 XHR
Axios：封装自 XHR，支持拦截器和Promise
Vue/React：推荐使用 Fetch/Axios，但也可自定义封装 XHR

6.3 性能优化建议

使用连接池或请求复用技术
减少无效请求，使用缓存策略
合理设置 timeout 与重试机制
分批加载与分页

结语

尽管现代 Web 通信趋向使用 Fetch 和第三方库，XHR 依旧是理解异步通信与浏览器工作机制的基础。它不仅在老项目维护中仍然重要，也是许多框架封装逻辑的底层实现。

精通 XHR，将使你更全面地掌握前端网络通信原理，构建更健壮的交互应用。

彻底掌握 XMLHttpRequest（XHR）：前端通信的基石

一、XHR 的起源与演进 1.1 技术背景 XHR（XMLHttpRequest）是现代 Web 应用的异步通信基石，最早由微软在 IE5 中通过 ActiveXObject 引入，后来被 Mozilla 推广并成为 W3C 的标准接口。XHR 的出现推动了 AJAX（Asynchrono…...

编程日记 2025/9/12 15:31:37

Bartender 5 for Mac 多功能菜单栏管理

Bartender 5 for Mac 多功能菜单栏管理一、介绍 Bartender 5，是一款菜单栏管理软件，可以帮助用户隐藏、组织和自定义Mac菜单栏中的图标和通知。使用Bartender 5，用户可以将不常用的图标隐藏起来，使菜单栏保持整洁，并…...

编程日记 2025/9/12 8:04:07

重读《人件》Peopleware -（5）Ⅰ管理人力资源Ⅳ-质量—若时间允许

20世纪的心理学理论认为，人类的性格主要由少数几个基本本能所主导：生存、自尊、繁衍、领地等。这些本能直接嵌入大脑的“固件”中。我们可以在没有强烈情感的情况下理智地考虑这些本能（就像你现在正在做的那样），但当我…...

编程日记 2025/9/10 14:56:07

人事招聘专员简历模板

模板信息简历范文名称：人事招聘专员简历模板，所属行业：人力资源，模板编号：K8TG60 专业的个人简历模板，逻辑清晰，排版简洁美观，让你的个人简历显得更专业，找到好工作。…...

编程日记 2025/9/12 15:24:10

Java中equals与 “==” 的区别

首先我们要掌握基本数据类型和引用类型的概念基本数据类型： byte，short，int,long,float,double,boolean,char 基本的八大数据类型都各自封装着包装类，提供了更多的方法，并且都是引言类型引用类型： 引…...

编程日记 2025/9/12 15:28:54

20250412_代码笔记_CVRProblemDef

文章目录前言一、get_random_problems 函数分析二、augment_xy_data_by_8_fold 函数分析代码前言该笔记分析代码的功能是生成随机VRP问题的数据，包含仓库坐标、节点坐标和节点需求。对该代码进行改进 20250412-代码改进-拟蒙特卡洛一、get_random_problems 函…...

编程日记 2025/9/10 4:11:28

日期差值 #include <iostream> using namespace std; int month[13][2]{{0,0},{31,31},{28,29},{31,31},{30,30},{31,31},{30,30},{31,31},{31,31},{30,30},{31,31},{30,30},{31,31} }; bool is_leap(int year){return (year%40&&year%100!0||year%4000); }int m…...

编程日记 2025/9/12 15:28:53

JetBrain/IDEA :Request for Open Source Development License

Request for Open Source Development License...

编程日记 2025/9/12 15:31:37

Java学习手册：Java集合框架详解

Java集合框架（Java Collections Framework）是Java语言中用于存储和操作数据集合的一组接口和类的集合。它提供了丰富的数据结构和算法，帮助开发者高效地管理和操作数据。掌握集合框架的使用是Java开发者的必备技能。本文将深入探讨Java集合…...

编程日记 2025/9/10 14:11:37

20250412 机器学习ML -（3）数据降维（scikitlearn）

1. 背景数学小白一枚，看推理过程需要很多时间。好在有大神们源码和DS帮忙，教程里的推理过程才能勉强拼凑一二。 * 留意： 推导过程中X都是向量组表达: shape(feature, sample_n); 和numpy中的默认矩阵正好相反。 2. PCA / KPCA PCAKPCA(Li…...

编程日记 2025/9/12 6:48:53

深入解析系统频率响应：通过MATLAB模拟积分器对信号的稳态响应

稳态响应分析与MATLAB可视化在控制系统中，线性时不变系统的稳态响应是描述输入与输出之间关系的关键。对于一个频率为 ω i \omega_i ωi 的正弦输入 u ( t ) M i sin ⁡ ( ω i t φ i ) u(t) M_i \sin(\omega_i t \varphi_i) u(t)Misin(ωitφi)&…...

编程日记 2025/9/11 18:29:56

[16届蓝桥杯 2025 c++省 B] 画展布置

解题思路理解 ( L ) 的本质当 ( B ) 按平方值从小到大排序后，相邻项的差非负，此时 ( L ) 等于区间内最大平方值与最小平方值的差（数学公式推导） 滑动窗口找最小差值遍历所有长度为 ( M ) 的连续…...

编程日记 2025/9/10 13:15:00

从代码学习深度学习 - Bahdanau注意力 PyTorch版

文章目录 1. 前言为什么选择Bahdanau注意力本文目标与预备知识2. Bahdanau注意力机制概述注意力机制简述加性注意力与乘性注意力对比Bahdanau注意力的数学原理与流程图数学原理流程图可视化与直观理解3. 数据准备与预处理数据集简介数据加载与预处理1. 读取数据集2. 预处理文本…...

编程日记 2025/9/9 4:09:08

具身智能零碎知识点（三）：深入解析 “1D UNet”：结构、原理与实战

深入解析 “1D UNet”：结构、原理与实战【深度学习入门】1D UNet详解：结构、原理与实战指南一、1D UNet是什么？二、核心结构与功能1. 整体架构2. 编码器（Encoder）3. 解码器（Decoder）4. 跳跃连…...

编程日记 2025/8/24 17:50:47

基于论文的大模型应用：基于SmartETL的arXiv论文数据接入与预处理（二）

上一篇文章介绍了arXiv采集处理的任务背景、整体需求，并对数据进行了调研。本文介绍整体方案设计。 4.整体方案设计 4.1.总体流程基于上述调研了解的情况，针对工作需求设计处理流程如下： 下载kaggle数据集作为流程输入，出…...

编程日记 2025/9/12 15:17:43

Halo 设置 GitHub - OAuth2 认证指南

在当今数字化时代，用户认证的便捷性和安全性愈发重要。对于使用 Halo 搭建个人博客或网站的开发者而言，引入 GitHub - OAuth2 认证能够极大地提升用户登录体验。今天，我们就来详细探讨一下如何在 Halo 中设置 GitHub - OAuth2 认证。一、为…...

编程日记 2025/9/9 15:27:44

脑影像分析软件推荐 | AIDA介绍

目录 1.软件界面 2.工具包功能简介 3.软件安装注意事项 1.软件界面 2.工具包功能简介 AIDAmri是一种新型的基于图谱的成像数据分析流程，用于处理小鼠大脑的结构和功能数据，包括解剖MRI、基于扩散张量成像（DTI）的纤维追踪以及基…...

编程日记 2025/9/10 16:29:00

SQL：Relationship（关系）

目录 🔗 什么是 Relationship？ 三种基本关系类型（基于实体间的关系）： 1. 一对一（One-to-One） 2. 一对多（One-to-Many） 3. 多对多（Many-to-Many&#xf…...

编程日记 2025/9/11 0:08:05

【今日三题】压缩字符串(模拟) / chika和蜜柑(topK) / 01背包

⭐️个人主页：小羊 ⭐️所属专栏：每日两三题很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录压缩字符串 (模拟)chika和蜜柑 (topK)01背包压缩字符串 (模拟) 压缩字符串 class Solution { public:string compressStri…...

编程日记 2025/9/10 5:48:36

PHP多维数组

在 PHP 中，多维数组是数组的数组，允许你存储和处理更复杂的数据结构。多维数组可以有任意数量的维度，但通常我们最常用的是二维数组（数组中的数组）。首先来介绍一下一维数组， <?php//一维数组 $strAr…...

编程日记 2025/9/8 18:54:04

智能手机功耗测试

随着智能手机发展，用户体验对手机的续航功耗要求越来越高。需要对手机进行功耗测试及分解优化，将手机的性能与功耗平衡。低功耗技术推动了手机的用户体验。手机功耗测试可以采用powermonitor或者NI仪表在功耗版上进行测试与优化。作为一个多功能的智能终端，手机的功耗组成极…...

编程日记 2025/9/8 9:01:51

0x02.Redis 集群的实现原理是什么？

回答重点 Redis 集群（Redis cluster）是通过多个 Redis 实例组成的，每个主节点实例负责存储部分的数据，并且可以有一个或多个从节点作为备份。具体是采用哈希槽（Hash Slot）机制来分配数据，将整…...

编程日记 2025/9/9 15:17:51

游戏引擎学习第219天

游戏运行时的当前状态目前的工作基本上就是编程，带着一种预期，那就是一切都会很糟糕，而我们需要一个系统来防止它变得更糟。接下来，我们来看看目前的进展。简要说明昨天提到的无限调试信息存储系统昨天我们完成了内存管理的…...

编程日记 2025/9/11 14:31:54

二叉树深度解析：从基础概念到算法实现与应用

一、二叉树的本质定义与核心特性 （一）递归定义与逻辑结构二叉树是一种严格有序的树结构，其递归定义为： 空树：不含任何结点的集合，是二叉树的特殊形态。非空二叉树：由以下三部分组成&#x…...

编程日记 2025/9/10 0:50:25

Model Context Protocol（MCP）模型上下文协议

Model Context Protocol（MCP）模型上下文协议前言一、什么是MCP二、MCP的作用三、MCP与Function call对比四、构建一个简单的MCP DEMO环境准备实现MCP Server运行 ServerMCP Client端配置验证总结前言在Agent时代，将Agent确立为大模型未来…...

编程日记 2025/9/7 14:10:52

代码随想录算法训练营第十六天

LeetCode题目: 530. 二叉搜索树的最小绝对差501. 二叉搜索树中的众数236. 二叉树的最近公共祖先3272. 统计好整数的数目(每日一题) 其他: 今日总结往期打卡 530. 二叉搜索树的最小绝对差跳转: 530. 二叉搜索树的最小绝对差学习: 代码随想录公开讲解问题: 给你一个二叉搜…...

编程日记 2025/9/10 6:27:00

类似东郊到家的上门按摩预约服务系统小程序APP源码全开源

🔥 为什么上门按摩正在席卷全国？ 万亿蓝海市场爆发 2024年中国按摩市场规模突破8000亿，上门服务增速达65% 90后成消费主力，**72%**白领每月至少使用1次上门按摩（数据来源：艾媒咨询） 传统痛点…...

编程日记 2025/9/7 14:15:07

MySQL 5.7.30 Linux 二进制安装包详解及安装指南

MySQL 5.7.30 Linux 安装包详解 mysql-5.7.30-linux-glibc2.12-x86_64.tar 是 MySQL 服务器 5.7.30 版本的 Linux 二进制发行包。 mysql-5.7.30-linux-glibc2.12-x86_64.tar 安装包下载链接：https://pan.quark.cn/s/2943cd209ca5 包信息版本: MySQL 5.7.30 平…...

编程日记 2025/9/6 2:13:28

C语言超详细指针知识（二）

在上一篇有关指针的博客中，我们介绍了指针的基础知识，如：内存与地址，解引用操作符，野指针等，今天我们将更加深入的学习指针的其他知识。 1.指针的使用和传址调用 1.1strlen的模拟实现库函数strlen的功能是…...

编程日记 2025/9/11 22:44:34

Java集合框架详解：核心类、使用场景与最佳实践

文章目录一、Java集合框架概览二、核心集合类详解1. List接口（有序、可重复）**ArrayList****LinkedList****List对比表** 2. Set接口（无序、唯一）**HashSet****TreeSet****Set对比表** 3. Queue接口（队列）…...

编程日记 2025/9/5 1:23:02

模板引擎语法-标签

模板引擎语法-标签文章目录模板引擎语法-标签[toc]一、用于进行判断的{% if-elif-else-endif %}标签二、关于循环对象的{% for-endfor %}标签三、关于自动转义的{% autoescape-endautoescape %}标签四、关于循环对象的{% cycle %}标签五、关于检查值是否变化的{% ifchange %}…...

编程日记 2025/9/12 0:58:06

刘火良FreeRTOS内核实现与应用学习之7——任务延时列表

在《刘火良FreeRTOS内核实现与应用学习之6——多优先级》的基础上：关键是添加了全局变量：xNextTaskUnblockTime ，与延时列表（xDelayedTaskList1、xDelayedTaskList2）来高效率的实现延时。以前需要在扫描就绪列表中所…...

编程日记 2025/9/10 22:31:52

基于红外的语音传输及通信系统设计

标题:基于红外的语音传输及通信系统设计内容:1.摘要本设计聚焦于基于红外的语音传输及通信系统，以解决传统通信方式在特定场景下的局限性为背景，旨在开发一种高效、稳定且具有一定抗干扰能力的语音传输系统。方法上，采用红外技术作为语音信…...

编程日记 2025/9/8 4:43:53

解锁AI未来，开启创新之旅——《GPTs开发详解》与《ChatGPT 4应用详解》两本书的深度解析

前言在这个数字化时代，AI技术正在以前所未有的速度改变我们的生活和工作方式。作为一名AI爱好者和从业者，我深知了解并掌握先进技术的重要性。今天，我想向大家推荐两本极具价值的书籍：《GPTs开发详解》和《ChatGPT 4应用详解》。…...

编程日记 2025/9/6 16:40:51

Linux进程通信入门：匿名管道的原理、实现与应用场景

Linux系列文章目录 Linux系列前言一、进程通信的目的二、进程通信的原理2.1 进程通信是什么2.2 匿名管道通讯的原理三、进程通讯的使用总结前言 Linux进程间同通讯（IPC）是多个进程之间交换数据和协调行为的重要机制，是我们学习Linux操作系…...

编程日记 2025/9/8 10:21:45

[SpringMVC]上手案例

创建工程新建项目，选择maven工程，原型（Archetype）选择maven的webapp，注意名称头尾。会使用到tomcat（因为是javaWeb）。新建的项目结构目录如下，如果没有java目录，需要自…...

编程日记 2025/9/2 0:21:08

kubernetes 入门篇之架构介绍

经过前段时间的学习和实践，对k8s的架构有了一个大致的理解。 1. k8s 分层架构架构层级核心组件控制平面层etcd、API Server、Scheduler、Controller Manager工作节点层Kubelet、Kube-proxy、CRI（容器运行时接口）、CNI（网络插件&…...

编程日记 2025/9/10 0:48:30

说一说 Spring 中的事务

什么是事务？ 事务就是用户定义的一系列执行SQL语句的操作, 这些操作要么完全地执行，要么完全地都不执行， 它是一个不可分割的工作执行单元。 Spring 中的事务是怎么实现的？ Spring事务底层是基于数据库事务和AOP机制的首先对于…...

编程日记 2025/9/7 7:54:30

docker容器安装的可道云挂接宿主机的硬盘目录:解决群晖威联通飞牛云等nas的硬盘挂接问题

基于Docker部署可道云（KodCloud）时，通过挂载宿主机其他磁盘目录可实现高效、安全的数据管理。具体而言，使用绑定挂载（Bind Mounts）将宿主机目录（如/data/disk2）映射到容器内的可道云…...

编程日记 2025/9/7 18:48:20

Oracle 23ai Vector Search 系列之5 向量索引（Vector Indexes）

文章目录 Oracle 23ai Vector Search 系列之5 向量索引Oracle 23ai支持的向量索引类型内存中的邻居图向量索引 (In-Memory Neighbor Graph Vector Index)磁盘上的邻居分区矢量索引 (Neighbor Partition Vector Index) 创建向量索引HNSW索引IVF索引向量索引示例参考 Windows 环…...

编程日记 2025/8/31 22:52:26