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

最新推荐文章于 2021-08-06 19:46:30 发布

无涯大者

最新推荐文章于 2021-08-06 19:46:30 发布

阅读量5.4k

点赞数 1

分类专栏： PHP web前端文章标签： php ajax 轮询实现数据

本文链接：https://blog.csdn.net/fengqingtao2008/article/details/82146646

版权

PHP 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

web前端

27 篇文章 1 订阅

订阅专栏

轮询（polling）

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

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

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

前段页面：

<!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接口

$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，实现了浏览器与服务器的全双工通信，可以很好地节省服务器资源。他的原理是客户端向服务器发送请求后，如果服务器没有新数据就不做响应，等有新数据时，服务器就主动向客户端传递数据。

详情请查看《WebSocket 教程》学习教程

无涯大者

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
Ajax轮询定时的通过Ajax查询服务端

轮询（polling）客户端按规定时间定时向服务端发送ajax请求，服务器接到请求后马上返回响应信息并关闭连接。 ajax轮询的原理就是客户端定时向服务端发送ajax请求，服务器接到请求后马上返回响应信息并关闭连接，然后客户端继续发送ajax请求，一直持续这个循环。var getting = { url:'请求的服务器地址', dataTyp...
复制链接

扫一扫