前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ajax轮询定时的通过Ajax查询服务端

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

作者头像
挨踢小子部落阁
发布2019-07-02 16:05:51
2.2K0
发布2019-07-02 16:05:51
举报

轮询(polling)

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

ajax轮询的原理就是客户端定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接,然后客户端继续发送ajax请求,一直持续这个循环。

代码语言:javascript
复制
var getting = {
        url:'请求的服务器地址',
        dataType:'json',
        success:function(res) {
          $('#com').html(str);
          setTimeout(function(){$.ajax(getting);},1000);//1秒后定时发送请求
        }
};
$.ajax(getting) 

前端页面:

代码语言:javascript
复制
 <!doctype html>
<html lang="zh-CN">
<head>
    <title>这是一个测试</title>
</head>
<body>
  <div id="info"></div>
</body>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

        var getting = {

        url:'server.php',

        dataType:'json',

        success:function(res) {
            console.log(res);
        if(res.code=200){
            $("#info").append(res.info+'</br>');
        }else{
            console.log(res);
        }
}
};
//关键在这里,Ajax定时访问服务端,不断获取数据 ,这里是3秒请求一次。
window.setInterval(function(){$.ajax(getting)},3000);
</script>
</html> 

后端PHP接口

代码语言:javascript
复制
$pdo = new PDO('mysql:dbname=test;host=127.0.0.1','root','Ltest');

$resource = $pdo->query('select * from z_test');

$result = $resource->fetchall();

if ($result) {

    print_r(json_encode(array('code'=>'200','success'=>'获取数据成功','info'=>'这是测试')));

    exit();

}
  print_r(json_encode(array('code'=>'400','success'=>'获取数据失败','info'=>'')));

exit(); 

ajax轮询的方式实现比较简单,但是比较浪费服务器的资源,服务器大多时间处理的是无用的请求。

最近在关注HTML5的一个新的协议websocket,实现了浏览器与服务器的全双工通信,可以很好地节省服务器资源。他的原理是客户端向服务器发送请求后,如果服务器没有新数据就不做响应,等有新数据时,服务器就主动向客户端传递数据。

作者:json2008

原文:https://blog.csdn.net/fengqingtao2008/article/details/82146646

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-06-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 挨踢小子 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档