這篇文章主要為大家詳細介紹了JavaScript數據推送Comet技術，感興趣的小伙伴們可以參考一下

JavaScript數據推送主要致力于webapp的在線推送服務，不用我們每次都像服務器去發(fā)送Ajax請求而主動從Server端推送數據到本地。

數據推送進化史：

1. HTTP協(xié)議簡易輪詢，保持著一個鏈接不放，或者通過前端不停的向后端發(fā)送請求

2. H5更新后有了WebSocket大大改善了雙向和單向推送數據的便利性

3. SSE(Server-Send Event)：服務器推送數據的新方式 

Comet：基于 HTTP 長連接的服務器推送技術

本課時介紹Comet:基于 HTTP 長連接的服務器推送技術，Comet 是一種 Web 應用架構。服務器端會主動以異步的方式向客戶端程序推送數據（Ajax請求死循環(huán)），而不需要客戶端顯式的發(fā)出請求。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

<?php 

header('Content-type: application/json;charset=utf-8');

$res = array('success'=>'ok', 'text'=>'我是測試的文本');

echo json_encode($res);

?>

這樣前端就能獲取后端數據并輸出。下面我們來模擬后端不斷推送數據到前端：

一種辦法是前端循環(huán)不斷發(fā)送ajax請求

2.前端jQuery的Ajax不斷發(fā)送請求：

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

<?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);

?>

但是這樣的連接輪詢，網絡請求浪費非常明顯，我們也可以讓后端服務器來循環(huán)做這件事情，看下面例子

3.原生Ajax，服務器隔一段時間推送一次（后端循環(huán)，用ob_flush()和flush()吐數據）

data.php

<?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(); //緩存吐到瀏覽器

}

?>

前臺js（原生js實現(xiàn)ajax，并當狀態(tài)改變時，進行輸出） 參考：http://www.jb51.net/article/82085.htm

var getXmlHttpRequest = function() {

 if (window.XMLHttpRequest) {

  //主流瀏覽器提供了XMLHttpRequest對象

  return new XMLHttpRequest();

 } else if (window.ActiveXObject) {

  //低版本的IE瀏覽器沒有提供XMLHttpRequest對象

  //所以必須使用IE瀏覽器的特定實現(xiàn)ActiveXObject

  return new ActiveXObject("Microsoft.XMLHttpRequest");

 }

};

var xhr = getXmlHttpRequest();

xhr.onreadystatechange = function() {

 console.log(xhr.readyState);

 if (xhr.readyState === 3 && xhr.status === 200) {

  //獲取成功后執(zhí)行操作

  //數據在xhr.responseText

  console.log(xhr.responseText);

 }

};

xhr.open("get", "data.php", true);

xhr.send("");

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