XMLHttpRequest对象

所有浏览器都是通过XMLHttpRequest构造函数原生支持XHR对象：

let xhr = new XMLHttpRequest()

1. 使用XHR

使用XHR需要先调用open()方法，接收3个参数：请求类型（'get'、'post'）、请求URL以及表示请求是否是异步的布尔值。

要发送定义好的请求，需要调用send()方法，调用后请求就会发送到服务器。

xhr.open('get', 'example.php', false);
xhr.send(null);

服务器收到响应后，XHR对象以下属性会被填充数据

responseText: 作为响应体返回的文本。
responseXML: 'text/xml'或'application/xml'
status: 响应的HTTP状态
statusText: 响应的HTTP状态描述

2. HTTP头部

默认情况下，XHR请求会发送以下头部片段

Accept：浏览器可以处理的内容类型
Accept-Charset：浏览器可以显示的字符集
Accept-Encoding：浏览器可以处理的压缩编码类型
Accept-Language：浏览器使用的语言
Connection：浏览器与服务器的连接类型
Cookie：页面中设置的Cookie
Host：发送请求的页面所在的域
Referer：发送请求的页面的URI
User-Agent：浏览器的用户代理字符串

如果需要发送额外的请求头部，可以使用setRequestHeader()方法，接收2个参数：头部字段的名称和值。需要在open()之后、send()之前调用。

3. 扩展类型

FormData类型

此类型便于表单序列化，也便于创建于表单类似格式的数据通过XHR发送。

let data = new FormData();
data.append('name', '66');

appen()方法接收两个参数：键和值。

XHR对象能够识别作为FormData实例传入的数据类型并自动配置响应的头部，不需要显示设置。

超时

timeout属性，用于表示发送请求后等待多少毫秒，如果响应不成功则终端请求。触发timeout事件时，调用ontimeout事件处理程序。

let xhr = new XMLHttpRequest();
xhr.open('get', 'timeout.php', true);
xhr.timeout = 1000
xhr.ontimeout = function() {
  alert('Request time out')
}
xhr.send(null)

进度事件

Progress Events是W3C的工作草案，定义了客户端-服务器通信。有以下6个进度相关的事件：

loadstart：接收到响应的第一个字节时触发。
progress：接收响应期间反复触发。
error：请求出错时触发。
abort：调用abort()终止连接时触发。
load：成功接收完响应后触发。
loaded：通信完成时，且在error、abort()或load之后触发。

跨资源共享

通过XHR进行Ajax通信的一个主要限制是跨源安全策略。默认情况下，XHR只能访问与发起请求的页面在同一个域内的资源。

跨源资源共享（CORS）定义了浏览器与服务器如何跨源通信，基本思路就是使用自定义的HTTP头部允许浏览器和服务器相互了解，以确实请求或响应应该成功还是失败。

Web Socket

websocket是通过一个长时连接实现与服务器全双工、双向的通信。

1. API

创建一个websocket，需要实例化一个WebSocket对象并传入要连接的url

let socket = new WebSocket('ws://www.example.com/server.php')

浏览器会在初始化后立即创建连接，websocket会有一个readyState属性表示当前状态：

WebSocket.OPENING（0）：连接正在建立
WebSocket.OPEN（1）：连接已经建立
WebSocket.CLOSING（2）：连接正在关闭
WebSocket.CLOSE（3）：连接已经关闭

任何时候都可以调用close()方法关闭连接，调用close()之后，readyState立即变为2，并会在关闭后变为3。

2. 发送和接收数据

客户端向服务器发送数据可以使用send()方法，传入一个字符串、ArrayBuffer或Blob

服务器向客户端发送消息时，WebSocket对象会触发message事件，通过event.data属性访问到有效荷载。

let socket = new WebSocket('ws://www.example.com/server.php')

let string = 'Hello World'
let arrayBufferData = Unit8Array.from(['f','o','o'])
let blobData = new Blob(['f','o','o'])

socket.send(string)
socket.send(arrayBufferData)
socket.send(blobData)

// 接收消息
socket.onmessage = function(event) {
  let data = event.data
}

3. 其他事件

WebSocket 对象在连接生命周期中会触发3个其他事件：

open：连接成功建立时触发。
error：发生错误时触发，连接无法续存。
close：连接关闭时触发。

JavaScript高级程序设计学习记录-网络请求