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链接很容易出错,须要时间不短改进才能达到完美。