🟡JavaScript网络与资源请求

本文最后更新于:2022年4月8日 晚上

XHR对象

🌽创建XHR对象

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

1
const xhr = new XMLHttpRequest()

🌽open方法

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

参数 说明
method 请求方式
url 相对路径或绝对路径
Boolean 是否异步执行
1
xhr.open('GET', 'XHR.txt', false )

🌽send方法

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

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

1
2
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

1
2
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)可向表单添加数据

1
2
3
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

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

🥕overrideMimeType方法

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

1
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对象

ResponseRequestheader属性为一个Header实例

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

1
2
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属性为falseRequest实例传递给fetch

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

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

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

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

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

🍍Response对象

📌创建实例

使用构造函数创建Response实例

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

1
const response = new Response([body], [init])
init选项 说明
headers 键值对对象实例或Header实例
status 状态码
statusText 状态文本

📌实例方法

方法 描述
redirect('url', status) 接收重定向地址与重定向状态码返回重定向后的Response实例
error() 产生表示网络错误的Response对象
1
response.redirect('test.txt', 200)              // 状态码为非重定向状态码会报错

📌实例属性

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

📌实例拷贝

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

🍍body

RequestResponse实例均有只读的bodybodyUsed(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 教程》(阮一峰)


🟡JavaScript网络与资源请求
https://qingshaner.com/JavaScript网络与资源请求/
作者
清山
发布于
2022年2月15日
许可协议