Ajax轮询(定时的通过Ajax查询服务端)案例

什么是轮询?

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

 

Ajax轮询代码案例:

1、test.html //前端代码

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

 

2、server.php //服务端代码

  1. <?php
  2. $pdo = new PDO('mysql:dbname=test;host=127.0.0.1','root','root');
  3. $resource = $pdo->query('select * from table');
  4. $result = $resource->fetchall();
  5. if ($result) {
  6. //exits data
  7.     print_r(json_encode(array('success'=>'存在数据')));
  8. exit();
  9. }
  10. print_r(json_encode(array('failed'=>'不存在数据')));
  11. exit();

 

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

 

Ajax轮询最关键的地方在于:

  1. window.setInterval(function(){$.ajax(getting)},1000);

也就是文章开头所说的"客户端按规定时间定时像服务端发送ajax请求"。

 

Ajax轮询原理:

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

 

用伪代码来表示一下:

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

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

ajax轮循

    A+
发布日期:2017年05月06日  所属分类:Ajax
最后修改时间:2017-05-06 16:34
评分: (当前没有评级)
付杰
SEO顾问服务 中小型网站 单站/最低99.9元 全方位优化
SEO顾问服务 中小型网站 单站/最低99.9元 全方位优化
  • ¥ 99.9元
  • 市场价:5000元
永久免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
永久免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元
wordpress discux dedecms 帝国 phpcms等快速建站服务
wordpress discux dedecms 帝国 phpcms等快速建站服务
  • ¥ 99.9元
  • 市场价:499.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

  1. 自由人 1

    哇,确实不错的,新技能get




    0



    0