XMLHttpRequest 介绍

来源：MDN 开发者社区:XMLHttpRequest

Use XMLHttpRequest (XHR) objects to interact with servers.
You can retrieve data from a URL without having to do a full page refresh.
This enables a Web page to update just part of a page without disrupting what the user is doing.
XMLHttpRequest is used heavily in Ajax programming.

翻译：
使用 XHR 对象和服务进行交互。
你可以通过URL取回数据，并且不会刷新整个页面。
这样可以只更新页面的一部分，不会影响整个页面。不会影响用户继续操作使用页面其他部分。
XMLHttpRequest 是 Ajax 的核心。

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp).

翻译：
尽管它的名字中含有XML, 但是它却能从服务器取回任何类型的数据，不仅仅是XML, 它还它支持HTTP以外的其他协议(文件下载和ftp)。

If your communication needs involve receiving event or message data from the server, consider using server-sent events through the EventSource interface. For full-duplex communication, WebSockets may be a better choice.

翻译：
如果您的通信需要涉及从服务器接收事件或消息数据，考虑使用server-sent events EventSource接口。对于全双工（即时）通信，WebSockets可能是更好的选择。

构造函数：

XMLHttpRequest()

参数：无

返回：XMLHttpRequest 实例对象，如果想看到效果，至少调用实例的 open()和send() 方法。

实例属性：

实例对象还继承 XMLHttpRequestEventTarget and of EventTarget,也就表同时能使用 XMLHttpRequestEventTarget 和 EventTarget 所拥有的属性和方法.

onreadystatechange 状态readyState改变时，触发的事件。
readyState 只读
response 只读
responseText 只读
responseType 设置返回数据类型
responseURL 只读
responseXML 只读
status 只读
statusText 只读
timeout 设置超时时间
upload 只读

使用示例：通过状态码判断请求是否成功

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://github.com/webmrxu/webmrxu/file-list/master', true);
xhr.onload = function () {
  if (xhr.status === 200) {
      console.log('请求成功');
  }
};
xhr.send(null);

实例方法

abort() 如果请求已经被发送,则立刻中止请求.
getAllResponseHeaders() 以字符串的形式返回所有用CRLF分隔的响应头。
getResponseHeader() 返回包含指定响应头的字符串。
open() 初始化一个请求。该方法只能JavaScript代码中使用
- 参数：open(method, url, async, user, password), 常用参数为前3个. method: 请求方法; url: 请求路径; async: 取值布尔类型，默认为true: 异步， false: 同步
overrideMimeType() 重写由服务器返回的MIME type。
send() 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。
- 参数：一个参数send(body), 请求主体数据（request's body），如果method 为 get、delete, 则发送的数据（body）将会忽略。只有当 method 为 post、put 等含有请求体的请求方法，数据才会发送到后端。
- 参数类型：string,Blob, BufferSource, FormData, URLSearchParams, ReadableStream, or USVString object. 发送数据前需要将数据序列化，注意：不能直接发送对象。
- 参数默认值：null
setRequestHeader() 设置HTTP请求头的值。您必须在open()之后、send()之前调用setRequestHeader()这个方法。

event 事件

onloadstart 当程序开始加载时，loadstart 事件将被触发。
onprogress 进度事件会被触发用来指示一个操作正在进行中。
onabort 当一个资源的加载已中止时，将触发 abort事件。
onerror 当一个资源加载失败时会触发error事件，具体情况各不相同，error事件可以在各种API中使用。
onload 当一个资源及其依赖资源已完成加载时，将触发load事件。
ontimeout 当进度由于预定时间到期而终止时，会触发timeout 事件。
onloadend loadend事件总是在一个资源的加载进度停止之后被触发
onreadystatechange 当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。

event事件使用事例：http超时提示请求超时

var request = new XMLHttpRequest();
request.ontimeout = function handleTimeout() {
      alert('请求超时')；
};

xhr.send(body) body数据, 截图中使用的post提交方式。使用的是axio http 插件，object body数据被序列化后，数据转为字符串。

axios 核心xhr代码

以下为axios 封装http请求代码，我只挑选了有关XHR 的代码，并添加了注释，完整代码地址课访问axios xhr 核心代码

// axios 核心代码
module.exports = function xhrAdapter(config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
    var requestData = config.data;
    var requestHeaders = config.headers;
    // 新建XMLHttpRequest 实例
    var request = new XMLHttpRequest();
    //初始化一个请求。
    request.open(config.method.toUpperCase(), buildURL(config.url, config.params, config.paramsSerializer), true);
    // 设置超时事件
    request.timeout = config.timeout;
    // 处理readystate状态改变事件，axios 核心逻辑，判断请求是否成功
    request.onreadystatechange = function handleLoad() {
      if (!request || request.readyState !== 4) {
        return;
      }
      if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
        return;
      }
      // Prepare the response
      var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
      var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
      var response = {
        data: responseData,
        status: request.status,
        statusText: request.statusText,
        headers: responseHeaders,
        config: config,
        request: request
      };
      settle(resolve, reject, response);
      // Clean up request
      request = null;
    };
    request.onabort = function handleAbort() {
      // 处理请求中断
    };
    request.onerror = function handleError() {
      // 处理请求错误
    };
    request.ontimeout = function handleTimeout() {
      // 处理请求超时
    };
    // 处理添加请求头,open()之后、send()之前调用setRequestHeader()这个方法。
    if ('setRequestHeader' in request) {
      utils.forEach(requestHeaders, function setRequestHeader(val, key) {
        if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
          // Remove Content-Type if data is undefined
          delete requestHeaders[key];
        } else {
          // Otherwise add header to the request
          request.setRequestHeader(key, val);
        }
      });
    }
    // 发红http请求
    request.send(requestData);
  });
};

ajax核心，XMLHttpRequest 介绍