XMLHttpRequest

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

构造函数
XMLHttpRequest()

该构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。

创建 XMLHttpRequest 对象的语法：

var iable = new XMLHttpRequest();
方法
XMLHttpRequest.open(method,url,async) 

初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
XMLHttpRequest.send(string)

将请求发送到服务器。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

string：仅用于 POST 请求
GET 请求

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
 在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
 POST 请求

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
XMLHttpRequest.setRequestHeader(header,value)

设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。向请

header: 规定头的名称
value: 规定头的值
XMLHttpRequest.abort()

如果请求已被发出，则立刻中止请求。

事件
onreadystatechange

每当 readyState 改变时，就会触发 onreadystatechange 事件。

abort

当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。

也可以使用 onabort 属性。

error

当 request 遭遇错误时触发。

也可以使用 onerror 属性

load

XMLHttpRequest请求成功完成时触发。

也可以使用 onload 属性.

loadend

当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。

也可以使用 onloadend 属性。

loadstart

传输开始。

也可以使用 onloadstart 属性。

progress

当请求接收到更多数据时，周期性地触发。

也可以使用 onprogress 属性。

timeout

在预设时间内没有接收到响应时触发。

　　xhr.ontimeout = function(event){
 
　　　　alert('请求超时！');
 
　　}
也可以使用 ontimeout 属性。

属性
XMLHttpRequest.readyState 只读

返回 一个无符号短整型（unsigned short）数字，代表请求的状态码，等于4表示数据已经接收完毕。

XMLHttpRequest.status 只读

服务器返回的状态码，等于200表示一切正常。

XMLHttpRequest.response 只读

返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应实体（response entity body）。

XMLHttpRequest.responseText 只读

返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。

XMLHttpRequest.responseXML 只读

返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。

XMLHttpRequest.responseType

一个用于定义响应类型的枚举值（enumerated value）。

XMLHttpRequest.responseURL 只读

返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。

XMLHttpRequest.statusText 只读

服务器返回的状态文本。

XMLHttpRequest.timeout

一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。

有时，ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。

xhr.timeout = 3000;
上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数。 

XMLHttpRequestEventTarget.ontimeout

当请求超时调用的 event handler。

XMLHttpRequest.upload 只读

XMLHttpRequestUpload，代表上传进度。

XMLHttpRequest.withCredentials

一个布尔值 (en-US)，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。

响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText

获得字符串形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML

获得 XML 形式的响应数据。

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;
完整实例：将文件流通过XMLHttpRequest发送
const document = await this.$axios({
  method: "POST",
  url: `/api/efast/v1/file/osdownload`,
  headers: {
    authorization:
      "Bearer " + this.$microWidgetProps.token.getToken.access_token,
  },
  data: {
    docid: this.$microWidgetProps.contextMenu.getSelections[0].docid,
  },
});
 
const authrequest = document.data.authrequest;
const header = {};
for (let i = 2; i < authrequest.length; i++) {
  const index = authrequest[i].indexOf(":");
  header[authrequest[i].substring(0, index)] = authrequest[i]
    .substring(1 + index)
    .trim();
}
 
// 文件上传
const _this = this;
fetch(authrequest[1], {
  method: authrequest[0],
  headers: header,
})
  .then((res) => res.blob())
  .then((res) => {
    const blob = new File(
      [res],
      this.$microWidgetProps.contextMenu.getSelections[0].name,
      {
        type:
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      }
    );
 
    const formData = new FormData();
 
    formData.append(
      "FileData",
      blob,
      this.$microWidgetProps.contextMenu.getSelections[0].name
    );
 
    const request = new XMLHttpRequest();
 
    request.open(
      "POST",
      `https://192.168.124.91:18443/webroot/decision/v10/attach/upload?width=32&height=32&filename=${encodeURIComponent(
        this.$microWidgetProps.contextMenu.getSelections[0].name
      )}`
    );
 
    request.setRequestHeader(
      "authorization",
      "Bearer " + localStorage["accessToken"]
    );
 
    request.send(formData);
 
    request.onreadystatechange = function () {
      if (request.readyState == 4 && request.status == 200) {
        try {
          const attachId = JSON.parse(request.responseText).attach_id;
          _this.addStructure(attachId);
        } catch (error) {
          _this.$microWidgetProps.components.toast.error(
            "FineBI仅支持单独登录，请退出FineBI账号后重试。"
          );
        }
      }
    };
  });
XMLHttpRequest：
XMLHttpRequest - Web API 接口参考 | MDN

XMLHttpRequest Level 2 使用指南 - 阮一峰的网络日志

JS XMLHttpRequest入门教程（非常详细）
————————————————
版权声明：本文为CSDN博主「duansamve」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/duansamve/article/details/102596616