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" οnchange="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无闪动刷新的例子,向这样的方法可以应用于一些重要实时数据显示的页面。特在此转载,收藏于此。在此向原创者致意!
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" οnchange="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无闪动刷新的例子,向这样的方法可以应用于一些重要实时数据显示的页面。特在此转载,收藏于此。在此向原创者致意!