js之网络请求与远程资源

概述

方式
XMLHttpRequest
fetch api
navigator.sendBeacon
websocket

XMLHttpRequest

• 请求:先open然后send
  • open(method, url, async)
• 响应：作为XMLHttpRequest的属性,有responseText/responseXML， status/statusText
• 异步请求
  • readyState：其支持的值有0(未初始化)，1(已打开)，2(已发送)，3(接收中)，4(已完成)
  • 事件onreadystatechange
• 请求头：setRequestHeader
• 响应头：getResponseHeader/getAllResponseHeaders
• 表单数据：使用FormData
• 超时：属性使用timeout,事件使用ontimeout
• 进度事件
  • loadstart：接收到响应的第一个字符
  • progress：接收到响应反复触发
  • error：请求出错时触发
  • abort：调用abort终止连接时触发
  • load：接收响应完成时触发
  • loadend：通信完成时，在load事件 之后
• 跨源资源共享
  • 预检请求：客户端发送Origin/Access-Control-Request-Method/Access-Control-Request-Headers，服务端回复Access-Control-Allow-Origin/Access-Control-Allow-Methods/Access-Control-Allow-Headers/Acesss-Control-Max-Age
  • 凭据请求：客户端设置withCredentials，服务端加Access-Control-Allow-Credentials

Fetch API

其基础组成为
Fetch API
Request
Response
Headers

fetch方法支持形式

• fetch(url, initobj)：其中initobj中可以包含method, headers, body
• fetch(request)

Request：其克隆方式有两种，在请求体初始读取时，使用克隆会报错

• new Request(request)
• clone

Response：其克隆使用clone方法，限制与Request相似。

body混入：其支持text,json,formData,arrayBuffer,blob方法。在通过流读取时，取body属性，操作处理可以为同步或者异步处理函数

Beacon API

其属于navigator方法，navigator.sendBeacon(url, data)

websocket

• 创建：new websocket(url)
• 状态：readystate，0表示正在建立，1表示连接已建立，2连接正在关闭，3表示连接已经关闭
• 关闭：使用close方法
• 发送数据：send(data)
• 接收数据：通过onmessage事件，事件对象的数据通过 event.data
• 事件
  • onopen：连接建立时
  • onerror：发生错误时
  • onclose：连接关闭时，事件属性有wasClean(连接是否干净关闭),code,reason