在上一篇文章中菠菜园分享了PHP与Ajax实现的页面局部刷新，参考链接：https://www.zkii.net/tech/jquery/739.html 但是在实际开发项目中，我们想要实现用户发布新内容之后，网页上无刷新实时显示，那么前面的文章中的局部刷新就会出现一系列的弊端。
要想实现网页内容实时更新，我们经常采用的是长连接的方式。即用户浏览器与服务器之间在访问页面的时候建立长连接，在服务器端有新数据的时候，及时的推送至客户端。
示例代码如下：
前端网页部分源码：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <script type="text/javascript" src="http://s1.hqbcdn.com/??lib/jquery/jquery-1.7.2.min.js"></script>
- </head>
- <body>
- <div id="msg"></div>
- <input id="btn" type="button" value="测试" />
- <script type="text/javascript" >
- $(function(){
- $("#btn").bind("click",{btn:$("#btn")},function(evdata){
- $.ajax({
- type:"POST",
- dataType:"json",
- url:"data.php",
- timeout:80000, //ajax请求超时时间80秒
- data:{time:"80"}, //40秒后无论结果服务器都返回数据
- success:function(data,textStatus){
- //从服务器得到数据，显示数据并继续查询
- if(data.success=="1"){
- $("#msg").append("<br>[有数据]"+data.text);
- evdata.data.btn.click();
- }
- //未从服务器得到数据，继续查询
- if(data.success=="0"){
- $("#msg").append("<br>[无数据]");
- evdata.data.btn.click();
- }
- },
- //Ajax请求超时，继续查询
- error:function(XMLHttpRequest,textStatus,errorThrown){
- if(textStatus=="timeout"){
- $("#msg").append("<br>[超时]");
- evdata.data.btn.click();
- }
- }
- });
- });
- });
- </script>
- </body>
- </html>
后端响应前端请求部分源码：
- <?php
- if(emptyempty($_POST['time']))exit();
- set_time_limit(0);//无限请求超时时间
- $i=0;
- while (true){
- //sleep(1);
- usleep(500000);//0.5秒
- $i++;
- //若得到数据则马上返回数据给客服端，并结束本次请求
- $rand=rand(1,999);
- if($rand<=15){
- $arr=array('success'=>"1",'name'=>'xiaoyu','text'=>$rand);
- echo json_encode($arr);
- exit();
- }
- //服务器($_POST['time']*0.5)秒后告诉客服端无数据
- if($i==$_POST['time']){
- $arr=array('success'=>"0",'name'=>'xiaoyu','text'=>$rand);
- echo json_encode($arr);
- exit();
- }
- }
- ?>
第一版写的源代码在测试时发现只能电脑上能正常运行，部分苹果手机可以运行。所以2017年8月9日重新把原先的代码删掉，换成现在的。安卓手机可以正常使用。仅剩下微信内核的浏览器暂不可用。折衷的办法就是为页面的链接加上请求的时间戳，这个本没有什么意义，但是加过之后微信端就可以正常使用了。估计是内核缓存的问题，同一个页面不重复请求，加了时间戳后浏览器会认为是一个新页面。
文件下载
