XMLHttpRequest 对象

关键点

• XMLHttpRequest（XHR）对象似乎是 JavaScript 中用于与服务器异步交换数据的工具，研究表明它允许网页局部更新而不刷新页面。
• 证据倾向于支持它在 AJAX 技术中核心作用，支持 GET、POST 等 HTTP 请求。
• 使用时需注意跨域限制和同步请求的潜在问题，现代开发中 Fetch API 可能更常用。

什么是 XMLHttpRequest？

XMLHttpRequest（简称 XHR）是一个 JavaScript 对象，用于在浏览器和服务器之间进行数据传输。它允许开发者在不刷新整个网页的情况下，从服务器请求数据并更新网页的局部内容。这种技术是 AJAX（Asynchronous JavaScript and XML）的基础，广泛用于现代 Web 开发中。

基本使用步骤

1. 创建对象：使用 var xhr = new XMLHttpRequest(); 创建 XHR 对象。
2. 设置回调函数：通过 onreadystatechange 或 onload 处理响应。
3. 打开连接：用 open 方法初始化请求，指定方法（如 GET）、URL 和是否异步。
4. 发送请求：调用 send 方法发送请求。
5. 处理响应：检查 readyState 和 status，获取数据（如 responseText）。

示例

以下是一个获取 JSON 数据的简单示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

---

详细报告

1. XMLHttpRequest 的定义与背景

XMLHttpRequest（XHR）是一个 JavaScript API 对象，用于在浏览器和服务器之间进行数据传输。它允许开发者在不刷新整个网页的情况下，从服务器请求数据并更新网页的局部内容。这种技术是 AJAX（Asynchronous JavaScript and XML）的基础，广泛用于现代 Web 开发中。尽管名称中包含 “XML”，但它可以传输任何类型的数据，包括 JSON、HTML、纯文本等，不仅仅限于 XML（来源：MDN Web Docs、W3School）。

XHR 的概念最早由微软在 1999 年的 IE5 中引入，作为 ActiveX 组件，后来被其他浏览器采纳，并由 W3C 标准化（来源：CSDN 博客、SegmentFault）。它在 Web 2.0 时代推动了动态网页的开发，如 Gmail 和 Google Maps 的无刷新交互（来源：博客园）。

2. XMLHttpRequest 的用途

• 实现 AJAX：允许网页在不重新加载的情况下更新部分内容，提升用户体验。
• 发送 HTTP 请求：支持 GET、POST、PUT、DELETE 等方法，与服务器进行数据交换。
• 处理服务器响应：可以处理各种数据格式的响应，如 JSON、XML、HTML、纯文本等（来源：W3School、JavaScript.info）。

3. 创建 XMLHttpRequest 对象

在现代浏览器中，创建 XHR 对象使用标准的构造函数：

var xhr = new XMLHttpRequest();

对于旧版 IE（IE5、IE6），需要使用 ActiveXObject，但现在已很少使用（来源：菜鸟教程、CSDN 博客）。现代开发中，直接使用上述方法即可。

4. XMLHttpRequest 的基本使用步骤

以下是 XHR 的典型使用流程（来源：MDN Web Docs、W3School）：

1. 创建对象：

   var xhr = new XMLHttpRequest();

2. 设置回调函数：

• 使用 onreadystatechange 属性设置回调函数，检查请求的状态。
• 或者使用 onload 属性在请求完成时执行回调。
• 示例：
  javascript xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 处理响应数据 } };

2. 打开连接：

• 使用 open 方法初始化请求，指定请求方法、URL 和是否异步。
• 默认情况下，请求是异步的（async = true）。
• 示例：
  javascript xhr.open('GET', 'url', true);

2. 发送请求：

• 使用 send 方法发送请求。如果是 GET 请求，通常不需传递数据；如果是 POST 请求，可以传递数据。
• 示例：
  javascript xhr.send(); // 或 xhr.send(data);

2. 处理响应：

• 在回调函数中检查 readyState 和 status，并处理响应数据。
• readyState 的值：
  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成
• status 的值：
  • 200: 请求成功
  • 404: 未找到资源
  • 500: 服务器错误
• 示例：
  javascript if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); }

5. XMLHttpRequest 的属性和方法

以下是 XHR 的主要属性和方法（来源：MDN Web Docs、JavaScript.info）：

• 属性：
• readyState：请求的状态（0-4）。
• status：HTTP 状态码。
• statusText：HTTP 状态描述。
• responseText：服务器返回的文本数据。
• responseXML：服务器返回的 XML 数据。
• response：根据 responseType 的值返回相应的数据（如 JSON、ArrayBuffer）。
• 方法：
• open(method, url, async)：初始化请求。
• send(body)：发送请求。
• setRequestHeader(header, value)：设置请求头。
• getResponseHeader(header)：获取响应头。
• getAllResponseHeaders()：获取所有响应头。

6. 示例：获取 JSON 数据

以下是一个获取 JSON 数据的完整示例（来源：W3School、JavaScript.info）：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

7. 注意事项

• 跨域请求：受同源策略限制，XMLHttpRequest 不能直接发送跨域请求。需要服务器支持 CORS（Cross-Origin Resource Sharing），通过设置响应头如 Access-Control-Allow-Origin（来源：阮一峰的网络日志、SegmentFault）。
• 异步 vs 同步：默认情况下，请求是异步的（async = true）。同步请求（async = false）会阻塞浏览器的执行，影响用户体验，且从 Gecko 30.0 开始，同步请求在主线程上已被弃用（来源：MDN Web Docs）。
• 错误处理：需要处理请求失败的情况，如网络错误、服务器错误。可以使用 onerror 事件处理程序：

  xhr.onerror = function() {
      console.log('请求错误');
  };

8. 现代替代方案

• Fetch API：更现代的 API，提供更简单的语法和基于 Promise 的异步处理，推荐用于新项目（来源：MDN Web Docs、JavaScript.info）。
• Axios：一个基于 Promise 的 HTTP 库，提供更方便的接口，广泛用于前端开发（来源：CSDN 博客）。

尽管 Fetch API 和 Axios 在现代开发中更受欢迎，但 XMLHttpRequest 仍然在许多遗留系统和需要兼容旧浏览器的场景中被广泛使用（来源：SegmentFault、博客园）。

9. 历史与发展

• 1999 年：微软在 IE5 中引入 XHR，作为 ActiveX 组件（来源：CSDN 博客、简书）。
• 2006 年：W3C 发布 XMLHttpRequest 标准，分为 Level 1 和 Level 2。Level 2 增加了跨域请求、二进制文件支持和进度跟踪等功能（来源：SegmentFault、阮一峰的网络日志）。
• 现代：尽管 Fetch API 和 Axios 更流行，XHR 仍广泛用于兼容性要求高的场景（来源：BuiltIn）。

10. 性能与对比

以下表格比较了 XMLHttpRequest 和 Fetch API 的主要特性（基于 MDN Web Docs 和 JavaScript.info）：

特性	XMLHttpRequest	Fetch API
语法	传统回调或事件驱动	基于 Promise，语法更简洁
跨域支持	需要 CORS，Level 2 增强	原生支持 CORS
错误处理	需要手动检查 status	自动抛出异常，易于捕获
进度跟踪	支持（Level 2）	需要额外的 API（如 ProgressEvent）
浏览器兼容性	广泛支持，包括旧浏览器	现代浏览器，需 polyfill
使用场景	遗留系统、兼容性要求高	新项目、现代 Web 开发

11. 参考资料

• MDN Web Docs: XMLHttpRequest
• W3School: XMLHttpRequest
• JavaScript.info: XMLHttpRequest
• CSDN: XMLHttpRequest 用法介绍
• SegmentFault: 你真的会使用 XMLHttpRequest 吗？

12. 总结

XMLHttpRequest 是 Web 开发中一个重要的工具，用于在浏览器和服务器之间进行数据传输。它通过支持异步请求和各种数据格式的处理，极大地提升了 Web 应用程序的交互性和用户体验。虽然在现代开发中出现了更先进的替代方案如 Fetch API 和 Axios，但理解 XMLHttpRequest 的工作原理对于掌握 Web 前端开发的基础知识至关重要，尤其在需要兼容旧浏览器的场景中。