ASP.NET+Ajax+Javascript实现页面div定时刷新

时间：2022-11-17 21:41:12

一、概述

  考虑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 "&nbsp;"
    else
        return oldstring;
}

 

六、样式表

 略。

 

七、后台数据获取

 略。

标签：

相关文章