博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用ajax技术实现无闪烁定时刷新页面
阅读量:5973 次
发布时间:2019-06-19

本文共 2601 字,大约阅读时间需要 8 分钟。

在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秒钟,可以自定义

 

当然还有很多中方法,我这里就不一一列举了。用以上方法刷新页面有点缺点就是刷新页面的时候会闪烁,那样的话如果需要在短时间内就刷新的话估计用户的眼都闪坏了,而且也显得我们太不专业了吧。,呵呵,开个玩笑。如果有一种方法能够定时刷新指定的页面,而且不会让我们看见页面闪烁,那么该多好啊,是吧?无闪烁的页面刷新我们一般采用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事件中调用上面的方法:οnlοad="makeRequest()",然后在页面的Page_Load事件中判断:

              if (Session["user"] == null)

             {

                Response.Clear();

                Response.Write("sessionNull");

                Response.End();

            }

分类: 
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2011/11/09/2242865.html,如需转载请自行联系原作者
你可能感兴趣的文章
JS的一些扩展:String、StringBuilder、Uri
查看>>
solr的suggest模块
查看>>
2PHP页面缓存
查看>>
编译原理 LL1文法First集算法实现
查看>>
菜鸟学Linux命令:bg fg jobs命令 任务管理
查看>>
python 多线程就这么简单(续)
查看>>
【Linux系统编程】 Linux系统调用概述
查看>>
SQL Server Reporting Services:无法检索应用程序文件。部署中的文件已损坏
查看>>
hive中partition如何使用
查看>>
查看mysql数据库版本方法总结
查看>>
大牛手把手教你做日历(建议你看看,你会有收获的)
查看>>
Django中的ORM
查看>>
iOS开发UI篇—Quartz2D使用(图片剪切)
查看>>
spring学习笔记(20)数据库事务并发与锁详解
查看>>
关于Simple_html_dom的小应用
查看>>
鲁肃:蚂蚁金服的三个梦想
查看>>
【springmvc+mybatis项目实战】杰信商贸-27.POI由HSSF升级为XSSF
查看>>
数学常数e的含义
查看>>
APM基础小记
查看>>
MVC
查看>>