Javascript 如何获取 xhr

XMLHttpRequest （XHR）对象用于与服务器交互。可以使用 JavaScript 获取并处理来自服务器的响应。

创建 XMLHttpRequest 对象

可以通过 JavaScript 中的 XMLHttpRequest（XHR）对象来创建该对象。XMLHttpRequest 对象还可以用于与服务器交换数据。

let xhr = new XMLHttpRequest();

XHR 对象方法

XHR 对象有多个常用方法，可以使用这些方法在 JavaScript 中向服务器发送请求和从服务器获取响应。

open() 方法

使用 XHR 对象的 open() 方法来指定请求的类型、URL，以及是否异步处理请求。 open() 方法接受 3 个参数。

// 带有 GET 请求的 XHR
xhr.open('GET', '/url', true);

// 带有 POST 请求的 XHR
xhr.open('POST', '/url', true);

send() 方法

使用 XHR 对象的 send() 方法来将请求发送到服务器。可以使用该方法向服务器发送有关数据。如果请求是异步的，则 send() 方法将立即返回。

xhr.send();

setRequestHeader() 方法

使用 XHR 对象的 setRequestHeader() 方法，设置请求头。

xhr.setRequestHeader('Content-Type', 'application/json');

abort() 方法

使用 XHR 对象的 abort() 方法来取消任何当前正在运行的异步操作。

xhr.abort();

XHR 对象事件

可以通过 XHR 对象的事件，来检测请求状态并在响应就绪时执行代码块。

onreadystatechange

XHR 对象在请求的不同状态下触发 onreadystatechange 事件。

xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(xhr.response);
  }
}

onload

onload 事件仅在请求成功完成后才触发，即 status 为 200。

xhr.onload = function() {
  console.log(xhr.response);
}

onerror

在请求失败时，将触发 onerror 事件。

xhr.onerror = function() {
  console.log('Error occurred.');
}

完整代码片段

let xhr = new XMLHttpRequest();
xhr.open('GET', '/url', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();

xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(xhr.response);
  }
}

xhr.onload = function() {
  console.log(xhr.response);
}

xhr.onerror = function() {
  console.log('Error occurred.');
}

以上是 JavaScript 如何获取 XHR 的介绍。