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
<?php
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是測試的文本');
echo json_encode($res);
?>
這樣前端就能獲取後端數據並輸出。下面我們來模擬後端不斷推送數據到前端：
一種辦法是前端循環不斷發送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
<?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);
?>
但是這樣的連接輪詢，網絡請求浪費非常明顯，我們也可以讓後端服務器來循環做這件事情，看下面例子
3.原生Ajax，服務器隔一段時間推送一次（後端循環，用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實現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程序設計有所幫助。