《高级程序设计》-21章学习笔记_高级程序设计中长轮询-CSDN博客

本文链接：https://blog.csdn.net/c_lam_e/article/details/114794300

AJAX

Asynchronous JavaScript And XML

内容

Ajax的核心是 XMLHttpRequest, 简称XHR，最初由微软引入的一个特性，后期其他浏览器提供商也开始支持

用法

const xhr = new XMLHttpRequest()

xhr.onreadystatechange = (ev: Event) => {
  // readyState值含义
  // 0-未初始化，即调用open之前
  // 1，启动，调用了open()但是还未调用send()
  // 2，以发送，还未收到数据
  // 3,接收到部分数据
  // 4，完成，接收到全部响应数据
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
      // 请求成功
    } else {
      // 请求失败
    }
  }
}

//  设置或者获取头部信息
xhr.setRequestHeader(hearderName: string, value: string)
// 获取某个头部字段的值
xhr.getResponseHeader(headerName:string)
// 获取所有头部信息
xhr.getAllResponseHeaders()

xhr.open(method: String, url: string, async: boolean)
//body: 作为请求主体发送的数据，否则传null
xhr.send(body ?: Documentr | BodyInit)

// 取消异步请求
xhr.abort()

GET请求

注意：get请求后面通过&拼接的参数跟值都需要只用encodeURIComponent()进行编码

POST请求

post请求中，如果想以form形

XMLHttpRequest 2级

对XHR进一步的发展，新定义了一些API

FormData

作用: 序列化表单、创建跟表单格式格式相同的数据

使用：

// 初始化一个FormData对象，form是作为初始化的数据
const data = new FormData(form ? HTMLFormElement)

// 添加参数
// fileName:传给服务器的文件名，当一个Blob或者File作为第二个参数的时候
// 注意的是：append()方法不会覆盖相同键值的值，指挥增加到后面
data.append(name: string, value: string | Blob, fileName ?: string)
// 如果想在有相同键值的时候覆盖值，可以使用set
data.set(name: string, value: string | Blob, fileName ?: string)
// 也可以删除某个键值
data.detele(name)

超时设定

可以通过对timeout属性赋值，来指定在等待多少毫秒之后终止

可以通过ontimeout方法来监听

xhr.timeout = 1000
xhr.ontimeout = (ev:ProgressEvent<EventTarget>) => { }

进度事件

loadstart: 在接收到相应数据的第一个子节时开始触发
progress: 在接收响应期间持续不断的触发
error:在请求发生错误时触发
abort:调用abort()方法而终止连接时触发
load:在接收到完整响应数据时触发，可以替代readyState===4的检测校验
loadend: 在触发error、abort、load事件之后触发

Comet

Alex Russell发明的一个词儿，指的时一种更高级的Ajax技术，也别称为服务器推送

与Ajax的区别： Ajax时一种从页面向服务器请求数据的技术；而Comet则是一种服务器想页面推送数据的技术

实现方式

轮询（浏览器先向服务区器发起请求）
- 长轮询：页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接，随即由发起一个到服务器的新请求
- 短轮询：浏览器定时像服务器发送请求，看看有没有数据更新
流：与轮询不同，他在页面的整个生命周期内只是用一个HTTP请求，即六拉姆齐先像服务器发起请求，之后服务器一直保持连接打开，周期性的像浏览器发送数据

服务器发送事件SSE

Server-Sent Events: 创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据

SSE:支持短轮询、长轮询和HTTP流，而且能在断开时自动确定何时重新连接，

// 预定事件流
const source = new EventSource(url: string, eventSourceInitDict ?: EventSourceInit)
source.onmessage = function (event) {
  var = event.data
}
// 关闭连接
source.close()

Web Sockets

双向通信， Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。在JavaScript中创建了Web Sockets之后，会有一个HTTP请求发送到浏览器以发起连接，在取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为Web Socket协议。

也就是说，使用标准的HTTP服务器无法实现Web Sockets,只有支持这种协议的专门服务器才能正常工作

Web Sockets使用了自定义的协议，随意URL模式使用的是 ws:// 或者 wss://

const socket = new WebSocket(url: string, protocols ?: string | string[])

注意：同源策略对 Web Socket不适用，因此可以通过它打开任意站点的连接，至于是否与某个域中的页面通信，则完全取决与服务器