用ajax技术实现无闪烁定时刷新页面

在Web开发中我们经常需要实现定时刷新某个页面：1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录)；2.实现实时站内短信；3.定时更新页面数据等等。但是我们在网上搜搜会发现有很多定时刷新页面的方法，最简单的就是在<head></head>标记之间加上如下代码：

在<head></head>标记之间加上代码，实现定时刷新，此代码我已经测试过，可以实现效果

说明：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秒钟，可以自定义

当然还有很多中方法，我这里就不一一列举了。用以上方法刷新页面有点缺点就是刷新页面的时候会闪烁，那样的话如果需要在短时间内就刷新的话估计用户的眼都闪坏了，而且也显得我们太不专业了吧。，呵呵，开个玩笑。如果有一种方法能够定时刷新指定的页面，而且不会让我们看见页面闪烁，那么该多好啊，是吧？无闪烁的页面刷新我们一般采用ajax+js或者webservice来实现，下面我就介绍一种用ajax+js来实现无闪烁定时刷新的方法，其实我对ajax了解的也很浅，在做项目的过程我们用ajax来实现局部刷新。好了，废话不多说了，看看代码：=>

ajax+js实现无闪烁定时刷新页面

 
    <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，还有很多东西要学，有什么不对的地方欢迎大家指教。或者大家有什么更好的实现方法，欢迎大家与我交流。

posted @ 2013-01-29 11:23 盛开的雨季阅读(5259) 评论(0) 编辑收藏举报

刷新页面返回顶部

盛开的雨季

用ajax技术实现无闪烁定时刷新页面

公告