zoukankan      html  css  js  c++  java
  • Comet 反Ajax: jQuery与PHP实现Ajax长轮询

    原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8Ephp%E5%AE%9E%E7%8E%B0ajax%E9%95%BF%E8%BD%AE%E8%AF%A2longpoll/)

    页面代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>jQuery与PHP实现Ajax长轮询</title>
        <script src="http://sources.ikeepstudying.com/js/jquery-1.11.3.min.js"></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"}, //6秒后无论结果服务器都返回数据   
                        success:function(data,textStatus){
                            console.log(evdata);
                            //从服务器得到数据,显示数据并继续查询     
                            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){
                             console.log(textStatus);
                            if(textStatus=="parsererror"){
                                $("#msg").append("<br>[超时]");
                                evdata.data.btn.click();
                            }
                         }
                        });
                });
            });
        </script>
    </head>
    <body>
        <div id="msg"></div>
        <input id="btn" type="button" value="测试" />
    </body>
    </html>

    php代码:

    <?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();     
        }     
    }
    
    ?>

    下面是测试结果:

      

     下面推荐几篇写的很好的文章,关于轮询和连接的:

      http://web.jobbole.com/85541/  (谈谈HTTP协议中的短轮询、长轮询、长连接和短连接)

      http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html  (内容:web通信之长连接、长轮询)

      http://blog.zhangruipeng.me/2015/10/22/Web-Connectivity/  (内容:传统轮询、长轮询、服务器推送事件和WebSocket)

      

  • 相关阅读:
    多种方式实现数组的扁平化处理
    利用node中的内置模块fs实现对简单文件的读取 拷贝 创建等功能
    浅谈es5和es6中的继承
    js之冒泡排序与快速排序
    IE5,IE6,IE7,IE8的css兼容性列表[转自MSDN]
    css3 动画
    各种浏览器css hack
    解决li在ie,firefox中行高不一致问题
    Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
    png-24在ie6中的几种透明方法
  • 原文地址:https://www.cnblogs.com/zengguowang/p/5995472.html
Copyright © 2011-2022 走看看