php+ajax 实现web页面无闪烁刷新页面前端和后端交互

来源：互联网发布：淘宝立体服装拍摄编辑：程序博客网时间：2024/05/26 07:28

处理这个问题，首先要将网页的前端和后端分开。前端是呈现给用户看的，后端是真正数据处理逻辑，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,5function byphp(){    if(xmlHttp.readyState==4){      var data=xmlHttp.responseText;      document.getElementById('div1').innerHTML=data;    }}

3. php部分

<?phpheader("content-type:text/html; charset=utf-8");echo "Time : <strong style=color:red>".date('Y-m-d H:i:s',time())."</strong>. ";?>

可以完美的实现页面无闪烁刷新和页面的前后端交互问题

0 0

php+ajax 实现web页面无闪烁刷新 页面前端和后端交互

php+ajax 实现web页面无闪烁刷新页面前端和后端交互