这篇文章主要为大家详细介绍了 JavaScript 数据推送 Comet 技术,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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,并当状态改变时,进行输出) 参考:{aa0aa}
- 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("");
来源: http://www.phperz.com/article/17/0225/266381.html