JavaScript数据推送Comet技术详解
JavaScript数据推送主要致力于webapp的在线推送服务，不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地。
数据推送进化史：
1.HTTP协议简易轮询，保持着一个链接不放，或者通过前端不停的向后端发送请求
2.H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性
3.SSE(Server-SendEvent)：服务器推送数据的新方式
Comet：基于HTTP长连接的服务器推送技术
本课时介绍Comet:基于HTTP长连接的服务器推送技术，Comet是一种Web应用架构。服务器端会主动以异步的方式向客户端程序推送数据（Ajax请求死循环），而不需要客户端显式的发出请求。Comet架构非常适合事件驱动的Web应用，以及对交互性和实时性要求很强的应用，如股票交易行情分析、聊天室和Web版在线游戏等。
1.先来看一个最简单的ajax请求json数据例子：
index.html
<metacharset="utf-8">
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<scripttype="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'=>'我是测试的文本');
echojson_encode($res);
?>
这样前端就能获取后端数据并输出。下面我们来模拟后端不断推送数据到前端：
一种办法是前端循环不断发送ajax请求
2.前端jQuery的Ajax不断发送请求：
index.html
<metacharset="utf-8">
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<scripttype="text/javascript">
functionconn(){
$.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'=>'我是测试的文本');
echojson_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'=>'我是测试的文本');
//echojson_encode($res);
sleep(1);
$radom=rand(1,999);
echo$radom;
echo'<br/>';
ob_flush();//输出缓存，必须和flush()一起使用
flush();//缓存吐到浏览器
}
?>
前台js（原生js实现ajax，并当状态改变时，进行输出）参考：https://www.nhooo.com/article/82085.htm
vargetXmlHttpRequest=function(){
if(window.XMLHttpRequest){
//主流浏览器提供了XMLHttpRequest对象
returnnewXMLHttpRequest();
}elseif(window.ActiveXObject){
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
returnnewActiveXObject("Microsoft.XMLHttpRequest");
}
};
varxhr=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程序设计有所帮助。