ajax 高级技术

ajax技术是一种从客户端向服务器请求数据的技术,而如果是要将数据从服务器主动推向客户端,那么就需要更加高级的数据传输技术,这些技术主要是为了处理一些在客户端展示服务器上实时变化的数据,数据的变化只有服务端知道,而客户端是需要在服务端更新数据之后马上将新数据展示到页面,这个时候使用ajax技术就很难做到这一点了.

短轮询

短轮询也称为传统轮询,是一种比较古老的方法,这个方法的本质就是,客户端使用一个定时器,每隔一定的时间就向服务端发送ajax请求,将服务端的最新的数据请求回来,但是这种方法很明显是有很大的弊端的.

数据是否更新是由服务端所决定的,所以应该是在服务端数据改变之后,由服务端主动告诉客户端我更新了数据,而不是每次都由客户端去询问服务端，由于数据更新时间不一定满足客户端发送请求的间隔,那么会导致会发送一些无意义的请求,同时也无法做到数据的同步更新.

Comet

实现Comet的方式总共有两种: 长轮询和流.

长轮询

长轮询实际上就是把短轮询颠倒了一下,客户端发起一个请求到服务器,然后服务器一直保持连接打开,直到数据更新有数据可以发送,发送完数据之后,浏览器关闭连接,随即又发起一个新的请求,这个过程在页面打开期间连续不断.

长轮询和短轮询浏览器在接受到数据之前,都会向服务器发送请求,二者的区别在于服务器何时发送请求,长轮询的优势是可以减少无用的请求,同时也能实现数据的实时更新,轮询最大一个优势就是兼容性非常的好,所有浏览器都支持.

HTTP流

流不同于上面两种轮询,因为他在页面的整个生命周期内只使用一个HTTP连接.由浏览器发送一个请求,而服务器一直保持连接打开,然后周期性地向浏览器发送数据.

HTTP流的关键在于所有的服务端语言都支持打印到输出然后刷新的功能,在客户端只需要通过监听readystatechange事件以及readyState的值的变化,随着不断的从服务器接受数据,readyState的值会周期性的变为3,当readyState的值为3的时候,responseText属性中会保存所接受到的所有数据,这个时候需要比较之前的数据,来确定所接受到的最新的数据.

下面是使用XHR对象实现HTTP流的代码:

function createStreamingClient(url, progress, finished) {
  let xhr = new XMLHttpRequest(),
    received = 0
  xhr.open('get', url, true)
  xhr.onreadystatechange = function () {
    let result
    
    if (xhr.readyState === 3) {
      result = xhr.responseText.substring(received)
      received += result.length

      progress(result)
    } else if (xhr.readyState === 4) {
      finished(xhr.responseText)
    }
  }
  xhr.send(null)
  return xhr
}

服务器发送事件

SSE(服务器发送事件),它的api用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据.这里需要注意的是:服务器响应的MIME类型必须为text/event-stream,而且是浏览器中JavaScript API能够解析的格式输出.SSE支持短轮询,长轮询,和HTTP流.

API

首先需要创建一个EventSource对象,传入一个入口点:let source = new EventSource(url)传入的url必须和创建对象的页面同源.EventSource实例对象有一个readyState属性,值为0时表示正在连接服务器,值为1时表示打开连接,值为2时,表示关闭连接.

另外还有三个事件:

open()在创建连接时触发.
message:在从服务器接收到新数据时触发.数据会以字符串形式保存在event.data中.
error: 无法创建连接时触发.

Web Sockets

Web Sockets 的作用是在一个单独的持久连接上提供双向通信.在创建了Web Sockets 之后,会有一个HTTP请求发送到浏览器.取得服务器响应之后,建立的连接会从HTTP协议变成Web Socket 协议.

使用Web Socket 协议的好处在于能够在客户端和服务器之间发送非常少量的数据,因此Web Sockets 非常适合移动应用.

API

首先创建一个WebSockets对象实例,传入一个URL,let socket = new Websocket(url).

实例化WebSockets对象之后,浏览器会马上尝试创建连接.WebSocket有一个表示当前状态的readyState属性,

0 正在连接.
1 已经创建连接.
2 正在关闭连接.
3 已经关闭连接.

发送和接受数据:通过send()方法发送数据,接受任意的字符串.当服务器发送数据到客户端就会触发message事件,数据保存在event.data属性中.

其他事件:

open: 成功创建连接时触发
error: 发生错误时触发
close: 连接关闭时触发.

WebSockets对象不支持dom2级事件监听器,必须使用DOM0级语法来定义每个事件的处理函数.

作者简介：郑佳欢，芦苇科技web前端实习生，公司作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。

作者：广州芦苇科技web前端
链接：https://juejin.im/post/5ce352e8e51d455d844e8b55

链接: https://www.fly63.com/article/detial/3405