深入剖析 JavaScript 的 XMLHttpRequest(XHR)

嗨，大家好，我是墩墩大魔王丶。在前端开发中，与服务器进行数据交互是必不可少的一部分。而 JavaScript 的 XMLHttpRequest(XHR) 是实现这一目标的关键工具之一。它允许我们通过 JavaScript 发送 HTTP 请求到服务器，并获取服务器返回的数据，从而实现异步通信。在本文中，我们将深入探讨 XMLHttpRequest(XHR)，了解它的工作原理、常见状态以及一些技术细节，并通过丰富的示例来展示其强大之处。

XMLHttpRequest 的方法

XMLHttpRequest（XHR）对象提供了一系列方法，用于在 JavaScript 中发送 HTTP 请求并处理服务器的响应。以下是 XHR 对象常用的方法概述：

open(method, url[, async[, user[, password]]])：
- 用于初始化一个请求。
- 参数：
  - method：指定请求的 HTTP 方法，如 "GET"、"POST" 等。
  - url：指定请求的 URL。
  - async（可选）：一个可选的布尔值参数，表示请求是否异步，默认为 true。
  - user（可选）：一个可选的用户名，用于基本身份验证。
  - password（可选）：一个可选的密码，用于基本身份验证。
- 该方法调用后，请求的配置信息被发送，但请求本身并未发出。
send([body])：
- 用于发送 HTTP 请求。
- 参数：
  - body（可选）：要发送的请求主体数据，如 POST 请求的数据。
- 如果请求是异步的，则该方法会立即返回，不会阻塞代码执行。
setRequestHeader(name, value)：
- 用于设置 HTTP 请求头。
- 参数：
  - name：要设置的请求头名称。
  - value：要设置的请求头的值。
abort()：
- 用于取消当前的 HTTP 请求。
- 调用该方法后，请求将被中止，并且不会触发任何事件。
getResponseHeader(name)：
- 用于获取指定的响应头。
- 参数：
  - name：要获取的响应头名称。
- 返回指定名称的响应头的值，如果不存在，则返回 null。
getAllResponseHeaders()：
- 用于获取所有的响应头。
- 返回一个包含所有响应头的字符串。
overrideMimeType(mime)：
- 用于重写服务器返回的 MIME 类型。
- 参数：
  - mime：要重写的 MIME 类型字符串。

下面是一些使用 XMLHttpRequest 对象的示例代码，演示了如何使用它的方法发送请求和处理响应：

初始化请求并发送 GET 请求：

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('GET 请求成功:', xhr.responseText);
    } else {
      console.error('GET 请求失败:', xhr.status);
    }
  }
};

初始化请求并发送 POST 请求：

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/save', true);
xhr.setRequestHeader('Content-Type', 'application/json');

var data = JSON.stringify({ username: 'example', password: '123456' });
xhr.send(data);

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('POST 请求成功:', xhr.responseText);
    } else {
      console.error('POST 请求失败:', xhr.status);
    }
  }
};

获取响应头信息：

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var contentType = xhr.getResponseHeader('Content-Type');
      console.log('响应内容类型:', contentType);
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

取消请求：

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

// 某些条件下取消请求
xhr.abort();

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 0) {
      console.log('请求被取消');
    } else if (xhr.status === 200) {
      console.log('请求成功:', xhr.responseText);
    } else {
      console.error('请求失败:', xhr.status);
    }
  }
};

技术细节：不同的响应状态和状态码

readyState 值	描述
0 (UNSENT)	XHR 对象已创建，但尚未调用 `open()` 方法。
1 (OPENED)	`open()` 方法已调用，但尚未调用 `send()` 方法。
2 (HEADERS_RECEIVED)	`send()` 方法已调用，并且头部和状态已经可获得。
3 (LOADING)	下载数据中；`responseText` 属性已经包含部分数据。
4 (DONE)	数据已下载完毕；可以通过 `responseText` 或 `responseXML` 属性获取完整的响应数据。

常见的 HTTP 状态码有以下几种：

状态码	描述
200	请求成功。
404	请求的资源未找到。
500	服务器内部错误。
等等	具体的状态码可根据实际情况而定。

结论

通过本文的介绍，我们深入了解了 JavaScript 的 XMLHttpRequest(XHR) API，并学习了如何使用它来与服务器进行通信。XHR 提供了一种简单而强大的机制，使得我们可以通过 JavaScript 发送各种类型的 HTTP 请求，并获取服务器返回的数据。通过丰富的示例和技术细节，我们希望能够帮助你更好地理解和应用这一重要的前端技术。

希望这篇文章能帮助大家更好地理解 XMLHttpRequest(XHR) ，欢迎大家多多交流，共同进步！💐