XHR 请求 - Javascript

XHR (XMLHttpRequest) 是 JavaScript 常用的网络请求 API，它可以实现异步请求数据，无需刷新整个页面，提高了用户的体验。XHR 可以发送各种类型的请求，包括但不限于文本、XML、JSON 等。让我们一起看看如何利用 XHR 进行请求。

基本用法

要创建 XHR 对象，只需调用 XMLHttpRequest 构造函数即可。

const xhr = new XMLHttpRequest();

XHR 的用法基本和 fetch 或 axios 差不多。XHR 对象除了提供一些属性和方法，还暴露了以下几个事件：

• onreadystatechange：readyState 状态发生变化的时候调用；
• onload：接收到响应后调用；
• onerror：请求出错时调用。

const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function() {
  console.error(xhr.statusText);
};
xhr.send(null);

以上代码发送了一个 GET 请求，并监听 readyState 状态的变化。当 readyState 变为 4 时（这个状态表示请求完成，并且数据已就绪），判断 status 是否为 200，如果是，则输出响应内容；否则，输出错误信息。

POST 请求

POST 请求需要指定请求头的 Content-Type，并且需要将请求的参数传递给 send 方法。

const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function() {
  console.error(xhr.statusText);
};
xhr.send(JSON.stringify(data));

进度事件

XHR 还提供了一些进度事件，比如监听上传进度的 progress 事件和监听下载进度的 progress 事件。

const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onprogress = function (event) {
  if (event.lengthComputable) {
    const percentage = (event.loaded / event.total) * 100;
    console.log(`${percentage}%`);
  }
};
xhr.onload = function () {
  console.log(xhr.responseText);
};
xhr.send();

以上代码可以监听下载进度，输出下载百分比。event.loaded 表示已下载数据的大小，event.total 表示总大小。

注意：部分浏览器只支持在 XHR 请求体中设置 progress 事件，因此需要在服务器端设置头部来允许 Access-Control-Expose-Headers。