#XML

XMLHttpRequest 纯学习文档（XHR 底层原生）

一、基础介绍

1.1 定义

XMLHttpRequest（简称 XHR）：是浏览器专属、原生内置、用于发起网络请求的 JavaScript 对象。

作用：在不刷新整个网页的前提下，向服务器发送请求、接收资源数据。

1.2 技术归属

• 大类：Web 前端开发

• 分类：浏览器原生 API / 网络请求 / AJAX 底层核心

• 依赖环境：仅浏览器

1.3 诞生历史（必背逻辑）

1. 初代：微软 IE 专属 ActiveXObject（非标准、读取 XML、权限极高、不安全）

2. 标准化：推出 XMLHttpRequest，写入 W3C 标准

3. 现状：全部现代浏览器通用，替代 ActiveXObject

一句话：XHR 就是为了解决 ActiveXObject 不标准、不安全、只能 IE 使用而诞生的标准化替代品。

二、运行环境硬性规则（本人实操踩坑总结）

2.1 可用环境

• ✅ Chrome、Firefox、新版 Edge、Safari

• ✅ 所有现代浏览器控制台直接打印可用

2.2 不可用环境

• ❌ Node.js 无 XMLHttpRequest

• 报错：Uncaught ReferenceError: XMLHttpRequest is not defined

2.3 原因底层解释

浏览器 JS 和 Node.js JS 不是同一套运行环境：

• 浏览器：内置 window、DOM、XHR、BOM

• Node.js：内置文件、流、操作系统模块，完全没有浏览器网络API

三、浏览器厂商私有特性（本人观察发现）

3.1 Firefox 独有属性

• mozAnon

• mozSystem

3.2 说明

属于 Firefox 厂商私有拓展属性，不属于 W3C 标准，开发不需要使用，仅做底层了解。

四、核心语法结构（固定模板）

4.1 四大固定步骤

1. 创建对象：new XMLHttpRequest()

2. 配置请求：xhr.open(请求方式, 资源路径)

3. 监听回调：请求成功/失败执行代码

4. 发送请求：xhr.send()

4.2 基础最简代码

// 1. 创建XHR实例
const xhr = new XMLHttpRequest();
// 2. 配置请求方式与地址
xhr.open("GET","1.xml");
// 3. 监听请求完成
xhr.onload = function(){
    if(xhr.status === 200){
        console.log(xhr.responseText);
    }
}
// 4. 发送请求
xhr.send();

五、关键属性（针对学习 XML 专用）

属性名	作用
responseText	返回纯文本字符串
responseXML	直接将返回数据解析为 XML DOM 对象（本人学习重点）
status	HTTP 状态码（200=成功）

六、兼容写法（兼容低版本 IE）

源自参考文档老式代码，衔接本人学习的 ActiveXObject：

// IE5、IE6 使用 ActiveXObject，现代浏览器使用 XHR
let xhr;
if (window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

理解：XHR 就是为了淘汰 ActiveX 而生的标准替代品。

七、Node.js 无法使用 XHR 的解决方案

由于 Node.js 无内置 XHR、无内置 XML 解析器：

7.1 解决方案

使用 npm 第三方包：

• xmlreader

• xml2js

7.2 个人学习原则

本人需要查看 npm 官方源码，观察底层封装逻辑，从而看懂别人如何手动模拟 XML 解析、弥补 Node 缺失的浏览器 API。

八、本人学习定位（专属总结）

1. 我学习 XMLHttpRequest，不是为了上班写业务，而是为了搞懂浏览器原生网络底层。

2. 用来专门读取、解析 XML 文件，打通标记语言与 JavaScript 的数据通道。

3. 分清：**ActiveXObject（淘汰）→ XMLHttpRequest（标准）→ Fetch/Axios（现代）**演进链路。

4. 深刻记住：浏览器JS ≠ Node.js JS，运行环境决定内置API。

九、一句话终极总结

XMLHttpRequest 是浏览器原生、标准化、专门用于异步请求资源、重点兼容 XML 数据的底层网络请求对象，是 AJAX 技术核心，是 ActiveXObject 的正规替代品，仅限浏览器环境使用，Node.js 需要第三方 npm 包补充 XML 解析能力。