首页 > 编程语言 > 详细

Javascript Ajax总结——其他跨域技术之Comet

时间:2019-07-06 15:56:45      阅读:114      评论:0      收藏:0      [点我收藏+]
Comet指一种更高级的Ajax技术( 也称 “服务器推送” ),一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地被推送到页面上,非常适合体育比赛的分数和股票报价
有两种实现Comet的方式:长轮询、流
传统轮询(也称短轮询),即浏览器定时向服务器发送请求,看有没有更新的数据。
长轮询把短轮询颠倒了一下。页面发起一个到服务器的新请求,然后服务器一直保持连接打开,直到有数据可发送。发送完数据之后,浏览器关闭连接,随即又发送一个到服务器的新请求。这一过程在页面打开期间一直持续不断。
轮询的优势是所有浏览器都支持,因为使用XHR对象和setTimeout()就能实现。而你要做的就是决定什么时候发送请求。
HTTP流,在页面的整个生命周期内只使用一个HTTP连接。浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据。
如,下面这段PHP脚本就是采用流实现的服务器中常见的形式:
 1 <?php
 2     $i = 0;
 3     while(true){
 4         //输出一些数据,然后立即刷新输出缓存
 5         echo "Number is $i";
 6         flush();
 7         //等几秒钟
 8         sleep(10);
 9         $i++;
10     }
11 ?>

所有服务器语言都支持打印到输出缓存然后刷新(将输出缓存中的内容一次性全部发送到客户端)的功能。而这正是实现HTTP流的关键所在。
Firefox、Safari、Opera、Chrome中,通过侦听readystatechange事件及检测readyState的值是否为3,就可以利用XHR对象实现HTTP流。随着不断从服务器接收数据,readyState的值会周期性地变为3,。当readyState值变为3时,responseText属性就会保存接收到的所有数据。此时,比较此前接收到的数据,决定从什么位置开始取得最新的数据。使用XHR对象实现HTTP流的典型代码:
 1 function createStreamingClient(url, progress, finished){
 2     var xhr = new XMLHttpRequest(),
 3         received = 0;
 4     xhr.open("get, url, true");
 5     xhr.onreadystatechange = function(){
 6         var result;
 7         if(xhr.readyState ==3){
 8             //只取得最新数据并调整计数器
 9             result = xhr.responseText.substring(received);
10             received += result.length;
11             //调用progress回调函数
12             progress(result);
13         } else if (xhr.readyState ==4){
14             finished(xhr.response);
15         }
16     };
17     xhr.send(null);
18     return xhr;
19 }
20 var client = createStreamingClient("streaming.php", function(data){
21     alert("Received: " + data);
22 }, function(data){
23     alert("Done!");
24 });

这个例子能在大多数浏览器中正常运行(IE除外),但管理Comet连接很容易出错,需要时间不短改进才能达到完美。

Javascript Ajax总结——其他跨域技术之Comet

原文:https://www.cnblogs.com/wuxxblog/p/11140778.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!