zoukankan      html  css  js  c++  java
  • Ajax轮询——“定时的通过Ajax查询服务端”

    Ajax轮询——"定时的通过Ajax查询服务端"。

    概念:

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

    百闻不如一见,来段代码相信你一看就明白

    //为了让同学们都明白,我用了最简单的实现方法,同学们懂了原理后可以自行衍生:

    Reception.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>
    

    //服务端。

    server_polling.php

    <?php
    
    $pdo = new PDO('mysql:dbname=test;host=127.0.0.1','root','root');
    
    $resource = $pdo->query('select * from t1');
    
    $result = $resource->fetchall();
    
    if ($result) {
    
        //exits data
    
        print_r(json_encode(array('success'=>'存在数据')));
    
        exit();
    
    }
    
    print_r(json_encode(array('failed'=>'不存在数据')));
    
    exit();
    
    ?>
    

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

    Ajax轮询最关键的地方在于"window.setInterval(function(){$.ajax(getting)},1000);" ,也就是文章开头所说的"客户端按规定时间定时像服务端发送ajax请求"。

    我们用图解释一下吧:

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

    用伪代码来表示一下:

    <?php
    
    //Ajax轮询
    
    while(true){
    
        echo'发送一次请求';
    
        sleep(1) ; //这次请求发送完毕了,休息一秒钟之后继续发起请求
    
    }
    
    ?>
    

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

    容易吧,其实真就没那么难,很多时候,仅仅是我们自己被新技术吓到罢了

    嗯那么我们接下来看看Ajax 长轮询,算是Ajax轮询的升级版

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

    原文:

    https://segmentfault.com/a/1190000005032921

  • 相关阅读:
    Proof of Stake-股权证明 系列3
    共识算法的比较:Casper vs Tendermint
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
    我的友情链接
  • 原文地址:https://www.cnblogs.com/chunguang/p/5538388.html
Copyright © 2011-2022 走看看