ajax 高级技术

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

短轮询

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

1. 数据是否更新是由服务端所决定的,因此应该是在服务端数据改变以后,由服务端主动告诉客户端我更新了数据,而不是每次都由客户端去询问服务端.
2. 因为数据更新时间不必定知足客户端发送请求的间隔,那么会致使会发送一些无心义的请求,同时也没法作到数据的同步更新.

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

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

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

Web Sockets

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

使用Web Socket 协议的好处在于可以在客户端和服务器之间发送很是少许的数据,所以Web Sockets 很是适合移动应用.

API

1. 首先建立一个WebSockets对象实例,传入一个URL,let socket = new Websocket(url).
2. 实例化WebSockets对象以后,浏览器会立刻尝试建立链接.WebSocket有一个表示当前状态的readyState属性,

• 0 正在链接.
• 1 已经建立链接.
• 2 正在关闭链接.
• 3 已经关闭链接.

3. 发送和接受数据:

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

4. 其余事件:

• open: 成功建立链接时触发
• error: 发生错误时触发
• close: 链接关闭时触发.

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

【完】

做者简介：郑佳欢，芦苇科技web前端实习生，公司做品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专一于前端领域框架、交互设计、图像绘制、数据分析等研究。 一块儿并肩做战： zhengjiahuan@talkmoney.cn 访问 www.talkmoney.cn 了解更多

做者：广州芦苇科技web前端

连接：http://www.javashuo.com/article/p-xegqxvrs-dq.html

来源：掘金

著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。