http request-01-XMLHttpRequest XHR 简单介绍

老马啸西风2020年3月27日大约 14 分钟

以下是一些官方学习 XMLHttpRequest (XHR) 的资源网址：

MDN Web Docs - XMLHttpRequest
- MDN XMLHttpRequest Documentation
- 这是最权威和详细的 XHR 文档，提供了关于如何使用 XMLHttpRequest 的全面介绍，包括属性、方法、事件和示例代码。
WhatWG - XMLHttpRequest Standard
- WhatWG XMLHttpRequest Standard
- WhatWG 的标准文档详细描述了 XMLHttpRequest 的规范和实现细节，是了解其正式标准的良好资源。
W3C - XMLHttpRequest Level 2 Specification
- W3C XMLHttpRequest Level 2
- W3C 的规范文档提供了 XMLHttpRequest Level 2 的详细描述，包括新增的功能和改进。

这些资源将帮助你深入理解 XMLHttpRequest 的功能、用法和规范。

详细介绍一下 XHR

XMLHttpRequest（XHR）是一个用于在客户端和服务器之间进行异步 HTTP 请求的 API，广泛用于动态更新网页内容，而无需重新加载整个页面。

尽管它最初是为了处理 XML 数据而设计的，但它现在支持多种数据格式，并已成为 Web 开发中重要的工具。

1. 基本概念

XMLHttpRequest 提供了在客户端（如浏览器）与服务器之间进行异步通信的能力，使得网页可以在不重新加载页面的情况下更新内容。

它的主要用途包括动态加载数据、提交表单以及与服务器进行实时交互。

2. 核心方法和属性

2.1 创建请求

const xhr = new XMLHttpRequest();

2.2 配置请求

open(method, url, async, user, password): 初始化请求。
- method: HTTP 方法（如 GET、POST）。
- url: 请求的 URL。
- async: 是否异步（true 或 false）。
- user 和 password: 可选的身份验证信息。

xhr.open('GET', 'https://example.com/data', true);

2.3 发送请求

send(body): 发送请求。body 参数用于发送数据（对于 GET 请求，通常为空）。

xhr.send();

2.4 事件处理

onload: 请求成功完成时触发。
onerror: 请求失败时触发。
onprogress: 请求进度更新时触发（适用于进度监控）。
onabort: 请求被取消时触发。
onreadystatechange: 请求状态改变时触发。

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status  {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(`Request failed with status ${xhr.status}`));
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

// 使用
fetchData('https://example.com/data')
  .then(response => console.log('Response:', response))
  .catch(error => console.error('Error:', error));

7. 处理不同数据格式

实践: 根据服务器响应的 Content-Type 处理数据。例如，如果响应是 JSON 格式，则调用 responseText 并使用 JSON.parse 解析。
理由: 正确处理不同的数据格式确保数据解析的准确性。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    const contentType = xhr.getResponseHeader('Content-Type');
    if (contentType.includes('application/json')) {
      const data = JSON.parse(xhr.responseText);
      console.log('JSON data:', data);
    } else {
      console.log('Response:', xhr.responseText);
    }
  }
};
xhr.send();

8. 保持代码简洁

实践: 尽量保持 XHR 请求代码简洁，避免过多的嵌套和复杂逻辑。封装常用逻辑为函数可以提高可重用性。
理由: 简洁的代码更易于维护和理解。

function createRequest(method, url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status  {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
  }
});

总结

遵循这些最佳实践可以帮助你在使用 XMLHttpRequest 时编写更高效、可靠和易于维护的代码。

虽然 fetch API 提供了更现代的接口，但了解和掌握 XMLHttpRequest 仍然在许多情况下很重要，尤其是在处理兼容性问题时。

参考资料

贡献者

binbin.hou