AJax技术

Comet反Ajax:基于jQuery与PHP实现Ajax长轮询(LongPoll)

字号+ 作者:H5之家 来源:H5之家 2017-06-17 08:00 我要评论( )

传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据。种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度,但太短的时间间隔客

> 编程开发 > AJAX相关 >

Comet反Ajax:基于jQuery与PHP实现Ajax长轮询(LongPoll) 2017-06-15 11:45 出处:清屏网 人气: 

传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据。种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度,但太短的时间间隔客服端会对服务器在短时间内发送出多个请求。

反转AJAX,就是所谓的长轮询或者COMET。服务器与客服端需要保持一条长时间的请求,它使得服务器在有数据时可以返回消息给客户端。

Comet是一种服务器向页面推送数据的技术,Comet能让信息近乎实时的被推送到页面上。

前端 index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery与PHP实现Ajax长轮询</title> <script src=""></script> <script type="text/javascript"> $(function(){ $("#btn").bind("click",{btn:$("#btn")},function(evdata){ $.ajax({ type:"POST", dataType:"json", url:"comet.php", timeout:10000, //ajax请求超时时间10秒 data:{time:"6"}, //3秒后无论结果服务器都返回数据 success:function(data,textStatus){ //从服务器得到数据,显示数据并继续查询 if(data.success=="1"){ $("#msg").append("<br>[有数据]"+data.text); evdata.data.btn.click(); } //未从服务器得到数据,继续查询 if(data.success=="0"){ $("#msg").append("<br>[无数据]"); evdata.data.btn.click(); } }, //Ajax请求超时,继续查询 error:function(XMLHttpRequest,textStatus,errorThrown){ if(textStatus=="timeout"){ $("#msg").append("<br>[超时]"); evdata.data.btn.click(); } } }); }); }); </script> </head> <body> <div id="msg"></div> <input id="btn" type="button" value="测试" /> </body> </html> <?php if(empty($_POST['time'])) exit(); set_time_limit(0);//无限请求超时时间 $i=0; while (true) { //sleep(1); usleep(500000);//0.5秒 $i++; //若得到数据则马上返回数据给客服端,并结束本次请求 $rand=rand(1,999); if($rand<=100){ $arr=array('success'=>"1",'name'=>'xiaocai','text'=>$rand); echo json_encode($arr); exit(); } //服务器($_POST['time']*0.5)秒后告诉客服端无数据 if($i==$_POST['time']){ $arr=array('success'=>"0",'name'=>'xiaocai','text'=>$rand); echo json_encode($arr); exit(); } }

分享给小伙伴们:

本文标签: Ajax,jQuery,Comet/">Ajax,jQuery,Comet

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

  • 本类最热新闻

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • Ajax轮询请求状态(微信公众号带参数二维码登录网站)

      Ajax轮询请求状态(微信公众号带参数二维码登录网站)

      2017-06-17 15:04

    • 网页基础 / Javascript/Ajax

      网页基础 / Javascript/Ajax

      2017-06-16 08:03

    • Ajax蜗牛学院原创博客,移动互联网人才孵化基地

      Ajax蜗牛学院原创博客,移动互联网人才孵化基地

      2017-06-16 08:01

    • Javascript和Ajax中文乱码吐血版解决方案

      Javascript和Ajax中文乱码吐血版解决方案

      2017-06-15 18:00

    网友点评