XMLHttpRequest

XMLHttpRequest

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

XMLHttpRequest()

• 初始化一个新的XMLHttpRequest对象

const request = new XMLHttpRequest();//生成一个新的对象

• 返回值：该对象必须至少通过调用open（）对其进行初始化，然后再调用send（）将请求发送到服务器。

withCredentials

• 布尔值，默认为false,指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同源请求是无效的。
• 也会被用做响应中cookies 被忽视的标示。默认值是false。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

onerror

• 是XMLHttpRequest是由于错误而失败时调用的函数。

XMLHttpRequest.onerror = callback;//callback是请求失败时执行的函数
var xhr = new XMLHttpRequest();
xhr.onerror = ()=> {
  onError('请求失败')  //执行自己用来处理失败
};

onload

• 是XMLHttpRequest是请求成功时调用的函数。

XMLHttpRequest.onerror = callback;//callback是请求失败时执行的函数

var xhr = new XMLHttpRequest();
 xhr.onload = () => {
    // allow success when 2xx status
    // see https://github.com/react-component/upload/issues/34
    if (xhr.status < 200 || xhr.status >= 300) {//非2xx区间状态值走失败
        return onError(new Error(xhr.statusText));//自定义失败
    }
    let result;
    try {
      // 处理取回的数据(在 xhr.response 中找到)
      result = JSON.parse(xhr.responseText || xhr.response);
    } catch {}
    onSuccess(result);//自定义成功
  };

xhr.statusText

• 有四种状态码，这个属性包含了返回状态对应的文本信息，例如"OK"或是"Not Found"。
• xhr.status //200或0

xhr.responseText

• 只读XMLHttpRequest属性responseText返回在发送请求之后从服务器接收到的文本。

xhr.onload = function () {
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200) {
            console.log(xhr.response);
            console.log(xhr.responseText);
          result = JSON.parse(xhr.responseText || xhr.response);//简写接受结果为该写法
          onSuccess(result);//调用自定义成功方法
        }
    }
};

xhr.open

• XMLHttpRequest.open() 方法初始化一个请求

xhrReq.open(method, url, async);//前两个参数不解释，第三个参数为布尔值

• 一个可选的布尔参数，表示是否异步执行操作，默认为true。如果值为false，send()方法直到收到答复前不会返回。如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常。

xhr.send

• 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

xhrReq.open(method, url, async);//前两个参数不解释，第三个参数为布尔值

• body可选
  在XHR请求中要发送的数据体. 可以是:
  • 可以为Document, 在这种情况下，它在发送之前被序列化.
  • 为 XMLHttpRequestBodyInit, 从 per the Fetch spec （规范中）可以是Blob,BufferSource(en-US),FormData,URLSearchParams, 或者 USVString 对象.
  • null
    如果body没有指定值，则默认值为 null .

FormData

• 接口提供了一种表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。
• 常用方法：FormData.append()
  • FormData.set和 append() 的区别在于，如果指定的键已经存在， FormData.set会使用新值覆盖已有的值，而 append()会把新值添加到已有值集合的后面。

const formData = new FormData();
  formData.append('OSSAccessKeyId', token.accessid);
  formData.append('policy', token.policy);
  formData.append('Signature', token.signature);
  formData.append('key', pathName);
  // 成功后的状态码，默认是 204
  formData.append('success_action_status', '200');
  formData.append('file', file);

xhr.setRequestHeader

• xhr.setRequestHeader()是设置HTTP请求头部的方法。此方法必须在 open()方法和send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。

myReq.setRequestHeader(header, value);//正常使用

xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 if (headers) {
    Object.entries(headers).forEach(([key, value]) => {
      xhr.setRequestHeader(key, String(value));
    });
  }

Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数组。
eg:
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

xhr.abort

• XMLHttpRequest.open() 方法初始化一个请求

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
  xhr.abort();
}

• 如果该请求已被发出，XMLHttpRequest.abort()方法将终止该请求。当一个请求被终止，它的 readyState 将被置为XMLHttpRequest.UNSENT(0)，并且请求的status置为 0。