网络对象

yuhuo2022-05-12JavaScriptJavaScript对象

XMLHttpRequest 类

1. 创建对象

var request = new XMLHttpRequest();

2. 静态属性

静态属性	类型	描述
`UNSENT`	number	返回 0，表示未初始化
`OPENED`	number	返回 1，表示已初始化
`HEADERS_RECEIVED`	number	返回 2，表示请求中，并接收到头部和状态
`LOADING`	number	返回 3，表示请求中，并接收到响应数据
`DONE`	number	返回 4，表示请求完成

3. 原型属性

原型属性	类型	描述
`UNSENT`	number	返回 0，表示未初始化
`OPENED`	number	返回 1，表示已初始化
`HEADERS_RECEIVED`	number	返回 2，表示请求中，并接收到头部和状态
`LOADING`	number	返回 3，表示请求中，并接收到响应数据
`DONE`	number	返回 4，表示请求完成
==============	==============	==============
`withCredentials`	boolean	跨域时是否携带cookie
`timeout`	number	超时时间
`readyState`	number	返回请求状态
`response`	any	返回响应主体
`responseText`	string	返回响应文本
`responseType`	string	返回响应类型
`responseURL`	string	返回响应链接
`responseXML`	Document	返回响应文档
`status`	number	返回响应状态码
`statusText`	string	返回响应状态文本
`upload`	XMLHttpRequestUpload	返回上传对象
==============	==============	==============
`onloadstart`	Function	加载开始事件回调
`onprogress`	Function	加载中事件回调
`onload`	Function	加载成功事件回调
`onabort`	Function	加载中止事件回调
`onerror`	Function	加载错误事件回调
`onloadend`	Function	加载结束事件回调
`ontimeout`	Function	加载超时事件回调
`onreadystatechange`	Function	状态改变事件回调

4. 原型方法

原型方法	描述
`open(method: string, url: string \| URL): void`	初始化请求
`setRequestHeader(name: string, value: string): void`	设置请求头部
`overrideMimeType(mime: string): void`	设置响应数据格式
`send(data?: any): void`	发送请求
`getResponseHeader(name: string): string`	返回响应头部指定字段
`getAllResponseHeaders(): string`	返回响应头部所有字段
`abort(): void`	中止请求

fetch 对象

使用 Fetch - Web API 接口参考 | MDN (mozilla.org)open in new window

1. 对象方法

对象方法	描述
`fetch(url: string, init?: RequestInit): Promise`	发送请求

var url = "https://getman.cn/mock/route/to/demo";
fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
        "Content-Type": "application/json",
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // 携带请求数据
}).then((response) => {
    // 获取json格式响应数据
    var data = response.json();
});

WebSocket 类

继承了 EventTarget 类。

1. 创建对象

// new WebSocket(url: string, protocols?: string)
var socket = new WebSocket("ws://ws.example.com:123/resource");

2. 静态属性

静态属性	类型	描述
`CONNECTING`	number	返回 0，表示连接中
`OPEN`	number	返回 1，表示已连接
`CLOSING`	number	返回 2，表示断开中
`CLOSED`	number	返回 3，表示已断开

3. 原型属性

原型属性	类型	描述
`CONNECTING`	number	返回 0，表示连接开启中
`OPEN`	number	返回 1，表示连接已开启
`CLOSING`	number	返回 2，表示连接关闭中
`CLOSED`	number	返回 3，表示连接已关闭
==============	==============	==============
`readyState`	number	返回连接状态
`url`	string	返回链接
`protocol`	string	返回协议
`binaryType`	string	传输的二进制数据的类型：blob，arraybuffer
`bufferedAmount`	number	返回未发送至服务器的字节数
`extensions`	string	返回服务器选择的扩展
==============	==============	==============
`onopen`	Function	连接开启事件回调
`onmessage`	Function	接收消息事件回调
`onclose`	Function	连接关闭事件回调
`onerror`	Function	连接错误事件回调

3. 原型方法

原型方法	描述
`send(data: any)`	发送消息
`close(code?: number, reason?: string)`	关闭当前连接

即时通讯技术

WebSocket：全双工通信（基于websokcet协议，双向交流，不占用服务器并行连接数）
Ajax 短轮询：频繁发起请求
comet 服务器推
- Ajax 长轮询：服务端阻塞请求直到有数据或者超时才返回
- Iframe 流：src请求一个长连接，服务端返回客户端 js 方法的调用
SSE：服务端推送事件（基于现有HTTP协议，简单，无需借助库类）

网络对象

# XMLHttpRequest 类

# fetch 对象

# WebSocket 类

ON THIS PAGE

XMLHttpRequest 类

fetch 对象

WebSocket 类