php+ajax 实现web页面无闪烁刷新 页面前端和后端交互
处理这个问题，首先要将网页的前端和后端分开。前端是呈现给用户看的，后端是真正数据处理逻辑，Ajax巧好起到中间人的作用。最初想用frame框架和js结合实现实现页面的无闪烁交互，但这种方式并不是真正意义上的动态交互。Ajax恰好可以很方便的解决这个问题。
分三个部分来来实现这个需求：1.用户界面，可以位简单的html； 2. Ajax处理页面； 3. php底层逻辑
以动态请求刷新时间为例。
用户界面html，使用setInterval设置定时刷新，调用js中的refresh函数。
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Time Refresh</title>
<style type="text/css">
a {display:block;float:left;width:257px;height:30px;
border:2px solid #09f;background:#fff;text-align:center;
line-height:30px;margin:5px;
}
#div1 {margin:5px;width:800px;height:100px;float:left;
text-align:center;border:2px solid #09f;background:#fff;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<script type="text/javascript">
setInterval("refresh()",3000); //设定每隔3s刷新一次
</script>
<div id="div1"></div>
</body>
</html>
2. Ajax部分 ajax.js代码
var xmlHttp;
//判断浏览器是IE 还是其他浏览器
function s_xmlhttprequest(){
if(window.ActiveXObject){
xmlHttp= new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest) {
xmlHttp= new XMLHttpRequest();
}
}
function refresh(){
s_xmlhttprequest();
xmlHttp.open("GET","result.php",true);
xmlHttp.onreadystatechange = byphp;
xmlHttp.send(null);
}
//接受数据并显示 分为5个状态0,1,2,3,4,5
function byphp(){
if(xmlHttp.readyState==4){
var data=xmlHttp.responseText;
document.getElementById('div1').innerHTML=data;
}
}
3. php部分
<?php
header("content-type:text/html; charset=utf-8");
echo "Time : <strong style=color:red>".date('Y-m-d H:i:s',time())."</strong>. ";
?>
可以完美的实现页面无闪烁刷新和页面的前后端交互问题