网络请求

Mr.LRH大约 26 分钟

网络请求

XMLHttpRequest 对象

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。

XMLHttpRequest 实例属性

XMLHttpRequest.readyState ：返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

值	状态	描述
`0`	`UNSENT`	`XMLHttpRequest` 代理已创建，但尚未调用 `open()` 方法
`1`	`OPENED`	`open()` 方法已经被调用，可以使用 `XMLHttpRequest` 实例的 `setRequestHeader()` 方法，设定 HTTP 请求的头信息
`2`	`HEADERS_RECEIVED`	`send()` 方法已经被调用，并且头部和状态已经可获得
`3`	`LOADING`	响应体部分正在被接收。`responseText` 属性已经包含部分数据
`4`	`DONE`	请求操作已经完成。服务器返回的数据已经完全或失败

XMLHttpRequest.response ：只读。返回响应的正文（即 HTTP 回应的 body 部分）。返回的类型为 ArrayBuffer、Blob、Document、JavaScript Object 或字符串中的一个，取决于请求的 responseType 属性。
- 如果请求未成功或尚未发送，则返回 null。
- 如果 responseType 属性为 "text" 或 "" （空字符串），在请求状态为 LOADING 时，response 属性包含到目前为止该请求已经取得的内容。
XMLHttpRequest.responseType ：枚举字符串。用于指定响应中包含的数据类型。
- 该属性可写。在调用 open() 方法之后、调用 send() 方法之前，可设置该属性的值。
- 如果 responseType 设为 "" （空字符串），等同于默认值 "text"。
- responseType 属性枚举值
  - ""（空字符串）：等同于 "text" ，表示服务器返回文本数据。
  - "arraybuffer" ： ArrayBuffer 对象，表示服务器返回二进制数组。
  - "blob" ： Blob 对象，表示服务器返回二进制对象。
  - "document" ： Document 对象，表示服务器返回一个文档对象。
  - "json" ： JSON 对象。
  - "text" ：字符串。
XMLHttpRequest.responseText ：只读。返回从服务器接收到的字符串。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。
XMLHttpRequest.responseXML ：字符串。表示发送数据的服务器的网址。
- 如果 URL 为空，则返回空字符串。
- 如果 URL 有锚点，则位于 URL # 后面的内容会被删除。
- 如果 URL 有重定向，responseURL 的值会是经过多次重定向后的最终 URL。
XMLHttpRequest.responseURL ：只读。返回从服务器接收到 HTML 或 XML 的 Document 对象。
- 如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。
- 该属性生效的前提是 HTTP 回应的 Content-Type 头信息等于 text/xml 或 application/xml 。要求在发送请求前，XMLHttpRequest.responseType 属性要设为 document。
- 如果 HTTP 回应的 Content-Type 头信息不等于 text/xml 和 application/xml ，从 responseXML 获取数据（即把数据按照 DOM 格式解析），需要手动调用 XMLHttpRequest.overrideMimeType() 方法，强制进行 XML 解析。
XMLHttpRequest.status ：只读。返回 XMLHttpRequest 响应中的 HTTP 状态码。
- 请求成功状态码为 200 ，如果服务器没有返回状态码，该属性默认是 200 。请求发出之前，该属性为 0 。
- HTTP 响应状态码分类
  - 信息响应 (100 – 199)
  - 成功响应 (200 – 299)
  - 重定向消息 (300 – 399)
  - 客户端错误响应 (400 – 499)
  - 服务端错误响应 (500 – 599)
XMLHttpRequest.statusText ：服务器返回的一个 DOMString 类型的文本信息（包含了响应的 HTTP 状态码）。
XMLHttpRequest.timeout ：表示请求的超时时间（毫秒），超过该时长，请求会自动终止。默认值为 0 ，表示没有超时限制。

XMLHttpRequest.upload ：返回一个 XMLHttpRequestUpload 对象，用来表示文件上传的进度。可以通过对其绑定事件来监听上传进度。

事件	描述
`onloadstart`	获取开始
`onprogress`	数据传输进行中
`onabort`	获取操作终止
`onerror`	获取失败
`onload`	获取成功
`ontimeout`	获取操作在用户规定的时间内未完成
`onloadend`	获取完成（不论成功与否）

XMLHttpRequest.withCredentials ：布尔值，表示跨域请求时，用户信息（比如 Cookie 和认证的 HTTP 头信息）是否会包含在请求之中，默认为 false 。
- 同源请求设置 withCredentials 无效。
- 为了让这个属性生效，服务器必须显式返回 Access-Control-Allow-Credentials 头信息。

XMLHttpRequest 实例方法

XMLHttpRequest.open()
语法： XMLHttpRequest.open(method, url[, async[, user[, password]]])
描述：初始化一个请求。
- 该方法只能在 XMLHttpRequest 实例创建后、调用 send() 方法前调用。
- 如果对使用过 open() 方法的 AJAX 请求，再次使用这个方法，等同于调用 abort()，即终止请求。
参数：
- method ： HTTP 方法。比如 GET 、 POST 、 PUT 、DELETE 等。不区分大小写。
- url ：表示请求发送的目标 URL 。
- async ：可选。布尔值，表示请求是否为异步，默认为 true 。
  - 如果值为 false，send() 方法直到收到答复前不会返回。
  - 如果 multipart 属性为 true ，则该值必须为 true，否则将引发异常。
- user ：可选。表示用于认证的用户名。默认为 null 。
- password ：可选。表示用于认证的密码。默认为 null 。
XMLHttpRequest.setRequestHeader()
语法： XMLHttpRequest.setRequestHeader(header, value)
描述：设置 HTTP 请求的头信息。
- 该方法必须在 open() 方法和 send() 方法之间调用。
- 如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
- 如果没有设置 Accept 属性，则发送出 send() 的值为此属性的默认值：*/* 。
参数：
- header ：表示属性的名称。
- value ：表示属性的值。
XMLHttpRequest.overrideMimeType()
语法： XMLHttpRequest.overrideMimeType(mime)
描述：重写服务器返回的 MIME 类型，从而让浏览器进行不一样的处理。
- 该方法必须在 send() 方法之前调用。
- 只有在服务器无法返回某种数据类型时，才使用该方法。
XMLHttpRequest.send()
语法： XMLHttpRequest.send([body])
描述：发送 HTTP 请求。
- 如果是异步请求（默认为异步请求），则该方法会在请求发送后立即返回。
- 如果是同步请求，则该方法直到响应到达后才会返回。
参数：
- body ：可选。表示请求的主体部分。如果请求方法是 GET 或 HEAD ，则该参数必须为 null 。
XMLHttpRequest.abort()
语法： XMLHttpRequest.abort()
描述：终止 HTTP 请求。当请求被终止，readyState 属性被设置为 XMLHttpRequest.UNSENT (值为 0)，请求的 status 属性被设置为 0。
XMLHttpRequest.getAllResponseHeaders()
语法： XMLHttpRequest.getAllResponseHeaders()
描述：返回所有的响应头信息，以 CRLF 分隔的字符串形式。
- 如果没有收到服务器回应，该属性为 null。
- 如果发生网络错误，该属性为空字符串。
XMLHttpRequest.getResponseHeader()
语法： XMLHttpRequest.getResponseHeader(header)
描述：返回指定的响应头信息 header （不区分大小写）的值。
- 如果还没有收到服务器回应或者指定字段不存在，返回 null。
- 如果有多个字段同名，它们的值会被连接为一个字符串，每个字段之间使用 “逗号+空格” 分隔。

XMLHttpRequest 实例事件

readystatechange 事件：当 XMLHttpRequest.readyState 属性发生变化时触发。
loadstart 事件：当请求开始时触发。
progress 事件：当请求接收到数据时，周期性地触发。
load 事件：当请求成功完成时触发。
loadend 事件：当请求结束时触发，无论请求成功还是失败。
error 事件：当请求发生错误时触发。
timeout 事件：当请求超时时触发。
abort 事件：当请求被终止时触发。

使用 XMLHttpRequest

let xhr = new XMLHttpRequest()

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    try {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        console.log(xhr.responseText)
      } else {
        console.log('Request was unsuccessful: ' + xhr.status)
      }
    } catch (ex) {
      // 假设由 ontimeout 处理
    }
  }
}

xhr.open('get', 'timeout.php', true)

xhr.timeout = 1000 // 设置 1 秒超时
xhr.ontimeout = function () {
  alert('Request did not return in a second.')
}

xhr.send(null)

CORS 通信

跨源资源共享（CORS，或通俗地称为跨域资源共享）是一种基于 HTTP 头的机制，允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。

跨源共享标准允许在下列场景中使用跨站点 HTTP 请求：

由 XMLHttpRequest 或 Fetch API 发起的跨源 HTTP 请求。
Web 字体（CSS 中通过 @font-face 使用跨源字体资源）。网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。
WebGL 贴图。
使用 drawImage() 将图片或视频画面绘制到 canvas。
来自图像的 CSS 图形 (en-US)。

CORS 预检请求用于检查服务器是否支持 CORS 即跨域资源共享。

对于简单请求，不会触发 CORS 预检请求，而是直接发出 CORS 请求。
对于复杂请求，浏览器会先发出 CORS 预检请求，从而获知服务器是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（例如 Cookie 和 HTTP 认证相关数据）。

简单请求

简单请求，不会触发 CORS 预检请求，而是直接发出 CORS 请求。若请求满足以下所有条件，则该请求可视为简单请求：

请求方法： GET 、 HEAD 、 POST 之一
HTTP 头信息：除了被用户代理自动设置的标头字段（例如 Connection 、 User-Agent ）以外，仅允许人为设置以下字段
- Accept
- Accept-Language
- Content-Language
- Content-Type ：只限于三个值 application/x-www-form-urlencoded 、 multipart/form-data 、 text/plain
如果请求是使用 XMLHttpRequest 对象发出的，在返回的 XMLHttpRequest.upload 对象属性上没有注册任何事件监听器（即，没有调用 xhr.upload.addEventListener() 监听该上传请求）
请求中没有使用 ReadableStream 对象

当浏览器发现跨域请求时，会在请求头中加入 Origin 字段，表示该请求来源（协议、域名、端口）。服务器可根据该值，决定是否同意该请求。

如果 Origin 字段的值不在许可范围内，服务器会返回一个正常的 HTTP 回应。浏览器发现，这个回应的头信息没有包含 Access-Control-Allow-Origin 字段，就会抛出一个错误，被 XMLHttpRequest 的 onerror 回调函数捕获。注意，这种错误无法通过状态码识别，因为 HTTP 回应的状态码有可能是 200 。
如果 Origin 字段的值在许可范围内，服务器返回的响应，会多出以下几个头信息字段。
```
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
```
- Access-Control-Allow-Origin ：必须的。指定了该响应的资源是否被允许与给定的来源（origin）共享。其值是请求时 Origin 字段的值，或者 * （表示接受任意域名的请求）。
- Access-Control-Allow-Credentials ：可选。布尔值，表示是否允许发送 Cookie 。
  - 默认情况下，Cookie 不包括在 CORS 请求之中。
  - 该值设为 true ，即表示服务器明确许可，Cookie 可以包含在请求中，发送给服务器。该值也只能设为 true ，如果服务器不要浏览器发送 Cookie ，删除该字段即可。
- Access-Control-Expose-Headers ：可选。
  - CORS 请求时，XMLHttpRequest 对象的 getResponseHeader() 方法只能获取 6 个基本字段： Cache-Control 、 Content-Language 、 Content-Type 、 Expires 、 Last-Modified 、 Pragma 。
  - 如果需要获取其他字段，就必须在 Access-Control-Expose-Headers 里面指定。

复杂请求

复杂请求，浏览器会先发出 CORS 预检请求，从而获知服务器是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。

预检请求：当浏览器请求为非简单请求时，会自动发出预检请求。

CORS 预检请求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。预检请求/响应示例如下：

OPTIONS /doc HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

HTTP/1.1 204 No Content
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive

正常请求：当预检请求通过后，每次的 CORS 请求都会在请求头中加入 Origin 字段，表示该请求来源（协议、域名、端口）。服务器回应的头信息中，也会有一个 Access-Control-Allow-Origin 头信息字段。

Fetch

Fetch API 提供了一个获取资源的接口（包括跨网络通信）。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

fetch() 方法

语法： fetch(input[, init])

描述：用于发起获取资源的请求。返回一个 Promise 对象，在请求响应后被 resolve ，并传回 Response 对象。

成功的 fetch() 需要检查 Promise 对象被 resolve，还需包括 Response.ok 属性为 true。
- 接收到一个代表错误的 HTTP 状态码时，返回的 Promise 不会被标记为 reject ，即使该 HTTP 响应的状态码是 404 或 500 。
- 如果 HTTP 状态码不在 200 - 299 范围内，resolve 返回值的 ok 属性为 false 。
当网络错误或请求被阻止时，Promise 会被 reject 。

参数：

input ：表示获取资源的 URL 或者 Request 对象。
init ：可选。一个配置项对象，包括所有对请求的设置。可选的参数有：
- method ：请求使用的方法，如 GET 、 POST 。
- headers ：请求的头信息，形式为 Headers 对象或包含 ByteString 值的对象字面量。
- body ：请求的 body 信息。
  - 可以是 Blob 、 BufferSource 、 FormData 、 URLSearchParams 、 USVString 对象。
  - GET 或 HEAD 方法的请求不能包含 body 信息。
- mode ：请求的模式，用于确定跨域请求是否能得到有效的响应，以及响应的哪些属性是可读的。可选值为 same-origin 、 no-cors 、 cors 、 navigate 。
- credentials ：表示用户代理是否应该在跨域请求的情况下从其他域发送 cookies。可选值为 omit 、 same-origin 、 include 。
- cache ：请求的缓存模式。控制着请求以何种方式与浏览器的 HTTP 缓存进行交互。可选值为 default 、 no-store 、 reload 、 no-cache 、 force-cache 、 only-if-cached 。
- redirect ：重定向模式。可选值为 follow 、 error 、 manual 。
- referrer ：一个 USVString ，表示请求的 referrer 。可以是 client （默认）、 no-referrer 或一个 URL 。
- referrerPolicy ：指定了 HTTP 头部 referer 字段的值。可选值为 no-referrer、 no-referrer-when-downgrade、origin、origin-when-cross-origin、 unsafe-url。
- integrity ：包括请求的子资源所需的 Subresource Integrity 值（子资源完整性，SRI，通过验证获取文件的哈希值是否和提供的哈希值一样来判断资源是否被篡改）。
- keepalive ：可用于使请求的时间超过页面的时间。
- signal ： AbortSignal 对象实例。允许获取请求的控制器，并且允许通过 AbortController 中止请求。
- priority ：请求的优先级。可选值为 high 、 low 、 normal 。

let abortController = new AbortController()

let payload = JSON.stringify({
  foo: 'bar',
})

let jsonHeaders = new Headers({
  'Content-Type': 'application/json',
})

fetch('/send-me-json', {
  method: 'POST', // 发送请求体时必须使用一种 HTTP 方法
  body: payload,
  headers: jsonHeaders,
  signal: abortController.signal,
})

// 10 毫秒后中断请求
setTimeout(() => abortController.abort(), 10)

Headers 接口

Fetch API 的 Headers 接口允许对 HTTP 请求和响应头执行各种操作。这些操作包括检索，设置，添加和删除。可以使用 new Headers() 创建一个新的 Headers 对象。

Headers 构造函数

语法： new Headers([init])

描述：创建一个新的 Headers 对象。

参数：

init ：可选。通过一个包含任意 HTTP headers 的对象来预设 Headers。可以是一个 ByteString 对象，或者是一个已存在的 Headers 对象。

Headers 方法

headers.has()
语法： headers.has(name)
描述：返回一个布尔值，表示 Headers 对象是否包含某个特定的头部。
headers.get()
语法： headers.get(name)
描述：返回 Headers 对象中返回指定 header 的全部值。如果 Headers 对象中不存在对应的头部，则返回 null。
headers.getSetCookie()
语法： headers.getSetCookie()
描述：返回一个数组，其中包含与响应相关的所有 Set-Cookie 标头的值。使得 Headers 对象可以处理多个 Set-Cookie 标头。
headers.append()
语法： headers.append(name, value)
描述：追加一个新值 value 到已存在的 headers 对象上，或者新增一个原本不存在的 header 。
headers.set()
语法： headers.set(name, value)
描述：设置一个新的值 value 到已存在的 headers 对象上，或者新增一个原本不存在的 header 。
headers.delete()
语法： headers.delete(name)
描述：从 Headers 对象中删除指定的头部。当 name 参数的值不是 HTTP 标头的名称，或者 Guard 的值为 immutable 抛出 TypeError 错误。
headers.entries()
语法： headers.entries()
描述：返回一个迭代器，它包含 Headers 对象中所有的键/值对的 Array 。每个键/值对都是一个 Array ，第一个元素是键名，第二个元素是值。
headers.keys()
语法： headers.keys()
描述：返回一个迭代器，它包含 Headers 对象中所有的键名。
headers.values()
语法： headers.values()
描述：返回一个迭代器，它包含 Headers 对象中所有的值。
headers.forEach()
语法： headers.forEach(callback[, thisArg])
描述：为 Headers 对象中的每个键值对执行提供的回调函数 callback。

Request 接口

Fetch API 的 Request 接口用来表示资源请求。可以使用 new Request() 构造函数创建一个新的 Request 对象。

Request 构造函数

语法： new Request(input[, init])

描述：创建一个新的 Request 对象。

参数：

input ： fetch 的资源。可选值如下：
- 获取资源的 URL 。
- Request 对象：
  - 如果该对象存在于构造函数调用的另一个起源上，则将除去 Request.referrer 。
  - 如果该对象 Request.mode 为 navigate，则 mode 将转换为 same-origin 。
init ：可选。一个配置项对象，包括所有对请求的设置。可选的参数有：
- method ：请求使用的方法，如 GET 、 POST 。
- headers ：请求的头信息，形式为 Headers 对象或包含 ByteString 值的对象字面量。
- body ：请求的 body 信息。
  - 可以是 Blob 、 BufferSource 、 FormData 、 URLSearchParams 、 USVString 对象。
  - GET 或 HEAD 方法的请求不能包含 body 信息。
- mode ：请求的模式，用于确定跨域请求是否能得到有效的响应，以及响应的哪些属性是可读的。
  - cors ：默认值。允许跨域请求。
  - no-cors ：保证请求对应的 method 只有 HEAD，GET 或 POST 方法，并且请求的 headers 只能有简单请求头。
  - same-origin ：设置该模式可确保请求总是向当前的源发起的。
  - navigate ：表示是浏览器的页面切换请求 (request)。navigate 请求仅在浏览器切换页面时创建，该请求应该返回 HTML。
- credentials ：表示用户代理是否应该在跨域请求的情况下从其他域发送 cookies。
  - omit ：默认值。从不发送 Cookies 。
  - same-origin ：只有当 URL 与响应脚本同源才发送 Cookies、HTTP Basic authentication 等验证信息。
  - include ：不论是不是跨域的请求，总是发送请求资源域在本地的 Cookies、HTTP Basic authentication 等验证信息。
- cache ：请求的缓存模式。控制着请求以何种方式与浏览器的 HTTP 缓存进行交互。
  - default ：浏览器从 HTTP 缓存中寻找匹配的请求。
    - 如果缓存匹配上并且有效（ fresh）, 它将直接从缓存中返回资源。
    - 如果缓存匹配上但已经过期，浏览器将会使用传统（ conditional request ）的请求方式去访问远程服务器。如果服务器端显示资源没有改动，它将从缓存中返回资源。否则，如果服务器显示资源变动，那么重新从服务器下载资源更新缓存。
    - 如果缓存没有匹配，浏览器将会以普通方式请求，并且更新已经下载的资源缓存。
  - no-store ：浏览器直接从远程服务器获取资源，不查看缓存，并且不会使用下载的资源更新缓存。
  - reload ：浏览器直接从远程服务器获取资源，不查看缓存，然后使用下载的资源更新缓存。
  - no-cache ：浏览器在其 HTTP 缓存中寻找匹配的请求。
    - 如果有匹配，无论是新的还是陈旧的，浏览器都会向远程服务器发出条件请求。如果服务器指示资源没有更改，则将从缓存中返回该资源。否则，将从服务器下载资源并更新缓存。
    - 如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存。
  - force-cache ：浏览器在其 HTTP 缓存中寻找匹配的请求。
    - 如果有匹配项，不管是新匹配项还是旧匹配项，都将从缓存中返回。
    - 如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存。
  - only-if-cached ：浏览器在其 HTTP 缓存中寻找匹配的请求。
    - 如果有匹配项 (新的或旧的)，则从缓存中返回。
    - 如果没有匹配，浏览器将返回一个错误。
- redirect ：重定向模式。
  - follow ：自动重定向。
  - error ：如果产生重定向将自动终止并且抛出一个错误。
  - manual ：手动处理重定向。
- referrer ：一个 USVString ，表示请求的 referrer 。可以是 client （默认）、 no-referrer 或一个 URL 。
- referrerPolicy ：指定了 HTTP 头部 referer 字段的值。可选值为 no-referrer、 no-referrer-when-downgrade、origin、origin-when-cross-origin、 unsafe-url。
- integrity ：包括请求的子资源所需的 Subresource Integrity 值（子资源完整性，SRI，通过验证获取文件的哈希值是否和提供的哈希值一样来判断资源是否被篡改）。
- keepalive ：可用于使请求的时间超过页面的时间。
- signal ： AbortSignal 对象实例。允许获取请求的控制器，并且允许通过 AbortController 中止请求。
- priority ：请求的优先级。可选值如下：
  - auto ：默认值。自动确定请求相对于其他同类型请求的优先级。
  - high ：相对于其他同类型请求，高优先级。
  - low ：相对于其他同类型请求，低优先级。

Request 属性

url ：只读属性。请求的 URL 。
method ：只读属性。请求方法。
headers ：只读属性。包含与当前请求关联的 Headers 对象。
body ：只读属性。返回一个 ReadableStream 对象，允许读取 Request 对象的内容。使用 GET 或 HEAD 方法的请求返回 null。
bodyUsed ：只读属性。表示 body 属性是否已被读取。
cache ：只读属性。请求的缓存模式，控制着请求以何种方式与浏览器的 HTTP 缓存进行交互。
credentials ：只读属性。表示用户代理是否应该在跨域请求的情况下从其他域发送 cookies。
destination ：只读属性。表示请求的内容类型。
integrity ：只读属性。请求的子资源所需的 Subresource Integrity 值（子资源完整性，SRI，通过验证获取文件的哈希值是否和提供的哈希值一样来判断资源是否被篡改）。
mode ：只读属性。请求模式。
redirect ：只读属性。重定向模式。
referrer ：只读属性。请求的 referrer 。
referrerPolicy ：只读属性。 HTTP 头部 referer 字段的值。
signal ：只读属性。与请求相关的 AbortSignal。

Request 方法

request.arrayBuffer()
语法： request.arrayBuffer()
描述：读取请求体并返回 Promise ，该 Promise 将兑现为 ArrayBuffer 对象。
request.blob()
语法： request.blob()
描述：读取请求体并返回 Promise ，该 Promise 将兑现为 Blob 对象。
request.clone()
语法： request.clone()
描述：创建一个 Request 对象的克隆，克隆的对象和原对象使用相同的属性。如果响应体 Body 已经被使用过，该方法会抛出一个 TypeError。
request.formData()
语法： request.formData()
描述：读取请求体并返回 Promise ，该 Promise 将兑现为 FormData 对象。
request.json()
语法： request.json()
描述：读取请求体并返回 Promise ，该 Promise 将兑现由响应体的文本解析得到的 JSON 。
request.text()
语法： request.text()
描述：读取请求体并返回 Promise ，该 Promise 将兑现为 String 。

Response 接口

Fetch API 的 Response 接口表示请求的响应数据。可以使用 new Response() 构造函数创建一个新的 Response 对象。

Response 构造函数

语法： new Response(body[, init])

描述：创建一个新的 Response 对象。

参数：

body ：可选。一个定义 response 中 body 的对象，包括 Blob 、 FormData 、 BufferSource 、 ReadableStream 、 URLSearchParams 、 USVString 对象。
init ：可选。一个配置项对象，包含要应用到 response 上的自定义设置。可选的参数有：
- status ：响应的状态码。默认为 200 。
- statusText ：响应的状态信息。默认为 OK 。
- headers ：响应的头信息，形式为 Headers 对象或包含 ByteString 值的对象字面量。

Response 属性

response.url ：只读属性。响应的 URL。
response.status ：只读属性。响应的状态码。
response.ok ：只读属性。一个布尔值，表示响应是否成功（即，HTTP 状态码是否在范围 200 – 299 内）。
response.statusText ：只读属性。响应的状态信息。
response.headers ：只读属性。包含与当前请求关联的 Headers 对象。
response.body ：只读属性。一个 ReadableStream，或者对于使用空的 body 属性构建的任意的 Response 对象，或没有任何主体的实际 HTTP 响应，则为 null。
response.bodyUsed ：只读属性。一个布尔值，表示 body 属性是否已被读取。
response.redirected ：只读属性。一个布尔值，表示响应是否是重定向的响应。
response.type ：只读属性。响应的类型。
- basic ：标准值，同源响应，暴露除了 “Set-Cookie” 之外的所有标头。
- cors ：从有效的跨源请求接收到响应。某些标头和主体可以被访问。
- error ：网络错误。没有有用的描述错误的信息。响应的状态为 0，header 为空且不可变。这是从 Response.error() 中获得的响应的类型。
- opaque ：对跨源资源的 “no-cors” 请求的响应。严格限制。
- opaqueredirect ： fetch 请求是通过 redirect: "manual" 发出的。响应的状态是 0，标头是空的，主体是 null，trailer 是空的。

Response 方法

response.error()
语法： response.error()
描述：返回包含网络错误相关信息的新 Response 对象。
response.json()
语法： response.json(data, options)
描述：返回一个以提供的 JSON 数据为主体的 Response，以及一个设置为 application/json 的 Content-Type 头信息。还可以设置响应状态、状态信息和其他标头。
参数：
- data ：可选。包含要序列化为 JSON 的数据的对象。
- options ：可选。一个配置项对象，包含对响应的设置，与 Response 构造函数的选项参数相同。可选的参数有：
  - status ：响应的状态码。默认为 200 。
  - statusText ：响应的状态信息。默认为 OK 。
  - headers ：响应的头信息，形式为 Headers 对象或包含 ByteString 值的对象字面量。
response.redirect()
语法： response.redirect(url, status)
描述：返回一个可以重定向到指定 URL 的 Response 。
参数：
- url ：重定向的 URL 。
- status ：可选。重定向的状态码，默认为 302 。

Beacon API

Beacon API 用于发送异步和非阻塞请求到服务器。

Beacon API 主要使用场景是将分析数据发送给服务器，如：客户端事件、会话数据等。在 unload 事件处理程序中，创建的任何异步请求都会被浏览器取消，因此异步 XMLHttpRequest 或 fetch() 不适合这个任务。如果使用同步 XMLHttpRequest 强制发送请求，浏览器会因为要等待 unload 事件处理程序完成而延迟导航到下一个页面。

Beacon API 定义了一个独立的方法：navigator.sendBeacon()。

语法： navigator.sendBeacon(url, data)
描述：通过 HTTP POST 将少量数据异步传输到 Web 服务器。
- 可用于发送统计数据。并不是只能在页面生命周期末尾使用，在任何时候都可以使用。
- 调用 sendBeacon() 后，浏览器会把请求添加到一个内部的请求队列。浏览器会主动地发送队列中的请求。当请求成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。
- 浏览器保证在原始页面已经关闭的情况下也会发送请求。
- 状态码、超时和其他网络原因造成的失败完全是不透明的，不能通过编程方式处理。
- 请求会携带调用 sendBeacon() 时所有相关的 Cookie 。
参数：
- url ：必须。请求的 URL 。
- data ：可选。将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据。

Web Socket

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

WebSocket 构造函数

语法： new WebSocket(url[, protocols])

描述：创建一个 WebSocket 对象。

参数：

url ：连接 URL ，WebSocket 服务器将响应的 URL。
protocols ：可选。一个协议字符串或者一个包含协议字符串的数组。
- 字符串用于指定子协议，单个服务器可以实现多个 WebSocket 子协议（例如，希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。
- 如果不指定协议字符串，则假定为空字符串。

let socket = new WebSocket('ws://www.example.com/server.php')
let stringData = 'Hello world!'
let arrayBufferData = Uint8Array.from(['f', 'o', 'o'])
let blobData = new Blob(['f', 'o', 'o'])

socket.send(stringData)
socket.send(arrayBufferData.buffer)
socket.send(blobData)

WebSocket 属性

url ：只读属性。返回构造函数创建 WebSocket 实例对象时 URL 的绝对路径。
readyState : 只读属性。返回当前 WebSocket 的链接状态。
- WebSocket.CONNECTING ：值为 0 ，正在链接中。
- WebSocket.OPEN ：值为 1 ，链接已经建立，可以通信。
- WebSocket.CLOSING ：值为 2 ，链接正在关闭。
- WebSocket.CLOSED ：值为 3 ，链接已经关闭或者没有链接成功。
protocol ：只读属性。用于返回服务器端选中的子协议的名字。在创建 WebSocket 对象时，在参数 protocols 中指定的字符串，当没有已建立的链接时为空串。
binaryType ：返回 websocket 连接所传输二进制数据的类型。可选值为 blob 、 arraybuffer 。
bufferedAmount ：只读属性。返回已经被 send() 方法放入队列中但还没有被发送到网络中的数据的字节数。
- 一旦队列中的所有数据被发送至网络，则该属性值将被重置为 0。
- 若在发送过程中连接被关闭，则属性值不会重置为 0。
- 如果不断地调用 send() ，则该属性值会持续增长
extensions ：只读属性。返回服务器已选择的扩展值。链接可以协定的扩展值，只有空字符串或者一个扩展列表。

WebSocket 方法

WebSocket.close()
语法： WebSocket.close([code[, reason]])
描述：关闭 WebSocket 连接或者正在连接的连接。
参数：
- code ：可选。表示关闭连接的状态码。默认值为 1005 。
- reason ：可选。字符串，表示连接被关闭的原因。
WebSocket.send()
语法： WebSocket.send(data)
描述：使用 WebSocket 连接发送数据。

WebSocket 事件

WebSocket.onclose 事件：在 WebSocket 连接状态 readyState 变为 WebSocket.CLOSED 时触发。
WebSocket.error 事件：由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时触发。
WebSocket.message 事件：在 WebSocket 接收到新消息时被触发
WebSocket.open 事件：在 WebSocket 连接状态 readyState 变为 WebSocket.OPEN 时触发。

网络请求

# 网络请求

# XMLHttpRequest 对象

# XMLHttpRequest 实例属性

# XMLHttpRequest 实例方法

# XMLHttpRequest 实例事件

# 使用 XMLHttpRequest

# CORS 通信

# 简单请求

# 复杂请求

# Fetch

# fetch() 方法

# Headers 接口

# Headers 构造函数

# Headers 方法

# Request 接口

# Request 构造函数

# Request 属性

# Request 方法

# Response 接口

# Response 构造函数

# Response 属性

# Response 方法

# Beacon API

# Web Socket

# WebSocket 构造函数

# WebSocket 属性

# WebSocket 方法

# WebSocket 事件

网络请求

XMLHttpRequest 对象

XMLHttpRequest 实例属性

XMLHttpRequest 实例方法

XMLHttpRequest 实例事件

使用 XMLHttpRequest

CORS 通信

简单请求

复杂请求

Fetch

fetch() 方法

Headers 接口

Headers 构造函数

Headers 方法

Request 接口

Request 构造函数

Request 属性

Request 方法

Response 接口

Response 构造函数

Response 属性

Response 方法

Beacon API

Web Socket

WebSocket 构造函数

WebSocket 属性

WebSocket 方法

WebSocket 事件