`

AJAX的DWR框架实现无闪动自动刷新页面

    博客分类：
  • DWR
DWR框架AjaxJSPHTML 
阅读更多
ajax的dwr框架定时无闪动局部数据更新
test.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DWR测试</title>
  <script type='text/javascript' src='<%= request.getContextPath() %>/dwr/engine.js'></script>
  <script type='text/javascript' src='<%= request.getContextPath() %>/dwr/util.js'></script>
</head>
<script>
var time = 5000;
var i=0;
window.setInterval('Check()',time);
//在此处我们可以通过该函数来调用java类,返回一个list,并用该list来更新页面数据
function Check()
{
   //获得刷新的行对象
   var trobj=document.getElementById("1");
   //修改对象值, cslls(*)表示取得行中的第几个元素(第几列)"*"中的*从0开始
   //trobj.cells(1).innerHTML="风调雨顺"+i;
    trobj.cells(1).innerText="很好，很强大"+i;
   i++;
}

//设置页面刷新时间函数
function change(){
var temp = document.getElementById("t").value;
if(temp <= 0){
                //设置成默认的刷新时间为5秒
time=5000;
}else{
time = temp * 1000;
}
alert(time);

}

</script>
<body>
<p>本程序，在指定表格内使用AJAX,每5秒无闪动更新表格中“风调雨顺” </p>
<form action="#" name="post">
<table id="news" cellspacing="2" cellpadding="2" align="center" border="2" bgcolor="#c0c0c0">
<tr><td>设置刷新时间</td>
<td><input type="text"  id="t" onchange="change();"></td>
</tr>
<tr>
     <th width="15%">名称</th>
     <th width="55%">内容</th>
</tr>
<tr id="1">
     <td>中国</td>
     <td style="color:red;">很好，很强大</td>
</tr>
<tr id="2">
     <td>国外</td>
     <td>很好</td>
</tr>
<tr id="3">
      <td>亚洲</td>
       <td>风景这边最好</td>
</tr>
</table>
</form>
</body>
</html>
今天在浏览javaeye论坛时，看见一个关于dwr无闪动刷新的例子，向这样的方法可以应用于一些重要实时数据显示的页面。特在此转载，收藏于此。在此向原创者致意！
分享到：
| struts快速学习指南 pdf电子书
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics