用ajax技术实现无闪烁定时刷新页面
2013-01-29 11:23
666 查看
在Web开发中我们经常需要实现定时刷新某个页面：1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录)；2.实现实时站内短信；3.定时更新页面数据等等。但是我们在网上搜搜会发现有很多定时刷新页面的方法，最简单的就是在<head></head>标记之间加上如下代码：
在<head></head>标记之间加上代码，实现定时刷新，此代码我已经测试过，可以实现效果
<meta http-equiv="refresh" content="5" URL="Example.aspx" />
说明：content的值代表页面刷新的间隔时间，以秒为单位
URL的值指定刷新的页面
还有一种方法就是用JavaScript来定时刷新页面
JavaScript定时刷新页面，此代码我没有经过测试
1 <script>
2 var limit="0:10"
3 if (document.images){
4 var parselimit=limit.split(":");
5 parselimit=parselimit[0]*60+parselimit[1]*1;
6 }
7 function beginrefresh(){
8 if (!document.images)
9 return;
10 if (parselimit==1)
11 window.location.reload();
12 else{
13 parselimit-=1;
14 curmin=Math.floor(parselimit/60);
15 cursec=parselimit%60;
16 if (curmin!=0)
17 curtime=curmin+" min "+cursec+" sec ";
18 else
19 curtime=cursec+" sec ";
20 window.status=curtime;
21 setTimeout("beginrefresh()",1000);
22 }
23 }
24 window.onload=beginrefresh;
25 </script>
加到body中间，这里是0:10为10秒钟，可以自定义
当然还有很多中方法，我这里就不一一列举了。用以上方法刷新页面有点缺点就是刷新页面的时候会闪烁，那样的话如果需要在短时间内就刷新的话估计用户的眼都闪坏了，而且也显得我们太不专业了吧。
<script type="text/javascript">
function makeRequest() {
var guid = rnd();
//记住给个随机数，不然的话有缓存
var url = "example_b.aspx?id=" + guid;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleRefresh;
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
}
//创建xmlHttp
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//返回信息
function handleRefresh() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == "sessionNull") {
//alert('登录超时，帐户注销，请重新登录...');
window.parent.document.location = "UserLogin.aspx";
}
setTimeout("makeRequest()", 8*000);
}
}
}
//创建随机数
rnd.today = new Date();
rnd.seed = rnd.today.getTime();
function rnd() {
rnd.seed = (rnd.seed * 9301 + 49297) % 233280;
return rnd.seed / (233280.0);
}
function rand(number) {
return Math.ceil(rnd() * number);
}
</script>
举个例子，比如说要example_a.aspx页面加载以后让测试页面example_b.aspx每8秒刷新一次，检查存放登录用户名的session值是否为空，如果session为空，则返回登录页面。那么我们可以将上面的js代码放在example_a.aspx页面的<head></head>标记之间，然后在页面body的onload事件中调用上面的方法：onload="makeRequest()",然后在页面的Page_Load事件中判断：
if (Session["user"] == null)
{
Response.Clear();
Response.Write("sessionNull");
Response.End();
}
好了，这里只是举一个例子，具体的应用可以自己去拓展。说实话我也是刚接触.net，还有很多东西要学，有什么不对的地方欢迎大家指教。或者大家有什么更好的实现方法，欢迎大家与我交流。
在<head></head>标记之间加上代码，实现定时刷新，此代码我已经测试过，可以实现效果
<meta http-equiv="refresh" content="5" URL="Example.aspx" />
说明：content的值代表页面刷新的间隔时间，以秒为单位
URL的值指定刷新的页面
还有一种方法就是用JavaScript来定时刷新页面
JavaScript定时刷新页面，此代码我没有经过测试
1 <script>
2 var limit="0:10"
3 if (document.images){
4 var parselimit=limit.split(":");
5 parselimit=parselimit[0]*60+parselimit[1]*1;
6 }
7 function beginrefresh(){
8 if (!document.images)
9 return;
10 if (parselimit==1)
11 window.location.reload();
12 else{
13 parselimit-=1;
14 curmin=Math.floor(parselimit/60);
15 cursec=parselimit%60;
16 if (curmin!=0)
17 curtime=curmin+" min "+cursec+" sec ";
18 else
19 curtime=cursec+" sec ";
20 window.status=curtime;
21 setTimeout("beginrefresh()",1000);
22 }
23 }
24 window.onload=beginrefresh;
25 </script>
加到body中间，这里是0:10为10秒钟，可以自定义
当然还有很多中方法，我这里就不一一列举了。用以上方法刷新页面有点缺点就是刷新页面的时候会闪烁，那样的话如果需要在短时间内就刷新的话估计用户的眼都闪坏了，而且也显得我们太不专业了吧。
<script type="text/javascript">
function makeRequest() {
var guid = rnd();
//记住给个随机数，不然的话有缓存
var url = "example_b.aspx?id=" + guid;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleRefresh;
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
}
//创建xmlHttp
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//返回信息
function handleRefresh() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == "sessionNull") {
//alert('登录超时，帐户注销，请重新登录...');
window.parent.document.location = "UserLogin.aspx";
}
setTimeout("makeRequest()", 8*000);
}
}
}
//创建随机数
rnd.today = new Date();
rnd.seed = rnd.today.getTime();
function rnd() {
rnd.seed = (rnd.seed * 9301 + 49297) % 233280;
return rnd.seed / (233280.0);
}
function rand(number) {
return Math.ceil(rnd() * number);
}
</script>
举个例子，比如说要example_a.aspx页面加载以后让测试页面example_b.aspx每8秒刷新一次，检查存放登录用户名的session值是否为空，如果session为空，则返回登录页面。那么我们可以将上面的js代码放在example_a.aspx页面的<head></head>标记之间，然后在页面body的onload事件中调用上面的方法：onload="makeRequest()",然后在页面的Page_Load事件中判断：
if (Session["user"] == null)
{
Response.Clear();
Response.Write("sessionNull");
Response.End();
}
好了，这里只是举一个例子，具体的应用可以自己去拓展。说实话我也是刚接触.net，还有很多东西要学，有什么不对的地方欢迎大家指教。或者大家有什么更好的实现方法，欢迎大家与我交流。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用ajax技术实现无闪烁定时刷新页面
- 用ajax技术实现无闪烁定时刷新页面
- Ajax实现无闪烁定时刷新页面实例代码
- 用Ajax+js+jQuery实现无闪烁定时刷新页面
- 用Ajax+js+jQuery实现无闪烁定时刷新页面 定时刷新
- jQuery实现AJAX定时刷新局部页面实例
- Ajax实现定时刷新,获取后台数据(实现技术ASP)
- 利用ajax和JSP技术实现网页中表单的局部刷新（只刷新表单数据，而不刷新整个页面）
- jQuery实现AJAX定时刷新局部页面实例
- Ajax实现不刷屏的前提下实现页面定时刷新
- jQuery实现AJAX定时局部页面刷新
- Ajax实现定时刷新页面
- Ajax实现不刷屏的前提下实现页面定时刷新
- jQuery实现AJAX定时局部页面刷新
- 浅谈Ajax技术实现页面无刷新
- jQuery实现AJAX定时局部页面刷新
- Ajax实现定时刷新,获取后台数据(实现技术ASP)
- Ajax实现不刷屏的前提下实现页面定时刷新
- jQuery实现AJAX定时刷新局部页面实例
- jsp中Ajax实现不刷屏的前提下实现页面定时刷新的功能