zoukankan      html  css  js  c++  java
  • ajax的轮询和长轮询

    概念:

    轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。

    概念总是枯燥的,只有代码方能解心头之快

    前段代码:index.html:

    <html>
    
    <head>
    
        <title></title>
    
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    
    </head>
    
    <body>
    
    </body>
    
    <script type="text/javascript">
    
            var getting = {
    
            url:'server.php',
    
            dataType:'json',
    
            success:function(res) {
    
             console.log(res);
    
    }
    
    };
    
    //关键在这里,Ajax定时访问服务端,不断获取数据 ,这里是1秒请求一次。
    
    window.setInterval(function(){$.ajax(getting)},1000);
    
    </script>
    
    </html>
    

      服务端PHP代码:server.php

    <?php
    
    $conn = mysqli_connect("localhost","root","","test");
    
    $resource = $conn ->query('select * from t');
    
    $result = $resource->fetchall();
    
    if ($result) {
    
        //exits data
    
        print_r(json_encode(array('success'=>'存在数据')));
    
        
    
    }
    
    print_r(json_encode(array('failed'=>'不存在数据')));
    
    $conn.close
    
    ?>
    

      上面就是最基本最简化的Ajax轮询。判断t表是否有数据,并执行对应输出。 实际项目中的话查询语句就根据实际需求来定就可以了。

    从代码我们可以看出,客户端是按照规定时间(这个时间由你设定,此处默认为1秒)像服务端发送请求,前一次请求完成后,无论有无结果返回,一秒之后下一次请求又会发出。这就叫做Ajax轮询。

    最关键的地方在于,客户端需要通过JS设定一个定时器,按照规定时间不断的请求。

    好,轮询完了,我们来看一下长轮询

    Ajax长轮询属于Ajax轮询的升级版,在客户端和服务端都进行了一些改造,使得消耗更低,速度更快。

    "不间断的通过Ajax查询服务端"。

    同样看代码说话:

    前端代码:

    <html>
    
    <head>
    
    <title></title>
    
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    
    </head>
    
    <body>
    
    </body>
    
    <script type="text/javascript">
    
    //前端Ajax持续调用服务端,称为Ajax轮询技术
    
    var getting = {
    
    url:'server.php',
    
    dataType:'json',
    
    success:function(res) {
    
    console.log(res);
    
    $.ajax(getting); //关键在这里,回调函数内再次请求Ajax
    
    } 
    //当请求时间过长(默认为60秒),就再次调用ajax长轮询
    error:function(res){
    $.ajax($getting);
    }
    
    };
    
    $.ajax(getting);
    
    </script>
    
    </html>
    

      

    服务端代码:

    <?php
    //这段AJAX请求时间永不过期
    set_time_limit(0);
    
    $pdo = new PDO('mysql:dbname=test;host=127.0.0.1','root','root');
    
    $resource = $pdo->query('select * from t1');
    
    $result = $resource->fetchall();
    
    while (true) {
    
        if ($result) {
    
            //exits data
    
            print_r(json_encode(array('success'=>'存在数据,返回')));
    
            exit(); //输出数据,退出。然后客户端不间断继续发起请求
    
        }
    
        //数据不存在,继续循环。
    
    }
    
    ?>
    

      

    长轮询的精髓就在于Ajax的回调函数,继续再次调用Ajax请求(不间断的原理就在这里,成功返回后立即再次调用):

    $.ajax(getting);

    类似于js里面的递归,在函数里面调用函数;

    最关键的地方在于前一次请求结束后,第二次请求立即不间断的发起,这个就叫做Ajax长轮询

  • 相关阅读:
    centOS操作磁盘(命令行)
    TCP学习记录
    公务员考试考什么
    从动物科学到乐队鼓手,腾讯技术小哥的开源人生
    HarmonyOS实战—实现相亲APP
    oracle 以某个字符拆分成多行
    微信小程序预览 word、excel、ppt、pdf 等文件
    微信小程序相关问题排查技巧
    html 保留空格
    (转载)currentColor 让 CSS 更简短
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/7991450.html
Copyright © 2011-2022 走看看