DOM-XMLHttpRequest对象

DOM-XMLHttpRequest对象是JavaScript中的一个内置对象，它提供了在Web浏览器中与服务器进行交互的方法和接口。XMLHttpRequest对象可以在不重新加载页面的情况下，向服务器发送数据并获取响应。它是实现Ajax的核心。

创建XMLHttpRequest对象

在JavaScript中创建XMLHttpRequest对象的方法有两种：

使用XMLHttpRequest构造函数

let xhr = new XMLHttpRequest();

使用ActiveXObject构造函数(IE8及以下版本)

let xhr;
if (window.ActiveXObject) {
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
   xhr = new XMLHttpRequest();
}

XMLHttpRequest方法

以下是XMLHttpRequest对象的主要方法：

open()方法

打开一个新的请求，该方法有三个参数：请求方法、URL和异步标志。请求方法可以是GET、POST等；URL是请求的服务器地址；异步标志设置为true表示请求是异步的，false表示同步的。

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

send()方法

发送请求，该方法接受一个参数，即要发送的数据。如果为GET请求，则不需要参数。如果是POST请求，则需要将数据放在send()方法中。

xhr.send(data);

abort()方法

停止请求，从而中止与服务器的交互。

xhr.abort();

setRequestHeader()方法

设置HTTP请求头。

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

getAllResponseHeaders()方法

获取所有的响应头。

xhr.getAllResponseHeaders();

getResponseHeader()方法

获取指定响应头的值。

xhr.getResponseHeader('Content-Type');

XMLHttpRequest事件

XMLHttpRequest对象还有一些事件，在请求和响应的过程中可以使用这些事件来监听状态的变化。

以下是XMLHttpRequest对象的主要事件：

onreadystatechange事件

每当readyState属性变化时会触发onreadystatechange事件。这个事件有一个回调函数，用于处理readyState的状态变化。readyState的几个状态值是：

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已准备好

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

onerror事件

请求错误时会触发onerror事件。

xhr.onerror = function() {
  console.log('There was an error!');
};

onabort事件

停止请求时会触发onabort事件。

xhr.onabort = function() {
  console.log('Aborted');
};

onload事件

当请求成功完成时会触发onload事件。

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

参考链接：XMLHttpRequest