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)

      

  • 相关阅读:
    112. Path Sum
    66. Plus One
    258. Add Digits
    268. Missing Number
    275. H-Index II
    274. H-Index
    264. Ugly Number II
    263. Ugly Number
    199. Binary Tree Right Side View
    222. Count Complete Tree Nodes
  • 原文地址:https://www.cnblogs.com/zengguowang/p/5995472.html
Copyright © 2011-2022 走看看