jquery与php结合实现AJAX长轮询(LongPoll)

所属分类: 网络编程 / AJAX相关 阅读数: 1237
收藏 0 赞 0 分享

HTTP是无状态、单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应。若要实现聊天室、WEBQQ、在线客服、邮箱等这些即时通讯的应用,就要用到“ 服务器推送技术(Comet)”。

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

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

XHTML

<div id="msg"></div>  
<input id="btn" type="button" value="测试" /> 

jQuery

这里使用AJAX请求data.php页面获得‘success'的值,请求的时间达到80秒。在这80秒中若没有从服务端返回‘success'则一直保持连接状态,直到有数据返回或‘success'的值为0才关闭连接。在关闭连接后在继续下一次的请求。

$(function(){ 
 $("#btn").bind("click",{btn:$("#btn")},function(evdata){  
   $.ajax({  
    type:"POST",  
    dataType:"json",  
    url:"data.php",  
    timeout:80000,  //ajax请求超时时间80秒  
    data:{time:"80"}, //40秒后无论结果服务器都返回数据  
    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();  
      }  
    }  
   });  
 });  
}); 

PHP

在这里是无限的循环,循环的结束条件就是获取到了返回结果返回Json数据。

并且接受$_POST['time']参数来限制循环的超时时间,避免资源的过度浪费。(浏览器关闭不会发消息给服务器,使用可能一直循环下去)

if(emptyempty($_POST['time']))exit();  
set_time_limit(0);//无限请求超时时间  
$i=0;  
while (true){  
 //sleep(1);  
 usleep(500000);//0.5秒  
 $i++;  
 //若得到数据则马上返回数据给客服端,并结束本次请求  
 $rand=rand(1,999);  
 if($rand<=15){  
  $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();  
 }  
} 

运行效果:在图中可以看到无数据的请求时间达到了40S,在40S的请求中若获得数据则请求关闭。


更多精彩内容其他人还在看

理解jquery ajax中的datatype属性选项值

jquery中ajax的dataType属性用于指定服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断,如果datatype选项不填写的话,会将返回的数据当成字符串处理。
收藏 0 赞 0 分享

基于Jquery ajax技术实现间隔N秒向某页面传值

这篇文章给大家介绍jquery ajax技术实现每隔一段时间向某页面传值,以及setinterval()方法的语法介绍,对本文感兴趣的朋友可以参考下
收藏 0 赞 0 分享

通过Ajax两种方式讲解Struts2接收数组表单的方法

使用struts2表单传值,可以传一个或者是作为一个对象的各个属性传,都非常灵活便捷。但是如果我们需要传一个数组并希望struts正确接收,该怎么处理呢?接下来,通过本文给大家介绍通过Ajax两种方式讲解Struts2接收数组表单的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

基于Jquery.history解决ajax的前进后退问题

本文主要给大家介绍基于Jquery.history解决ajax的前进后退问题,涉及到jquery前进后退相关方面的知识,本文内容经典,非常具有参考价值,特此把jquery前进后退相关知识分享在脚本之家网站供大家参考
收藏 0 赞 0 分享

使用HTML5中postMessage知识点解决Ajax中POST跨域问题

这篇文章主要介绍了使用HTML5中postMessage知识点解决Ajax中POST跨域问题的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

谈谈你对aja的理解(一、二)

Ajax是Asynchronous Javascript And XML的缩写,其作用通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。
收藏 0 赞 0 分享

关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结

最近比较空闲,于是抽个时间整理些关于ajax方法的东东。在项目中经常发现ajax板块好多问题都是属性,方法,事件大小写不区分问题,最终导致了程序运行出现麻烦,下面给大家介绍关于ajax对象一些常用属性、事件和方法大小写比较常见的问题总结
收藏 0 赞 0 分享

Ajax请求session失效该如何解决

HTML + Servlet + Filter + jQuery 一般来说我们的项目都有登录过滤器,一般请求足以搞定。但是AJAX却是例外的,所以解决方法是设置响应为session失效。
收藏 0 赞 0 分享

编写轻量ajax组件02--浅析AjaxPro

ajaxpro虽然是一个比较老的组件,不过实现思想和源码还是很有借鉴价值的。接下来通过本篇文章给大家介绍编写轻量ajax组件02--浅析AjaxPro,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

编写轻量ajax组件01-与webform平台上的各种实现方式比较

这篇文章主要介绍了编写轻量ajax组件01-与webform平台上的各种实现方式比较,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多