AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2017-11-16 2334
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

在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事件中调用上面的方法：onload="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，如需转载请自行联系原作者
文章标签：
JavaScript
测试技术
前端开发
关键词：
ajax技术
ajax.js技术
ajax.js页面
ajax.js定时
ajax.js实现
zting科技
目录
相关文章
小万哥丶
|
10月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器：实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容，实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象，可发送和接收数据。当用户触发事件（如点击），函数向服务器发送GET请求，服务器响应后更新指定HTML部分。AJAX并非编程语言，而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象，它有多种方法（如`open()`和`send()`）和属性（如`onreadystatechange`、`readyState`和`status`）来处理请求和响应。
小万哥丶
143 2
AJAX 前端开发利器：实现网页动态更新的核心技术
童小纯
|
10月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）
Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）
童小纯
93 0
童小纯
|
10月前
|
XML JSON 前端开发
JavaWeb----Ajax技术
JavaWeb----Ajax技术
童小纯
98 0
阿珊和她的猫
|
10月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘：异步传输，高效交互
Ajax技术的秘密揭秘：异步传输，高效交互
阿珊和她的猫
268 0
众所周知
|
4月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言，处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言，处理数据和业务逻辑；Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例，如实时数据更新、表单验证与提交、动态加载内容等。同时，针对跨域问题、数据安全与性能优化提出了建议。总结指出，PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
众所周知
100 3
墨城coding
|
4月前
|
JSON 前端开发 JavaScript
java-ajax技术详解！！！
本文介绍了Ajax技术及其工作原理，包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术，实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤，以及利用jQuery简化Ajax操作的方法。最后，介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用，包括Java中JSON与对象的相互转换。
墨城coding
89 1
土木林森
|
7月前
|
前端开发 Java UED
告别页面刷新时代：Struts 2 Ajax技术揭秘，轻松实现动态加载，Web应用焕然一新！
【8月更文挑战第31天】在Web应用开发中，用户体验至关重要。为减少页面刷新带来的不适，Ajax技术应运而生。Struts 2作为流行的Java EE框架，通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式，展示了Struts 2如何轻松实现Ajax功能，提升了用户体验和开发效率，并灵活地实现了数据交换。然而，使用Ajax时还需注意SEO和跨域请求等局限性。
土木林森
60 0
今天是几号
|
9月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
今天是几号
69 5
游客zn7mvnkypuy76
|
9月前
|
数据采集 Web App开发 前端开发
技术心得记录：如何用JAVA爬取AJAX加载后的页面（转载）
技术心得记录：如何用JAVA爬取AJAX加载后的页面（转载）
游客zn7mvnkypuy76
56 0
众所周知
|
10月前
|
前端开发 搜索推荐 安全
AJAX和CSR（客户端渲染）是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验，减轻服务器压力，但对搜索引擎不友好且增加开发复杂度，易引发安全问题。CSR提供快速响应和交互性，改善用户体验，但首屏加载慢，搜索引擎支持不足，同样面临安全挑战。两者各有适用场景，需按项目需求选择。
众所周知
83 0