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

最新推荐文章于 2021-08-06 07:15:55 发布

jeanphorn

最新推荐文章于 2021-08-06 07:15:55 发布

阅读量6.3k

点赞数

本文链接：https://blog.csdn.net/Jeanphorn/article/details/42708501

版权

php 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

处理这个问题，首先要将网页的前端和后端分开。前端是呈现给用户看的，后端是真正数据处理逻辑，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>. ";

?>

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

jeanphorn

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

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