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

來源：掘金

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。