Ajax+PHP实现网页实时更新

在上一篇文章中菠菜园分享了PHP与Ajax实现的页面局部刷新，参考链接：https://www.zkii.net/tech/jquery/739.html 但是在实际开发项目中，我们想要实现用户发布新内容之后，网页上无刷新实时显示，那么前面的文章中的局部刷新就会出现一系列的弊端。

要想实现网页内容实时更新，我们经常采用的是长连接的方式。即用户浏览器与服务器之间在访问页面的时候建立长连接，在服务器端有新数据的时候，及时的推送至客户端。

示例代码如下：

前端网页部分源码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     <script  type="text/javascript" src="http://s1.hqbcdn.com/??lib/jquery/jquery-1.7.2.min.js"></script>
  6. </head>
  7. <body>
  8. <div id="msg"></div>
  9. <input id="btn" type="button" value="测试" />
  10. <script  type="text/javascript" >
  11.     $(function(){
  12.         $("#btn").bind("click",{btn:$("#btn")},function(evdata){
  13.             $.ajax({
  14.                 type:"POST",
  15.                 dataType:"json",
  16.                 url:"data.php",
  17.                 timeout:80000,     //ajax请求超时时间80秒
  18.                 data:{time:"80"}, //40秒后无论结果服务器都返回数据
  19.                 success:function(data,textStatus){
  20.                     //从服务器得到数据，显示数据并继续查询
  21.                     if(data.success=="1"){
  22.                         $("#msg").append("<br>[有数据]"+data.text);
  23.                         evdata.data.btn.click();
  24.                     }
  25.                     //未从服务器得到数据，继续查询
  26.                     if(data.success=="0"){
  27.                         $("#msg").append("<br>[无数据]");
  28.                         evdata.data.btn.click();
  29.                     }
  30.                 },
  31.                 //Ajax请求超时，继续查询
  32.                 error:function(XMLHttpRequest,textStatus,errorThrown){
  33.                     if(textStatus=="timeout"){
  34.                         $("#msg").append("<br>[超时]");
  35.                         evdata.data.btn.click();
  36.                     }
  37.                 }
  39.             });
  40.         });
  42.     });
  43. </script>
  44. </body>
  45. </html>

后端响应前端请求部分源码：

  1. <?php
  2.     if(emptyempty($_POST['time']))exit();
  3.     set_time_limit(0);//无限请求超时时间        
  4.     $i=0;
  5.     while (true){
  6.         //sleep(1);        
  7.         usleep(500000);//0.5秒        
  8.         $i++;
  10.         //若得到数据则马上返回数据给客服端，并结束本次请求        
  11.         $rand=rand(1,999);
  12.         if($rand<=15){
  13.             $arr=array('success'=>"1",'name'=>'xiaoyu','text'=>$rand);
  14.             echo json_encode($arr);
  15.             exit();
  16.         }
  18.         //服务器($_POST['time']*0.5)秒后告诉客服端无数据        
  19.         if($i==$_POST['time']){
  20.             $arr=array('success'=>"0",'name'=>'xiaoyu','text'=>$rand);
  21.             echo json_encode($arr);
  22.             exit();
  23.         }
  24.     }
  25. ?>

第一版写的源代码在测试时发现只能电脑上能正常运行，部分苹果手机可以运行。所以2017年8月9日重新把原先的代码删掉，换成现在的。安卓手机可以正常使用。仅剩下微信内核的浏览器暂不可用。折衷的办法就是为页面的链接加上请求的时间戳，这个本没有什么意义，但是加过之后微信端就可以正常使用了。估计是内核缓存的问题，同一个页面不重复请求，加了时间戳后浏览器会认为是一个新页面。

文件下载

社区直播小程序点击获取
演示地址
  • 版权声明： 本文源自 CSDN博客， 于7年前，由整理发表，共 2654字。
  • 原文链接：点此查看原文
你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！