XHR 对象使用方法 .open(method, URL) 设置请求配置，有多个参数但是最重要的参数是前两个参数：

1. HTTP 方法，主要是两种 GET检索数据或 POST 发送数据
2. 要发送请求的 URL

// 向图片网站 Unsplash 发出首页异步请求，使用 GET 请求并提供相关 URL
asyncRequestObject.open('GET', 'https://unsplash.com');

<form name="person">
  <input name="name" value="John">
  <input name="surname" value="Smith">
</form>

<script>
  // 从表单预填充 FormData
  let formData = new FormData(document.forms.person);

  // 附加一个字段
  formData.append("middle", "Lee");

  // 将其发送出去
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "/article/xmlhttprequest/post/user");   // 使用 POST 方法
  xhr.send(formData);

  xhr.onload = () => alert(xhr.response);
</script>

HTTP-header 是客户端和服务器通讯时头部信息，对象 xhr 有三种方法设置/读取自定义的 header，以发送附加的信息。

• 方法 xhr.setRequestHeader(name, value) 使用给定的 name 和 value 设置 request header，必须在 open() 之后、send() 之前调用该方法。
  js

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

  Warning

  XMLHttpRequest 的一个特点是不能撤销 setRequestHeader，即一旦设置了 header 就无法撤销了，其他调用会向 header 中添加信息，但不会覆盖它。

  js

  xhr.setRequestHeader('X-Auth', '123');
  xhr.setRequestHeader('X-Auth', '456');
  
  // header 将是：
  // X-Auth: 123, 456
  

• 方法 getResponseHeader(name) 获取响应头中给定 name 的 header（Set-Cookie 和 Set-Cookie2 除外）。
  js

  xhr.getResponseHeader('Content-Type')
  

• 方法 getAllResponseHeaders() 返回除 Set-Cookie 和 Set-Cookie2 外响应头中所有 response header。
  js

  // header 以单行形式返回
  Cache-Control: max-age=31536000
  Content-Length: 4260
  Content-Type: image/png
  Date: Sat, 08 Sep 2012 16:53:16 GMT
  

  
  它们之间的换行符始终为 "\r\n"（不依赖于操作系统），而且name 和 value 之间总是以冒号后跟一个空格 ": " 分隔，基于这些标准格式可以很容易将它们拆分为单个 header。
  js

  // 将所有的 header 拆分为对象 result 的各个属性
  let headers = xhr
    .getAllResponseHeaders()
    .split('\r\n')
    .reduce((result, current) => {
      let [name, value] = current.split(': ');
      result[name] = value;
      return result;
    }, {});
  
  // headers['Content-Type'] = 'image/png'
  

要实际地发送请求，需要调用 XHR 方法 .send() 

虽然请求发出了，但如果不对响应事件作出监视，则请求成功或失败在都没有任何提示。为了监视事件可以设置 XHR 对象的 onload 属性或 onerror 属性。

xhr.upload.onprogress = function(event) {
  // event.loaded 表示已上传字节数，event.total 表示总字节数
  alert(`Uploaded ${event.loaded} of ${event.total} bytes`);
};

xhr.upload.onload = function() {
  alert(`Upload finished successfully.`);
};

xhr.upload.onerror = function() {
  alert(`Error during the upload: ${xhr.status}`);
};

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

xhr.open('POST', 'http://anywhere.com/request');
// ...

可以随时调用方法 xhr.abort() 终止请求，它会触发 abort 事件，且 xhr.status 变为 0

xhr.abort(); // 终止请求

对象 xhr 的状态 state 会随着它的处理进度变化而变化，可以通过属性 xhr.readyState 来了解当前状态。在规范 中提到的对象 xhr 共有 5 个状态，分别用数值表示对应于一种状态，当对象 xhr 状态发生变化时事件 readystatechange 就会被触发

• UNSENT = 0 初始状态
• OPENED = 1 方法 open() 被调用
• HEADERS_RECEIVED = 2 接收到 response header
• LOADING = 3 响应正在被加载（接收到一个数据包）
• DONE = 4 请求完成

在实际的网络请求过程中，对象 xhr 状态以 0 → 1 → 2 → 3 → … → 3 → 4 的顺序转变，每当通过网络接收到一个数据包，就会重复一次状态 3。

xhr.onreadystatechange = function() {
  if (xhr.readyState == 3) {
    // 加载中
  }
  if (xhr.readyState == 4) {
    // 请求完成
  }
};

一旦服务器返回响应，我们访问 xhr 对象的属性获取更详细的信息

• 属性 statusHTTP 状态码（一个数字），如 200，404，403 等，如果出现非 HTTP 错误则为 0（如果是 HTTP 错误返回状态码是 40* 形式）。
• 属性 statusText HTTP 状态消息（一个字符串） 与状态码相对应，如 200 对应于 OK，404 对应于 Not Found，403 对应于 Forbidden 等。
• 属性 response（旧脚本可能用的是 responseText）服务器响应体 response body。

XMLHttpRequest.onload = callback; // callback 是请求成功完成时要执行的函数，

// 请求成功时将响应消息（如 HTML 文件）在终端打印出来
function handleSuccess() {
    // this 指代 XHR 对象
    // this.responseText 保存来自服务器的响应内容
    console.log(this.responseText);
}

asyncRequestObject.onload = handleSuccess; // 请求成功时执行 handleSuccess 函数

XMLHttpRequest.onerror = callback;

function handleError () {
    console.log( '出现错误 😞' );
}

asyncRequestObject.onerror = handleError; // 请求失败时执行 handleError 函数

let xhr = new XMLHttpRequest();
xhr.open('GET', '/article/xmlhttprequest/example/json');

// 预设返回数据类型
xhr.responseType = 'json';

xhr.send();

// 由于预设了返回的数据类型为 JSON，JavaScript 自动解析响应
xhr.onload = function() {
  let responseObj = xhr.response;
  alert(responseObj.message); // Hello, world!
};

function handleSuccess () {
   // 使用函数 JSON.parse() 将数据从 JSON 格式转换为 JavaScript 对象
   const data = JSON.parse( this.responseText );
   console.log( data );
}

asyncRequestObject.onload = handleSuccess;

在函数 fetch() 的第二个参数（可选）配置对象的属性 header 中设置 HTTP 请求的头部信息

fetch(url, {
    headers: {
      'key': value
    }
});

const requestHeaders = new Headers();
requestHeaders.append('key', value);

fetch(url, {
    headers: requestHeaders
})

• Accept-Charset, Accept-Encoding
• Access-Control-Request-Headers
• Access-Control-Request-Method
• Connection
• Content-Length
• Cookie, Cookie2
• Date
• DNT
• Expect
• Host
• Keep-Alive
• Origin
• Referer
• TE
• Trailer
• Transfer-Encoding
• Upgrade
• Via
• Proxy-*
• Sec-*

let promise = fetch(url, {
  method: "GET", // POST，PUT，DELETE，等。
  headers: {
    // 内容类型 header 值通常是自动设置的
    // 取决于 request body
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined // string，FormData，Blob，BufferSource，或 URLSearchParams
  referrer: "about:client", // 或 "" 以不发送 Referer header，
  // 或者是当前源的 url
  referrerPolicy: "no-referrer-when-downgrade", // no-referrer，origin，same-origin...
  mode: "cors", // same-origin，no-cors
  credentials: "same-origin", // omit，include
  cache: "default", // no-store，reload，no-cache，force-cache，或 only-if-cached
  redirect: "follow", // manual，error
  integrity: "", // 一个 hash，像 "sha256-abcdef1234567890"
  keepalive: false, // true
  signal: undefined, // AbortController 来中止请求
  window: window // null
});

// 使用 POST 方法
fetch('url', {
    method: 'POST'
});

// 以 JSON 形式发送 user 对象
let user = {
  name: 'John',
  surname: 'Smith'
};

let response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

let result = await response.json();
alert(result.message);   // User saved.

let formData = new FormData([form]);

<form id="formElem">
  <input type="text" name="name" value="John">
  <input type="text" name="surname" value="Smith">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user', {
      method: 'POST',
      body: new FormData(formElem)   // 发送表单 formElem
    });

    let result = await response.json();
    alert(result.message);
  };
</script>

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 通过解构获取 key/value 对
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1=value1，然后是 key2=value2
}

通过方法 fetch() 发送的网络请求，支持使用 response.body 的方法跟踪下载进度，response.body 是 ReadableStream 对象，类似于 与 response.text()，response.json() 和其他方法可读取响应体，但 response.body 可以通过方法，如 read() 逐块 chunk 读取并监控下载进度。

// 创建一个流读取器 stream reader 读取响应体，代替 response.json() 以及其他方法
const reader = response.body.getReader();

// 在循环中接收响应块 response chunk，并读取每次接受块字节的大小，直到加载完成
while(true) {
  // 当最后一块下载完成时，done 值为 true
  // value 是块字节
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  console.log(`Received ${value.length} bytes`)
}

更详细地控制下载进度（并将响应块「复原」为响应体）的实例可查看 Fetch：下载进度

方法 fetch 核心是基于 promise 处理网络请求，如果想中止网络请求，但在 JavaScript 通常并没有「中止」 promise 的概念，我们可以借用特殊的内建对象 AbortController 来实现。

内建对象 AbortController 可用于中止异步任务，包括 fetch() 发起的网络请求。使用构建函数 AbortController 创建控制器，该对象只有单一的方法 abort() 和单一属性 signal。

当控制器调用 abort() 方法时，事件 abort 就会在 controller.signal 上触发，同时 controller.signal.aborted 属性变为 true。因此可以在 controller.signal 上设置监听器来跟踪事件 abort，并执行相应的处理程序中止 promise；而方法 fetch 在内部集成了它，只要将 controller.signal 作为函数 fetch() 的第二个参数配置对象的属性 signal 的值即可实现监控。

中止方法 fetch 发起的网络请求步骤：

1. 创建一个控制器
   js

   let controller = new AbortController();
   

2. 将 signal 属性传递给 fetch 选项，它会监听 signal 上的事件 abort
   js

   let controller = new AbortController();
   fetch(url, {
     signal: controller.signal
   });
   

3. 调用 controller.abort() 来中止
   js

   controller.abort();
   

// 1 秒后中止
let controller = new AbortController();
setTimeout(() => controller.abort(), 1000);

try {
  let response = await fetch('/article/fetch-abort/demo/hang', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') { // handle abort()
    alert("Aborted!");
  } else {
    throw err;
  }
}

let urls = [...];   // 要并行 fetch 的 url 列表
let controller = new AbortController();

let ourJob = new Promise((resolve, reject) => {   // 其他异步任务
  // ...
  controller.signal.addEventListener('abort', reject);   // 设置事件 abort 监听器
});

let fetchJobs = urls.map(url => fetch(url, {   // fetches
  signal: controller.signal
}));

// 等待完成所有异步任务任务和 fetch 发起的网络请求
let results = await Promise.all([...fetchJobs, ourJob]);

// 如果 controller.abort() 被从其他地方调用，
// 它将中止所有 fetch 和 ourJob

Fetch 基于 Promise，当我们发出 Fetch 请求时，它将自动返回一个 promise 对象，我们可以对其进行监听响应，即通过链式调用为该 promise 对象设置方法 then() 或 catch()

当 Fetch 请求 resolve 时就会将 Response 对象作为 promise 对象的结果，同时会调用 .then() 方法执行处理程序；如果请求发生错误就会调用 .catch() 方法并执行处理程序。

// 当响应的主体数据格式为 JSON 时，对响应对象调用方法 json()
fetch(url).then(function(response) {
    // response 为响应对象，从中提取响应（主体）数据
    return response.json();
});

// 使用 promise 链式调用获取 JSON 格式的 response body
fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

/*---------- 分割线 ----------*/
// 使用 awite 方法，获取 JSON 格式的 response body
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
let commits = await response.json(); // 读取 response body，并将其解析为 JSON
alert(commits[0].author.login);

/*---------- 分割线 ----------*/
// 使用方法 response.text() 获取纯文本格式的 response body
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
let text = await response.text(); // 将 response body 读取为文本
alert(text.slice(0, 80) + '...');   // 截取前80个字符

使用响应对象属性 response.headers 访问 Response header 响应表头，它类似于 Map （但不是真正的 Map）具有类似的方法，即按键/名称 name 获取各个值 header，或使用循环结构迭代其中的元素。

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// 获取一个 header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// 迭代所有 header
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

一个 简单的请求 是指满足以下两个条件的请求

• 简单的方法 GET，POST 或 HEAD
• 简单的 header 仅允许自定义下列 header：
  • Accept，
  • Accept-Language，
  • Content-Language，
  • Content-Type 的值为 application/x-www-form-urlencoded，multipart/form-data 或 text/plain。

如果一个请求是跨源的，浏览器始终会向 HTTP 请求添加 Origin header，它包含了确切的源 domain/protocol/port 但没有路径。

// 从 https://javascript.info/page 请求 https://anywhere.com/request 的 header
GET /request
Host: anywhere.com
Origin: https://javascript.info
// ...

然后服务器接收到该请求时可以检查 Origin，如果同意接受这样的请求，就会在响应中添加一个特殊的 header Access-Control-Allow-Origin，该 header 包含了允许的源（在我们的示例中是 https://javascript.info）或者一个星号 *，然后响应成功，否则报错。

// 带有服务器许可的响应
200 OK
Content-Type:text/html; charset=UTF-8
Access-Control-Allow-Origin: https://javascript.info

对于跨源请求，默认情况下 JavaScript 只能访问「简单」response header，访问任何其他 response header 都将导致 error

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

浏览器扮演受被信任的中间人的角色，决定是否允许跨源请求的发送：

• 它确保发送的跨源请求带有正确的 Origin
• 它检查响应中的许可 Access-Control-Allow-Origin 是否存在，如果存在则允许 JavaScript 访问响应，否则将失败并报错

除了满足简单请求限制的两种条件的请求以外，任何其他请求都被认为是「非简单请求」，如具有 PUT 方法或 API-Key HTTP-header 的请求。

之前没有人能够设想网页能发出这些复杂的非简单请求，因此当我们尝试发送一个非简单请求时，浏览器会发送一个特殊的「预检」preflight 请求到服务器，以询问服务器是否接受此类跨源请求，除非服务器明确通过 header 进行确认，否则非简单请求不会被发送。

预检请求使用 OPTIONS 方法，它没有 body，但是有两个 header：

• Access-Control-Request-Method header 带有非简单请求的方法。
• Access-Control-Request-Headers header 提供一个以逗号分隔的非简单 HTTP-header 列表。

如果服务器同意处理请求那么它会进行响应，此响应的状态码应该为 200，没有 body，具有 header：

• Access-Control-Allow-Methods 必须具有允许的方法。
• Access-Control-Allow-Headers 必须具有一个允许的 header 列表。
• Access-Control-Max-Age header 可以指定缓存此权限的秒数，因此浏览器不是必须为满足给定权限的后续请求发送预检。

// 发送非简单请求
let response = await fetch('https://site.com/service.json', {
  method: 'PATCH',   // 方法 PATCH 并非简单请求限制三个中之一
  headers: {
    'Content-Type': 'application/json',   // Content-Type 不是简单请求限制三个中之一
    'API-Key': 'secret'   // 含有 API-Key header
  }
});

非简单跨域请求步骤：

1. 在发送请求前，浏览器会自己发送预检请求 preflight request
   js

   OPTIONS /service.json
   Host: site.com
   Origin: https://javascript.info
   Access-Control-Request-Method: PATCH
   Access-Control-Request-Headers: Content-Type,API-Key
   

   • 方法：OPTIONS
   • 路径与主请求完全相同：/service.json
   • 特殊跨源头：
     • Origin 来源。
     • Access-Control-Request-Method 请求方法。
     • Access-Control-Request-Headers 以逗号分隔的「非简单」header 列表。
   Tip

   预检请求发生在后台，它对 JavaScript 不可见。JavaScript 仅获取对主请求的响应，如果没有服务器许可，则获得一个 error。

2. 服务应返回预检响应
   当服务应响应状态 200 并包括以下 header 就表示允许后续通信，否则会触发错误。
   • Access-Control-Allow-Methods: PATCH
   • Access-Control-Allow-Headers: Content-Type,API-Key。
   
   当浏览器看到 PATCH 在 Access-Control-Allow-Methods 中，Content-Type,API-Key 在列表 Access-Control-Allow-Headers 中，它将发送主请求。
   Tip

   如果服务器将来期望其他方法和 header 可以通过添加到列表中来预先允许它们

   md

   200 OK
   Access-Control-Allow-Methods: PUT,PATCH,DELETE
   Access-Control-Allow-Headers: API-Key,Content-Type,If-Modified-Since,Cache-Control
   Access-Control-Max-Age: 86400
   

   Tip

   此外预检响应会缓存一段时间，该时间由 Access-Control-Max-Age header 指定（86400 秒，一天），因此后续请求将不会导致预检。假设它们符合缓存的配额，则将直接发送它们。

3. 预检成功后，浏览器现在发出主请求，其算法与简单请求的算法相同，主请求具有 Origin header（因为它是跨源的）
   js

   PATCH /service.json
   Host: site.com
   Content-Type: application/json
   API-Key: secret
   Origin: https://javascript.info
   

4. 服务器作出主响应，需要添加 Access-Control-Allow-Origin，然后 JavaScript 可以读取主服务器响应了。
   js

   Access-Control-Allow-Origin: https://javascript.info
   

默认情况下，跨源请求不会带来任何凭据（cookies 或者 HTTP 认证（HTTP authentication））。

这对于 HTTP 请求来说并不常见。通常，对 http://site.com 的请求附带有该域的所有 cookie。但是由 JavaScript 方法发出的跨源请求是个例外,如 fetch('http://another.com') 不会发送任何 cookie，即使那些 (!) 属于 another.com 域的 cookie。

这是因为具有凭据的请求比没有凭据的请求要强大得多。如果被允许，它会使用它们的凭据授予 JavaScript 代表用户行为和访问敏感信息的全部权力。它必须显式地带有允许请求的凭据和附加 header。要在 fetch 中发送凭据，我们需要添加 credentials: "include" 选项，现在，fetch 将把源自 another.com 的 cookie 和我们的请求发送到该网站。

fetch('http://another.com', {
  credentials: "include"
});

如果服务器同意接受 带有凭据 的请求，则除了 Access-Control-Allow-Origin 外，服务器还应该在响应中添加 header Access-Control-Allow-Credentials: true。

200 OK
Access-Control-Allow-Origin: https://javascript.info
Access-Control-Allow-Credentials: true