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

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

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

html:

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

javascript:

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

  1. $(function(){
  2. $("#btn").bind("click",{btn:$("#btn")},function(evdata){
  3. $.ajax({
  4. type:"POST",
  5. dataType:"json",
  6. url:"data.php",
  7. timeout:80000,     //ajax请求超时时间80秒
  8. data:{time:"80"}, //40秒后无论结果服务器都返回数据
  9. success:function(data,textStatus){
  10. //从服务器得到数据,显示数据并继续查询
  11. if(data.success=="1"){
  12. $("#msg").append("<br>[有数据]"+data.text);
  13. evdata.data.btn.click();
  14. }
  15. //未从服务器得到数据,继续查询
  16. if(data.success=="0"){
  17. $("#msg").append("<br>[无数据]");
  18. evdata.data.btn.click();
  19. }
  20. },
  21. //Ajax请求超时,继续查询
  22. error:function(XMLHttpRequest,textStatus,errorThrown){
  23. if(textStatus=="timeout"){
  24. $("#msg").append("<br>[超时]");
  25. evdata.data.btn.click();
  26. }
  27. }
  28. });
  29. });
  30. });

PHP:

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

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

  1. if(empty($_POST['time']))exit();
  2. set_time_limit(0);//无限请求超时时间
  3. $i=0;
  4. while (true){
  5. //sleep(1);
  6. usleep(500000);//0.5秒
  7. $i++;
  8. //若得到数据则马上返回数据给客服端,并结束本次请求
  9. $rand=rand(1,999);
  10. if($rand<=15){
  11. $arr=array('success'=>"1",'name'=>'xiaocai','text'=>$rand);
  12. echo json_encode($arr);
  13. exit();
  14. }
  15. //服务器($_POST['time']*0.5)秒后告诉客服端无数据
  16. if($i==$_POST['time']){
  17. $arr=array('success'=>"0",'name'=>'xiaocai','text'=>$rand);
  18. echo json_encode($arr);
  19. exit();
  20. }
  21. }

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

基于jquery,php实现AJAX长轮询(LongPoll),类似推送机制的更多相关文章

  1. Ajax长轮询(LongPoll)

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

  2. Comet 反Ajax: jQuery与PHP实现Ajax长轮询

    原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...

  3. 网页实时聊天之js和jQuery实现ajax长轮询

    众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...

  4. [转]网页实时聊天之js和jQuery实现ajax长轮询 PHP

    网页实时聊天之js和jQuery实现ajax长轮询 众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的 ...

  5. 用 ASP.NET MVC 实现基于 XMLHttpRequest long polling(长轮询) 的 Comet

    ASP.NET 计时器   http://www.cnblogs.com/dudu/archive/2011/10/17/2215321.html   http://www.cnblogs.com/w ...

  6. php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室)

    php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室) 一.总结 1.ajax长轮询和websocket都可以时间网络聊天室 ...

  7. Ajax 长轮询

    长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求. 优点:在无消息的情况下不会频繁的请求. 缺 ...

  8. 用大白话揭开Ajax长轮询(long polling)的神秘面纱

    在看这篇Ajax长轮询之前可以先看看Ajax轮询技术(没有长),有助于理解: Ajax长轮询属于Ajax轮询的升级版,在客户端和服务端都进行了一些改造,使得消耗更低,速度更快. "不间断的通 ...

  9. ajax长轮询 (转)

    javaWeb项目中需要一个实时提醒的功能,也就是某人做了某一操作,可以立即提醒到当前在线的用户 最开始想在用户做了操作后,储存一个状态到数据库中然后用每隔几秒用ajax去请求后台查询数据库来确定是否 ...

随机推荐

  1. Spring 梳理-bean配置与装配

    1       bean配置与装配 1.1      bean在XML文件中进行显示配置并装配 1.2      bean在JavaConfig中显示配置并装配 1.2.1  优点:类型是安全的,编译 ...

  2. map转换成com.google.gson.JsonObject

    String json =new Gson().toJson(map); JsonObject jsonObject =new JsonParser().parse(json).getAsJsonOb ...

  3. CNN之yolo目标检测算法笔记

    本文并不是详细介绍yolo工作原理以及改进发展的文章,只用做作者本人回想与提纲. 1.yolo是什么 输入一张图片,输出图片中检测到的目标和位置(目标的边框) yolo名字含义:you only lo ...

  4. RedHat安装git报错 expected specifier-qualifier-list before ‘z_stream’

    年初开学的时候认识到了git,因为当时也没装虚拟机甚至是不知道虚拟机这个东西,所以就下载了Windows下的git.当时跟着廖雪峰Git教程 学了几个命令.安装了虚拟机,也学了linux的基本命令后, ...

  5. 你不知道的 IDEA Debug调试小技巧

    一.多线程调试断点 Intellij IDEA 的debug断点调试是有一个模式的选择的,就像下面这张图,平时我们都使用的是默认的 ALL(在Eclipse中默认是线程模式) ,这种模式我们只能将一个 ...

  6. asp.net core 3.0 更新简记

    asp.net core 3.0 更新简记 asp.net core 3.0 更新简记 Intro 最近把活动室预约项目从 asp.net core 2.2 更新到了 asp.net core 3.0 ...

  7. android设置透明状态栏

    先是半透明效果(两种方法): 第一种(简单): //直接将下面的代码放在activity中的setContentView(R.layout.activity_main);中之前就行了 if (Buil ...

  8. HTML基础知识(块级标签,行内标签,行内块标签)

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

  9. 使用canvas生成含有微信头像的邀请海报没有微信头像

    最近做了一个微信内访问的H5页面,长按分享图片发送朋友邀请的海报,网上搜索资料,得出解决思路,用canvas将页面绘制生成图片, 问题:canvas 图片跨域. 解决过程(填坑历程): 1.从网上存在 ...

  10. Eclipse 创建 Maven 项目

    本人也是新手小白,在创建 Maven 项目的时候几乎踩完了所有的坑.特此总结如下: 1.咱先选中 File -> New -> Maven Project 2.然后如下图    在这里说明 ...