🟡JavaScript网络与资源请求

XHR对象

🌽创建XHR对象

使用构造函数创建新XHR对象

const xhr = new XMLHttpRequest()

🌽open方法

XHR对象使用open(method, url, Boolean)方法定义请求

参数	说明
method	请求方式
url	相对路径或绝对路径
Boolean	是否异步执行

xhr.open('GET', 'XHR.txt', false )

🌽send方法

XHR对象使用send(data)方法发送请求

当无数据发送时应传入null以兼容

xhr.send(null)
xhr.send()

🌽XHR请求属性

使用send方法后XHR对象以下属性会接收响应数据

属性	说明
status	状态码
statusText	状态文字描述
responseText	响应文本
responseXML	XML文档

🌽XHR阶段状态

readyState属性可表示当前XHR状态信息

属性值	状态
0	未初始化(未使用open)
1	已初始化(已使用open)
2	已发送(已使用send)
3	正在接收响应数据
4	已完成数据接收

当状态改变时发生readystatechange事件,可以此添加监听器,该事件不传递event

xhr.onreadystatechange = () => {}                             // DOM0
xhr.addEventLisener('readystatechange', () => {}, false)      // DOM2

使用abort()方法可将XHR对象状态直接变为4停止通信

🌽HTTP请求头

在使用open方法后send方法前使用setRequestHeader(key, value)方法为请求头添加数据

🌽HTTP响应头

• getResponseHeader(key)获取对应响应头
• getAllResponseHeaders()获取所有信息

XHR 2.0

🥕FormData类型

该类型可对表单数据进行序列化,并自动配置请求头

append(key, value)可向表单添加数据

const Data = new FromData(document.forms[0])
Data.append('Blog', 'https://jon-a-than.github.io')
xhr.send(Data)

🥕timeout

XHR对象的timeout属性设置请求判断超时时间(ms),超时后触发timeout事件,对象状态变为4

xhr.timeout = 10000
xhr.addEventLisener('timeout', () => {})  // DOM2
xhr.ontimeout = () => {}                  // DOM0

🥕overrideMimeType方法

在使用send方法前调用overrideMimeType方法可强制改变响应头对响应的处理方式(MIME)

xhr.overrideMimeType('text/plain')

进度事件

事件	说明
loadstart	接收到第一个响应字符
progress	接收响应时反复触发
error	请求出错
abort	调用abort方法
load	响应接收完
loadend	通信完成

🍉load

load事件可传递event参数,target属性指向XHR实例

无论请求是否成功均会触发

🍉progress

在接收响应期间会反复触发progress事件,并可传递event参数

event参数有以下额外属性

属性	说明
lengthComputable	进度信息是否可用
posision	已接收字节数
totalsize	总字节数

跨源资源共享(CORS)

Fetch API

🍍Fetch参数

fetch(url, [init])返回Promise对象解决为Response对象

url为请求的绝对/相对路径

init为以下的键值对

📌body

🍍Header对象

Response或Request的header属性为一个Header实例

可使用构造函数创建实例,可传入可迭代对象或键值对初始化

const header = new Header({id: 1})
const header = new Header(prams)

方法	说明
get(key),set(key, value),has(key),delete(key)	同Map 🔗前往查看
keys(),values(),entries()	同Map 🔗前往查看
append(key, value)	添加数据

📌头部护卫

🍍Request对象

可使用bodyUsed属性为false的Request实例传递给fetch

const request = new Request('url', [init])     // 可直接fetch该实例(bodyUsed必须为false)
fetch(request, {method: 'POST'})               // init会覆盖先前设置

使用new Requset(request)可复制request,但request的bodyUsed属性值会变为true

const request2 = new Requset(request)
fetch(request)                         // 报错
fetch(request2)                        // 正常

使用clone()方法可复制一模一样的Request实例

const request2 = request.clone()
fetch(request)                        // 正常
fetch(request2)                       // 正常

🍍Response对象

📌创建实例

使用构造函数创建Response实例

可选参数有body(同fetch)和init

const response = new Response([body], [init])

init选项	说明
headers	键值对对象实例或Header实例
status	状态码
statusText	状态文本

📌实例方法

方法	描述
redirect('url', status)	接收重定向地址与重定向状态码返回重定向后的Response实例
error()	产生表示网络错误的Response对象

response.redirect('test.txt', 200)              // 状态码为非重定向状态码会报错

📌实例属性

属性	说明
headers	Header对象
ok	2xx为true
redirected	是否重定向
status	状态码
statusText	状态文本
type	basic---------------------------------------------同源响应 cors-----------------------------------------------跨源响应 error------------------------------实例由error方法生成 opaque---------------使用no-cors的跨源fetch响应 opaqueredirect-对redirect设置为manual的响应
url	最终请求地址

📌实例拷贝

const response2 = new Response(response)       // response的bodyUsed不会变为true,但实例变为共享
const response2 = response.clone()             // 不可对bodyUsed为true的实例使用

🍍body

Request与Response实例均有只读的body和bodyUsed(ReadableStream是否摄受)属性以及五种转换方法

body混入方法	说明
text()	将缓冲区转换为UTF-8字符串
json()	将缓冲区转换为JSON
formData	将缓冲区转换为FromData实例
arrayBuffer()	将缓冲区转换为ArrayBuffer实例
blob()	将缓冲区转换为Blob实例

body混入方法只对bodyUsed属性为false的实例有效,且使用后bodyUsed变为true所以同一实例只可使用一次

Beacon API

Web Socket

参考文档:

《JavaScript高级程序设计 第四版》

《现代JavaScript教程》

《 Fetch API 教程》(阮一峰)