XMLHttpRequest 对象（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：走进浏览器与服务器的对话世界

在网页开发中，我们经常需要让网页与服务器进行数据交互，比如获取用户信息、提交表单或实时更新内容。这个看似简单的数据交换过程背后，隐藏着一个至关重要的技术角色——XMLHttpRequest 对象。它就像一位经验丰富的快递员，负责在浏览器和服务器之间传递数据包裹，确保信息能够安全、高效地送达。

XMLHttpRequest 对象自 2005 年首次在 IE 浏览器中实现以来，已经成为前端开发的核心工具之一。尽管现代 JavaScript 已经有了更简洁的 Fetch API 和第三方库，但理解 XMLHTTPRequest 的工作原理，仍然是掌握浏览器网络通信机制的重要基础。

XMLHTTPREQUEST 对象的基础认知

什么是 XMLHTTPREQUEST？

XMLHttpRequest（简称 XHR）是一个内置在浏览器中的 JavaScript 对象，它允许网页通过 HTTP 协议与服务器进行异步通信。想象一下，当你在超市自助结账机扫描商品时，机器需要实时向服务器查询价格信息——这个过程就类似 XHR 的工作模式：发出请求，等待响应，处理数据。

历史背景与演变

• 诞生背景：在 AJAX（Asynchronous JavaScript and XML）概念提出之前，网页的交互性非常有限。用户每次操作都需要刷新整个页面，体验极差。XHR 的出现打破了这一限制，实现了在不刷新页面的情况下更新局部内容。
• 命名由来：XML（可扩展标记语言）曾是数据传输的主流格式，因此该对象最初设计时专注于处理 XML 格式的数据。随着 JSON 的流行，XHR 也支持了更广泛的 MIME 类型。

核心功能与优势

创建与使用 XMLHTTPREQUEST 的基础步骤

创建对象实例

// 创建对象（兼容不同浏览器）
let xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // 标准浏览器
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE 兼容模式
}

注意：现代浏览器已全面支持原生 XMLHttpRequest，无需处理旧版兼容逻辑。

发送 GET 请求

// 1. 初始化请求（方法、URL、是否异步）
xhr.open('GET', '/api/data', true);

// 2. 定义响应处理函数
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('响应数据：', xhr.responseText);
    }
};

// 3. 发送请求
xhr.send();

关键属性与方法解析

进阶用法：掌握核心概念与技巧

状态机模型（ReadyState）

// 0:未初始化，1:加载中，2:已加载，3:交互中，4:完成
switch(xhr.readyState) {
    case 0:
        console.log('请求尚未初始化');
        break;
    case 4:
        console.log('请求已完成');
        break;
    default:
        console.log('请求进行中');
}

异步 vs 同步请求

// 异步模式（默认）
xhr.open('GET', '/api', true); // 第三个参数设为 true
// 同步模式（慎用）
xhr.open('GET', '/api', false); // 阻塞主线程

比喻：同步请求就像堵车时的单行道，所有车辆必须排队等待；而异步请求如同立交桥系统，允许其他操作并行进行。

设置超时时间

xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function() {
    console.log('请求超时');
};

错误处理

xhr.onerror = function() {
    console.error('请求失败:', xhr.status);
};

跨域请求（CORS）

// 服务器需设置 Access-Control-Allow-Origin 头
xhr.open('GET', 'https://api.example.com/data', true);

实战案例：构建天气查询功能

需求分析

设计一个输入城市名称，实时显示天气信息的网页功能。

HTML 结构

<input type="text" id="cityInput" placeholder="请输入城市名称">
<button onclick="getWeather()">查询</button>
<div id="weatherResult"></div>

JavaScript 实现

function getWeather() {
    const city = document.getElementById('cityInput').value;
    const xhr = new XMLHttpRequest();
    
    // 模拟 API 调用（实际需替换为真实接口）
    xhr.open('GET', `/weather?city=${city}`, true);
    
    xhr.onload = function() {
        if (this.status === 200) {
            const data = JSON.parse(this.responseText);
            document.getElementById('weatherResult').innerHTML = 
                `当前温度：${data.temperature}℃<br>` +
                `天气状况：${data.condition}`;
        } else {
            console.error('请求失败:', this.status);
        }
    };
    
    xhr.onerror = function() {
        console.error('网络错误');
    };
    
    xhr.send();
}

XMLHTTPREQUEST 与现代 API 的对比

与 Fetch API 的差异

选择建议

• 使用 XHR 场景：需要精细控制请求生命周期（如实时监控上传进度）
• 使用 Fetch 场景：现代项目中追求简洁代码和 Promise 语法

常见问题与解决方案

问题 1：跨域请求被拦截

解决方案：确保目标服务器配置 CORS 头，或使用代理服务器转发请求。

问题 2：数据格式解析错误

解决方案：检查 responseType 属性设置：

// 获取 JSON 格式数据
xhr.responseType = 'json';

问题 3：移动端兼容性

解决方案：对于老旧设备，可使用 XDomainRequest 作为替代方案（注意仅适用于 IE 8+）。

结论：掌握网络通信的底层逻辑

通过本文的学习，我们系统掌握了 XMLHTTPRequest 对象的核心概念、实现方法和实际应用。这个看似传统的技术，至今仍活跃在各类 Web 应用中，特别是在需要精细控制请求流程的场景下，它的价值依然不可替代。理解其工作原理，不仅能帮助开发者应对日常开发中的各种网络通信需求，更能为深入理解现代前端框架（如 Angular、React）中的 HTTP 客户端设计提供底层视角。

在实际开发中，建议根据项目需求选择合适的技术方案。对于追求简洁代码的现代项目，可以优先考虑 Fetch API 或第三方库（如 Axios）；而需要深度定制的场景，XMLHttpRequest 对象仍然是不可或缺的利器。掌握这一技术，你将更从容地应对浏览器与服务器之间的每一次对话。