Ajax长轮询

最新推荐文章于 2021-08-06 13:05:12 发布

有梦想的Sena

最新推荐文章于 2021-08-06 13:05:12 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/weixin_41238144/article/details/89394408

版权

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

"不间断的通过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">

    //前端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>

server.php: //服务端

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

下面是是Ajax 长轮询的图解：

首先请忽略绿色字体的使用限制，然后哪位朋友有可以推荐的画图工具可以推荐给我，我现在用的是忆图图示。

图中有两次请求（本文中的请求默认均为Ajax），第一次很快返回了结果，然后不间断的立即发送第二次请求，但是第二次请求没有获得数据，所以请求迟迟没有返回（被挂在服务器了，但只要有数据就会再次返回），如果第二次的请求返回数据后，第三次请求旋即会立刻发出，这种技术就称为Ajax 长轮询。

用伪代码来表示就是这样：

<?php//客户端通过Ajax发起请求if ('客户端发送请求' && '服务端有数据可以返回') {    echo '返回数据给客户端';    echo '客户端通过Ajax继续发起请求，然后继续if判断';

}else{    echo'没有数据可以返回，再次执行一次if判断';

}?>

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

有梦想的Sena

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax长轮询

Ajax长轮询属于Ajax轮询的升级版，在客户端和服务端都进行了一些改造，使得消耗更低，速度更快。"不间断的通过Ajax查询服务端"。来，小二，先上代码~：Reception.html //客户端<html><head><title></title>...
复制链接

扫一扫