JavaScript數(shù)據(jù)推送主要致力于webapp的在線推送服務(wù)，不用我們每次都像服務(wù)器去發(fā)送Ajax請求而主動從Server端推送數(shù)據(jù)到本地。
數(shù)據(jù)推送進(jìn)化史：
1. HTTP協(xié)議簡易輪詢，保持著一個鏈接不放，或者通過前端不停的向后端發(fā)送請求
2. H5更新后有了WebSocket大大改善了雙向和單向推送數(shù)據(jù)的便利性
3. SSE(Server-Send Event)：服務(wù)器推送數(shù)據(jù)的新方式
Comet：基于 HTTP 長連接的服務(wù)器推送技術(shù)
本課時介紹Comet:基于 HTTP 長連接的服務(wù)器推送技術(shù)，Comet 是一種 Web 應(yīng)用架構(gòu)。服務(wù)器端會主動以異步的方式向客戶端程序推送數(shù)據(jù)（Ajax請求死循環(huán)），而不需要客戶端顯式的發(fā)出請求。Comet 架構(gòu)非常適合事件驅(qū)動的 Web 應(yīng)用，以及對交互性和實時性要求很強(qiáng)的應(yīng)用，如股票交易行情分析、聊天室和 Web 版在線游戲等。
1.先來看一個最簡單的ajax請求json數(shù)據(jù)例子：
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);?>這樣前端就能獲取后端數(shù)據(jù)并輸出。下面我們來模擬后端不斷推送數(shù)據(jù)到前端：
一種辦法是前端循環(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"); //設(shè)置沒有緩存sleep(1);$res = array('success'=>'ok', 'text'=>'我是測試的文本');echo json_encode($res);?>但是這樣的連接輪詢，網(wǎng)絡(luò)請求浪費非常明顯，我們也可以讓后端服務(wù)器來循環(huán)做這件事情，看下面例子
3.原生Ajax，服務(wù)器隔一段時間推送一次（后端循環(huán)，用ob_flush()和flush()吐數(shù)據(jù)）
data.php
<?php // header('Content-type: application/json;charset=utf-8');header("Cache-Control:max-age=0"); //設(shè)置沒有緩存$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，并當(dāng)狀態(tài)改變時，進(jìn)行輸出） 參考：//www.survivalescaperooms.com/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í)行操作 //數(shù)據(jù)在xhr.responseText console.log(xhr.responseText); }};xhr.open("get", "data.php", true);xhr.send("");以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
新聞熱點
疑難解答
