JavaScript資料推送Comet技術詳解_javascript技巧

JavaScript資料推送主要致力於webapp的線上推播服務，不用我們每次都像伺服器去發送Ajax請求而主動從Server端推送資料到本地。

資料推送演化史：

1. HTTP協定簡易輪詢，保持一個連結不放，或透過前端不停的向後端發送請求

2. H5更新後有了WebSocket大大改善了雙向和單向推送資料的便利性

3. SSE(Server-Send Event)：伺服器推播資料的新方式 

Comet：基於 HTTP 長連線的伺服器推播技術
本課程介紹Comet:基於 HTTP 長連線的伺服器推播技術，Comet 是一種 Web 應用架構。伺服器端會主動以非同步的方式向客戶端程式推送資料（Ajax請求死循環），而不需要客戶端明確的發出請求。 Comet 架構非常適合事件驅動的 Web 應用，以及對互動性和即時性需求很強的應用，如股票交易行情分析、聊天室和 Web 版線上遊戲等。

 1.先來看一個最簡單的ajax請求json資料範例：

index.html

<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
  }
 });
</script>

data.php

<&#63;php 
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
&#63;>

這樣前端就能取得後端資料並輸出。下面我們來模擬後端不斷推送資料到前端：

一種辦法是前端循環不斷發送ajax請求

2.前端jQuery的Ajax不斷發送請求：

index.html

<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function conn(){
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
   conn();
  }
 });
}
conn(); 
</script>

data.php

<&#63;php 
header('Content-type: application/json;charset=utf-8');
header("Cache-Control:max-age=0"); //设置没有缓存
sleep(1);
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
&#63;>

但是這樣的連接輪詢，網路請求浪費非常明顯，我們也可以讓後端伺服器來循環做這件事情，看下面例子

3.原生Ajax，伺服器隔一段時間推送一次（後端循環，用ob_flush()和flush()吐資料）

data.php

<&#63;php 
// header('Content-type: application/json;charset=utf-8');
header("Cache-Control:max-age=0"); //设置没有缓存
$i = 0;
while ($i<9) {
 $i++;
 // $res = array('success'=>'ok', 'text'=>'我是测试的文本');
 // echo json_encode($res);
 sleep(1);
 $radom = rand(1,999);
 echo $radom;
 echo '<br/>';
 ob_flush(); //输出缓存，必须和flush()一起使用
 flush(); //缓存吐到浏览器
}
&#63;>

前台js（原生js實作ajax，並當狀態改變時，進行輸出） 參考：http://www.jb51.net/article/82085.htm

var getXmlHttpRequest = function() {
 if (window.XMLHttpRequest) {
  //主流浏览器提供了XMLHttpRequest对象
  return new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  //低版本的IE浏览器没有提供XMLHttpRequest对象
  //所以必须使用IE浏览器的特定实现ActiveXObject
  return new ActiveXObject("Microsoft.XMLHttpRequest");
 }

};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
 console.log(xhr.readyState);
 if (xhr.readyState === 3 && xhr.status === 200) {
  //获取成功后执行操作
  //数据在xhr.responseText
  console.log(xhr.responseText);
 }
};
xhr.open("get", "data.php", true);
xhr.send("");

以上就是本文的全部內容，希望對大家學習javascript程式設計有所幫助。