ASP.NET+Ajax+Javascript实现页面div定时刷新
2010-01-07 15:54
921 查看
一、概述
考虑Html本身不带定时刷新页面的控件，且不考虑使用第三方控件；因此考虑使用Javascript中的setTimeout+xmlhttp来实现定时更新页面中部分内容，此实现在IE6.0及以上版本测试通过，其他浏览器暂时未测试过。
二、功能及特点
1、Javascript通过Microsoft的MSXML对象，动态获取后台数据库数据；
2、Javascript解析MSXML对象中的xml内容，整理为html后，显示给用户；
3、Javascript实现分页功能；
4、通过配置文件Config.xml中的参数，可以修改div的刷新频率、每页显示记录条数等。
三、前台Html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmBayonetShow.aspx.cs" Inherits="DynamicShow_FrmBayonetShow" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>页面动态更新</title>
</head>
<body>
<form id="FrmBayonetShow" runat="server">
<table id="BodyStyle" border="0px" width="100%">
<tr>
<td style="text-align: center; vertical-align: middle; font-family: 楷体_GB2312; font-size: 35px;
color: #0A246A; font-weight: bold; height: 50px">
页面动态更新示例
</td>
</tr>
<tr>
<td>
<div id="divRefresh" runat="server" style="width: 100%;">
</div>
</td>
</tr>
<tr>
<td>
<div id="divPagination" runat="server" style="width: 100%;">
</div>
</td>
</tr>
</table>
<script>
//初始化参数
InitMarqueeParameter();
//定义控制分页的变量
var page = new Pagination("divPagination");
//第一次获取显示数据
GenerateContent();
</script>
</form>
</body>
</html>
四、Config.xml配置文件
<?xml version="1.0" encoding="utf-8" ?>
<marquee>
<marquee_bayonetBond>
<!--页面刷新时间间隔（秒）最小10秒-->
<ReflashInterval>10</ReflashInterval>
<!--每页显示记录条数-->
<PageSize>12</PageSize>
</marquee_bayonetBond>
</marquee>
五、Javascript实现
//MSXML对象根节点
var oRoot;
//setTimeout对应ID
var time;
//刷新时间间隔
var reflashInterval=10;
//每页显示记录条数
var pageSize = 20;
/***************分页功能Javascript***************/
Pagination=function(controlId)
{
//总记录条数
var totalNum=0;
//每页记录条数
var maxNum=10;
//
var pageUrl="";
var breakpage = 5;
var currentposition = 0;
var breakspace = 2;
var maxspace = 4;
//当前页
var currentpage=1;
var perpage=10;
var id =controlId;
//分页初始化
this.initPage = function(pageName)
{
var count = this.getTotalNum();
perpage = this.getMaxNum();
if (currentpage==null)
{
currentpage = 1;
}
else
{
currentpage = parseInt(currentpage);
}
var pagecount = Math.floor(count/perpage)+(count%perpage == 0 ? 0:1);
var pagestr = "";
var prevnum = currentpage-currentposition;
var nextnum = currentpage+currentposition;
if(prevnum<1)
prevnum = 1;
if(nextnum>pagecount)
nextnum = pagecount;
pagestr += (currentpage==1)?'<span class="disabled"> <上一页</span>':'<span><a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()-1)+',/''+pageName+'/')"><上一页</a></span>';
if(prevnum-breakspace>maxspace)
{
for(i=1;i<=breakspace;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
pagestr += '...';
for(i=pagecount-breakpage+1;i<prevnum;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
else
{
for(i=1;i<prevnum;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
for(i=prevnum;i<=nextnum;i++)
{
pagestr += (currentpage==i)?'<span class="current">'+i+'</span>':'<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
if(pagecount-breakspace-nextnum+1>maxspace)
{
for(i=nextnum+1;i<=breakpage;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-breakspace+1;i<=pagecount;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
else
{
for(i=nextnum+1;i<=pagecount;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
pagestr += (currentpage==pagecount)?'<span class="disabled">下一页 ></span>':'<a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()+1)+',/''+pageName+'/')">下一页 ></a>';
this.$(id).className="manu"
this.$(id).innerHTML=pagestr;
}
//获取记录总条数
this.getTotalNum = function()
{
return totalNum;
};
//设置记录总条数
this.setTotalNum = function(sTotalNum)
{
totalNum = sTotalNum;
};
//获取页数
this.getMaxNum = function()
{
return maxNum;
};
//设置页数
this.setMaxNum=function(sMaxNum)
{
maxNum = sMaxNum;
};
//设置当前页
this.getIndexPage = function()
{
return currentpage;
};
this.setIndexPage=function(sCurrentPage)
{
currentpage =sCurrentPage;
};
this.page_onclick=function(num,pageStr)
{
this.setIndexPage(num);
pagination_data();
this.initPage(pageStr);
};
this.$=function(objStr)
{
return document.getElementById(objStr);
}
}
function $(objStr)
{
return document.getElementById(objStr);
}
/***************页面参数初始化函数***************/
function InitMarqueeParameter()
{
try
{
var xmlDoc;
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load("Config.xml");
}
if(xmlDoc==null)
{
return;
//alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
}
var node;
//div刷新频率
node = xmlDoc.getElementsByTagName("marquee/marquee_bayonetBond/ReflashInterval");
reflashInterval = parseInt(node[0].text);
if(reflashInterval < 10)
reflashInterval=10;
//每页显示记录条数
node = xmlDoc.getElementsByTagName("marquee/marquee_bayonetBond/PageSize");
pageSize = parseInt(node[0].text);
}
catch(e)
{
}
}
/***************获取后台数据，生成当前显示页内容***************/
function GenerateContent()
{
var oXMLDoc = new ActiveXObject('MSXML');
oXMLDoc.url = "HandlerGetScrolContent.ashx?MarqueeType=marquee_bayonet2";
oRoot=oXMLDoc.Root;
if(oRoot.children == null)
{
//清除当前定时器
clearTimeout(time);
//定义定时器
time=setTimeout("GenerateContent()",1000*reflashInterval);
return;
}
page.setTotalNum(oRoot.children.length); //设置总记录条数
page.setMaxNum(pageSize); //每页显示的条数
page.setIndexPage(1); //当前所在第几页
page.initPage("page"); //初始化页面
pagination_data(); //生成当前显示页内容
}
/***************生成当前显示页内容***************/
function pagination_data()
{
//清除当前定时器
clearTimeout(time);
//重新定义定时器
time=setTimeout("GenerateContent()",1000*reflashInterval);
if(oRoot.children == null)
return;
//当前页
var pIndex = page.getIndexPage();
//总页数
var pNum = page.getMaxNum();
//计算需显示内容的开始位置
var beginIndex = (pIndex - 1)*pNum;
//计算需显示内容的结束位置
var endIndex = (beginIndex + pNum) > oRoot.children.length ? oRoot.children.length : (beginIndex + pNum) ;
var tablecontent="";
//配置具体滚动内容
tablecontent += "<table cellpadding=/"4/" cellspacing=/"0/" width=/"100%/" class=/"bayonet2-table/">";
for(var i=beginIndex;i<endIndex;i++)
{
var row=oRoot.children.item(i);
tablecontent += "<tr class=/"bayonet2-PM01Tr/" title=/""+IsNull(row.GetAttribute("ALARM_NAME"))+"/">";
tablecontent +="<td nowrap width=/"9%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("CHNL_NAME")) + "</td>";
tablecontent +="<td nowrap width=/"4%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("I_E_NAME")) + "</td>";
tablecontent +="<td nowrap width=/"5%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("IC_CARD")) + "</td>";
tablecontent +="<td nowrap width=/"7%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("DL_CAR_NO")) + "</td>";
tablecontent +="<td nowrap width=/"7%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("CJ_CAR_NO")) + "</td>";
tablecontent +="<td nowrap width=/"5%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("DL_WT")) + "</td>";
tablecontent +="<td nowrap width=/"5%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("CJ_WT")) + "</td>";
tablecontent +="<td nowrap width=/"15%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("DL_CONTA_NO")) + "</td>";
tablecontent +="<td nowrap width=/"15%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("CJ_CONTA_NO")) + "</td>";
tablecontent +="<td nowrap width=/"7%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("TIMEOUT")) + "</td>";
tablecontent +="<td nowrap width=/"14%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("I_E_DATE")) + "</td>";
tablecontent +="<td nowrap width=/"7%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("PASS_MARK") + "</td>";
tablecontent +="</tr>";
}
tablecontent += "</table>";
divMarquee.innerHTML=tablecontent;
}
/***************空值替换函数***************/
function IsNull(oldstring)
{
if(oldstring == "")
return " "
else
return oldstring;
}
六、样式表
略。
七、后台数据获取
略。
考虑Html本身不带定时刷新页面的控件，且不考虑使用第三方控件；因此考虑使用Javascript中的setTimeout+xmlhttp来实现定时更新页面中部分内容，此实现在IE6.0及以上版本测试通过，其他浏览器暂时未测试过。
二、功能及特点
1、Javascript通过Microsoft的MSXML对象，动态获取后台数据库数据；
2、Javascript解析MSXML对象中的xml内容，整理为html后，显示给用户；
3、Javascript实现分页功能；
4、通过配置文件Config.xml中的参数，可以修改div的刷新频率、每页显示记录条数等。
三、前台Html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmBayonetShow.aspx.cs" Inherits="DynamicShow_FrmBayonetShow" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>页面动态更新</title>
</head>
<body>
<form id="FrmBayonetShow" runat="server">
<table id="BodyStyle" border="0px" width="100%">
<tr>
<td style="text-align: center; vertical-align: middle; font-family: 楷体_GB2312; font-size: 35px;
color: #0A246A; font-weight: bold; height: 50px">
页面动态更新示例
</td>
</tr>
<tr>
<td>
<div id="divRefresh" runat="server" style="width: 100%;">
</div>
</td>
</tr>
<tr>
<td>
<div id="divPagination" runat="server" style="width: 100%;">
</div>
</td>
</tr>
</table>
<script>
//初始化参数
InitMarqueeParameter();
//定义控制分页的变量
var page = new Pagination("divPagination");
//第一次获取显示数据
GenerateContent();
</script>
</form>
</body>
</html>
四、Config.xml配置文件
<?xml version="1.0" encoding="utf-8" ?>
<marquee>
<marquee_bayonetBond>
<!--页面刷新时间间隔（秒）最小10秒-->
<ReflashInterval>10</ReflashInterval>
<!--每页显示记录条数-->
<PageSize>12</PageSize>
</marquee_bayonetBond>
</marquee>
五、Javascript实现
//MSXML对象根节点
var oRoot;
//setTimeout对应ID
var time;
//刷新时间间隔
var reflashInterval=10;
//每页显示记录条数
var pageSize = 20;
/***************分页功能Javascript***************/
Pagination=function(controlId)
{
//总记录条数
var totalNum=0;
//每页记录条数
var maxNum=10;
//
var pageUrl="";
var breakpage = 5;
var currentposition = 0;
var breakspace = 2;
var maxspace = 4;
//当前页
var currentpage=1;
var perpage=10;
var id =controlId;
//分页初始化
this.initPage = function(pageName)
{
var count = this.getTotalNum();
perpage = this.getMaxNum();
if (currentpage==null)
{
currentpage = 1;
}
else
{
currentpage = parseInt(currentpage);
}
var pagecount = Math.floor(count/perpage)+(count%perpage == 0 ? 0:1);
var pagestr = "";
var prevnum = currentpage-currentposition;
var nextnum = currentpage+currentposition;
if(prevnum<1)
prevnum = 1;
if(nextnum>pagecount)
nextnum = pagecount;
pagestr += (currentpage==1)?'<span class="disabled"> <上一页</span>':'<span><a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()-1)+',/''+pageName+'/')"><上一页</a></span>';
if(prevnum-breakspace>maxspace)
{
for(i=1;i<=breakspace;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
pagestr += '...';
for(i=pagecount-breakpage+1;i<prevnum;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
else
{
for(i=1;i<prevnum;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
for(i=prevnum;i<=nextnum;i++)
{
pagestr += (currentpage==i)?'<span class="current">'+i+'</span>':'<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
if(pagecount-breakspace-nextnum+1>maxspace)
{
for(i=nextnum+1;i<=breakpage;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-breakspace+1;i<=pagecount;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
else
{
for(i=nextnum+1;i<=pagecount;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
pagestr += (currentpage==pagecount)?'<span class="disabled">下一页 ></span>':'<a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()+1)+',/''+pageName+'/')">下一页 ></a>';
this.$(id).className="manu"
this.$(id).innerHTML=pagestr;
}
//获取记录总条数
this.getTotalNum = function()
{
return totalNum;
};
//设置记录总条数
this.setTotalNum = function(sTotalNum)
{
totalNum = sTotalNum;
};
//获取页数
this.getMaxNum = function()
{
return maxNum;
};
//设置页数
this.setMaxNum=function(sMaxNum)
{
maxNum = sMaxNum;
};
//设置当前页
this.getIndexPage = function()
{
return currentpage;
};
this.setIndexPage=function(sCurrentPage)
{
currentpage =sCurrentPage;
};
this.page_onclick=function(num,pageStr)
{
this.setIndexPage(num);
pagination_data();
this.initPage(pageStr);
};
this.$=function(objStr)
{
return document.getElementById(objStr);
}
}
function $(objStr)
{
return document.getElementById(objStr);
}
/***************页面参数初始化函数***************/
function InitMarqueeParameter()
{
try
{
var xmlDoc;
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load("Config.xml");
}
if(xmlDoc==null)
{
return;
//alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
}
var node;
//div刷新频率
node = xmlDoc.getElementsByTagName("marquee/marquee_bayonetBond/ReflashInterval");
reflashInterval = parseInt(node[0].text);
if(reflashInterval < 10)
reflashInterval=10;
//每页显示记录条数
node = xmlDoc.getElementsByTagName("marquee/marquee_bayonetBond/PageSize");
pageSize = parseInt(node[0].text);
}
catch(e)
{
}
}
/***************获取后台数据，生成当前显示页内容***************/
function GenerateContent()
{
var oXMLDoc = new ActiveXObject('MSXML');
oXMLDoc.url = "HandlerGetScrolContent.ashx?MarqueeType=marquee_bayonet2";
oRoot=oXMLDoc.Root;
if(oRoot.children == null)
{
//清除当前定时器
clearTimeout(time);
//定义定时器
time=setTimeout("GenerateContent()",1000*reflashInterval);
return;
}
page.setTotalNum(oRoot.children.length); //设置总记录条数
page.setMaxNum(pageSize); //每页显示的条数
page.setIndexPage(1); //当前所在第几页
page.initPage("page"); //初始化页面
pagination_data(); //生成当前显示页内容
}
/***************生成当前显示页内容***************/
function pagination_data()
{
//清除当前定时器
clearTimeout(time);
//重新定义定时器
time=setTimeout("GenerateContent()",1000*reflashInterval);
if(oRoot.children == null)
return;
//当前页
var pIndex = page.getIndexPage();
//总页数
var pNum = page.getMaxNum();
//计算需显示内容的开始位置
var beginIndex = (pIndex - 1)*pNum;
//计算需显示内容的结束位置
var endIndex = (beginIndex + pNum) > oRoot.children.length ? oRoot.children.length : (beginIndex + pNum) ;
var tablecontent="";
//配置具体滚动内容
tablecontent += "<table cellpadding=/"4/" cellspacing=/"0/" width=/"100%/" class=/"bayonet2-table/">";
for(var i=beginIndex;i<endIndex;i++)
{
var row=oRoot.children.item(i);
tablecontent += "<tr class=/"bayonet2-PM01Tr/" title=/""+IsNull(row.GetAttribute("ALARM_NAME"))+"/">";
tablecontent +="<td nowrap width=/"9%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("CHNL_NAME")) + "</td>";
tablecontent +="<td nowrap width=/"4%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("I_E_NAME")) + "</td>";
tablecontent +="<td nowrap width=/"5%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("IC_CARD")) + "</td>";
tablecontent +="<td nowrap width=/"7%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("DL_CAR_NO")) + "</td>";
tablecontent +="<td nowrap width=/"7%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("CJ_CAR_NO")) + "</td>";
tablecontent +="<td nowrap width=/"5%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("DL_WT")) + "</td>";
tablecontent +="<td nowrap width=/"5%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("CJ_WT")) + "</td>";
tablecontent +="<td nowrap width=/"15%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("DL_CONTA_NO")) + "</td>";
tablecontent +="<td nowrap width=/"15%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("CJ_CONTA_NO")) + "</td>";
tablecontent +="<td nowrap width=/"7%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("TIMEOUT")) + "</td>";
tablecontent +="<td nowrap width=/"14%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("I_E_DATE")) + "</td>";
tablecontent +="<td nowrap width=/"7%/" class=/"bayonet2-ScrolTdStyle/">" + IsNull(row.GetAttribute("PASS_MARK") + "</td>";
tablecontent +="</tr>";
}
tablecontent += "</table>";
divMarquee.innerHTML=tablecontent;
}
/***************空值替换函数***************/
function IsNull(oldstring)
{
if(oldstring == "")
return " "
else
return oldstring;
}
六、样式表
略。
七、后台数据获取
略。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET+Ajax+Javascript实现页面定次刷新滚动内容
- GridView 72般绝技,Javascript与asp.net 实现Ajax多文件无刷新上传,在ASP.NET中执行URL重写经典方案
- asp.net使用javascript实现不刷新页面获取当前时间
- Javascript与asp.net 实现Ajax多文件无刷新上传
- Asp.net ajax定时刷新页面
- Javascript与asp.net 实现Ajax多文件无刷新上传
- Javascript与asp.net 实现Ajax多文件无刷新上传(转)
- Asp.net ajax定时刷新页面
- [荐]Javascript与asp.net 实现Ajax多文件无刷新上传
- ASP.NET之使用Ajax实现页面异步刷新（无需刷新整个页面）
- Javascript与asp.net 实现Ajax多文件无刷新上传【转】
- ASP.NET使用ajax实现分页局部刷新页面功能
- Javascript与asp.net 实现Ajax多文件无刷新上传
- Javascript与asp.net 实现Ajax多文件无刷新上传
- Javascript与asp.net 实现Ajax多文件无刷新上传
- ASP.NET 2.0 实现无刷新页面的一种方法(转)
- ASP.NET 页面刷新的实现方法
- Ajax实现无闪烁定时刷新页面实例代码
- ASP.NET 2.0中实现无刷新页面
- PHP + JavaScript + Ajax 实现无刷新页面加载效果