BlogJava-Kelven Cheung-文章分类-无刷新http://www.blogjava.net/zhangrenquan/category/12388.htmlzh-cnThu, 01 Mar 2007 02:46:01 GMTThu, 01 Mar 2007 02:46:01 GMT60利用XML数据绑定实现页面无刷新的数据浏览http://www.blogjava.net/zhangrenquan/articles/54329.htmlkelvenkelvenWed, 21 Jun 2006 09:58:00 GMThttp://www.blogjava.net/zhangrenquan/articles/54329.htmlhttp://www.blogjava.net/zhangrenquan/comments/54329.htmlhttp://www.blogjava.net/zhangrenquan/articles/54329.html#Feedback0http://www.blogjava.net/zhangrenquan/comments/commentRss/54329.htmlhttp://www.blogjava.net/zhangrenquan/services/trackbacks/54329.html利用XML的数据绑定和浏览器的自动显示功能可以实现一个无刷新的数据浏览，即前后翻页、页码定位的功能，本人实现时采用JSP＋XML的方式。
具体的效果可以参看：http://guide.pconline.com.cn/comment/topic.jsp?id=10178
相关内容：
　　通过数据绑定，可以把一个XML文档链接到一个HTML页，然后绑定标准的HTML元素，例如SPAN、TABLE，到独立的XML元素。HTML元素会自动显示所绑定的XML元素的内容。
　　使用数据绑定的两个主要步骤：
　　1）链接XML文档到想要显示XML数据的HTML页。
　　　　　有两种方法：
　　　　　　　（A）通过在HTML页中包括名为XML的HTML元素来完成。例如：<XML ID="dsoBook" SRC="Book.xml"></XML>，HTML页中的某个元素（dsoBook）把XML文档中Book.xml链接到该页。
　　　　　　　（B）使用数据岛的方法。例如：
　　　　　　　　　　　<HTML><HEAD>
　　　　　　　　　　　　<TITLE></TITLE>
　　　　　　　　　　　</HEAD>
　　　　　　　　　　　<BODY><XML ID="dsoInventory">...</XML>
　　　　　　　　　　　</BODY></HTML>
　　2）绑定HTML元素到XML元素。当绑定一个HTML元素到一个XML元素时，HTML元素会自动显示所绑定的XML元素的内容。例如：<SPAN DATASRC="#dsoBook" DATAFLD="AUTHOR"></SPAN>，结果，HTML元素SPAN显示元素AUTHOR的内容。
　　下面是一个XML数据绑定的例子：
 　　<!-- File Name: Inventory Table.htm -->
 <HTML>
 <HEAD>
    <TITLE>Book Inventory</TITLE>
 </HEAD>
 <BODY>
    <XML ID="dsoInventory" SRC="Inventory.xml"></XML>
    <H2>Book Inventory</H2>
    <TABLE DATASRC="#dsoInventory" BORDER="1" CELLPADDING="5">
       <THEAD>
   <TH>Title</TH>
   <TH>Author</TH>
   <TH>Binding</TH>
   <TH>Pages</TH>
   <TH>Price</TH>
       </THEAD>    
       <TR ALIGN="center">
   <TD><SPAN DATAFLD="TITLE"
      STYLE="font-style:italic"></SPAN></TD>
   <TD><SPAN DATAFLD="AUTHOR"></SPAN></TD>
   <TD><SPAN DATAFLD="BINDING"></SPAN></TD>
   <TD><SPAN DATAFLD="ID"></SPAN></TD>
   <TD><SPAN DATAFLD="PRICE"></SPAN></TD>
       </TR>
    </TABLE>
 </BODY>
/////////////////////////////////////////////////////
 <?xml version="1.0"?>
 <!-- File Name: Inventory.xml -->
 <INVENTORY>
    <BOOK>
       <TITLE>The Adventures of Huckleberry Finn</TITLE>
       <AUTHOR>Mark Twain</AUTHOR>
       <BINDING>mass market paperback</BINDING>
       <ID>298</ID>
       <PRICE>$5.49</PRICE>
    </BOOK>
    <BOOK>
       <TITLE>Leaves of Grass</TITLE>
       <AUTHOR>Walt Whitman</AUTHOR>
       <BINDING>hardcover</BINDING>
       <ID>462</ID>
       <PRICE>$7.75</PRICE>
    </BOOK>
 </INVENTORY>
////////////////////////////////////////////////////////////
利用XML数据绑定实现页面无刷新的数据浏览具体做法：
1)在XML.jsp中建立数据岛。<XML id="dsoInventory" src="xmlsrc.jsp" ></XML>，其中xmlsrc.jsp文件是通过访问数据库后返回XML格式的数据，实现时应该包含求总记录数据、每页显示条数、总页数、分页返回数据等方法。
　返回的数据格式如：
 <?xml version="1.0" encoding="GBK" ?>
 <INVENTORY>
 <onePageRows>5</onePageRows>
 <totalRows>21</totalRows>
 <totalPages>5</totalPages>
 <intCurrentPage>1</intCurrentPage>
  <BOOK>
 <TITLE>The Adventures of Huckleberry Finn</TITLE>
 <AUTHOR>Mark Twain</AUTHOR>
 <BINDING>mass market paperback</BINDING>
 <ID>298</ID>
 <PRICE>$5.49</PRICE>
 </BOOK>
 <BOOK>
 <TITLE>Leaves of Grass</TITLE>
 <AUTHOR>Walt Whitman</AUTHOR>
 <BINDING>hardcover</BINDING>
 <ID>462</ID>
 <PRICE>$7.75</PRICE>
 </BOOK>
 </INVENTORY>
使用时可以根据具体情况返回相应的XML数据。
2）在页内绑定HTML元素到XML元素,借助TABLE显示。
<table id="cmmTbl" datasrc="dsoInventory" datafld="BOOk" width="760" border="0" cellspacing="1" cellpadding="2" align="center" bgcolor="#aaaaaa"   style="border-collapse: collapse" bordercolor="#333333" >
          <thead>
          <tr bgcolor="#FFCC66">
            <td  HEIGHT="24" BGCOLOR="#f0f9ff" WIDTH="60" >
              <div align="center"><b>查看</b></div>
    </td>
            <td  HEIGHT="24" BGCOLOR="#f0f9ff" WIDTH="60" >
              <div align="center"><b>作者</b></div>
    </td>
    <td width="580" BGCOLOR="#f0f9ff">
      <div align="center"><b>标题</b></div>
    </td>
    <td  width="60" BGCOLOR="#f0f9ff">
      <div align="center"><b>价格</b></div>
    </td>
  </tr></thead>
  <tbody>
  <tr STYLE="background-color:expression(rowIndex%2==1?'#FFFFFF':'#f7f8f9')">
    <td valign="top" WIDTH="60" align="center"><a  datafld="ID" target="_blank"><IMG SRC="images/xq.gif" ALT="查看" border="0"></a></td>
       <td valign="top" WIDTH="60"><span datafld="AUTHOR">作者</span></td>
       <td valign="top" width="580" ><a  datafld="ID" target="_blank"><span datafld="TITLE">标题</span></a></td>
       <td valign="top" width="60" > <span datafld="PRICE">价格</span></td>
  </tr></tbody>
</table>
3）增加分页按钮和分页控制的JAVASCRIPT语句。
<form onsubmit="jump(this);return false;" method="post">
          <div align="right">
        每页显示
<input name=pageSize datasrc=#dsoInventory datafld=onePageRows size=2>条，
        共<span datasrc=#dsoInventory datafld=totalPages></span>页
        <span datasrc=#dsoInventory datafld=totalRows ></span>条
        <input type=submit style="width=0" >
        <input name=firstPage type=submit value=首页 onclick="pageNum.value=1">
        <input name=previousPage type=submit value=上页 onclick="pageNum.value=pageNum.value-1">
        第<input name=pageNum datasrc=#dsoInventory datafld=intCurrentPage size=2>页
        <input name=nextPage type=submit value=下页 onclick="pageNum.value=(pageNum.value-0)+1">
        <input name=lastPage type=submit value=尾页 onclick="pageNum.value=pageCount.value" >
        <input name=pageCount type=hidden datasrc=#dsoInventory datafld=totalPages onpropertychange="pageCount_onpropertychange(form)">
      </div> </form>
 <script>
   if(document.body == null) document.write("&nbsp;");
</script>
<script language="javascript">
  function jump(form)
  {
 articles.src="xmlsrc.jsp?onePageRows="+form.pageSize.value+"&page="+form.pageNum.value+"&time="+(new Date()).getTime();
 /////alert("xmlsrc.jsp?page="+form.pageNum.value+"&onePageRows="+form.pageSize.value+"&time="+(new Date()).getTime());
 ///file://提交后返回新的XML数据。
  }
  function pageCount_onpropertychange(form)
  {
    if(form.pageNum.value==1)
    {
      form.firstPage.disabled=true;
      form.previousPage.disabled=true;
    }
    else
    {
      form.firstPage.disabled=false;
      form.previousPage.disabled=false;
    }
    if(form.pageNum.value==form.pageCount.value)
    {
      form.nextPage.disabled=true;
      form.lastPage.disabled=true;
    }
    else
    {
      form.nextPage.disabled=false;
      form.lastPage.disabled=false;
    }
  }
</script>
//////////////////////////////////////////////////////////////////
<!-- File Name: xml.jsp -->
<script>
   if(document.body == null) document.write("&nbsp;");
</script>
<script language="javascript">
  function jump(form)
  {
 dsoInventory.src="xmlsrc.jsp?onePageRows="+form.pageSize.value+"&page="+form.pageNum.value+"&time="+(new Date()).getTime();
 //alert("xmlsrc.jsp?page="+form.pageNum.value+"&onePageRows="+form.pageSize.value+"&time="+(new Date()).getTime());
 //提交后返回新的XML数据。
  }
  function pageCount_onpropertychange(form)
  {
    if(form.pageNum.value==1)
    {
      form.firstPage.disabled=true;
      form.previousPage.disabled=true;
    }
    else
    {
      form.firstPage.disabled=false;
      form.previousPage.disabled=false;
    }
    if(form.pageNum.value==form.pageCount.value)
    {
      form.nextPage.disabled=true;
      form.lastPage.disabled=true;
    }
    else
    {
      form.nextPage.disabled=false;
      form.lastPage.disabled=false;
    }
  }
</script>
<html>
<head>
<title>XML无刷新提交</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body bgcolor="303880" text="#000000" leftmargin="0" topmargin="0">
<XML id="dsoInventory" src="xmlsrc.jsp?page=1" ></XML>
<input type="button" value="aa" onclick="alert(dsoInventory.xml)">
<table id="cmmTbl" datasrc="dsoInventory" datafld="BOOk" width="760" border="0" cellspacing="1" cellpadding="2" align="center" bgcolor="#aaaaaa"   style="border-collapse: collapse" bordercolor="#333333" >
          <thead>
          <tr bgcolor="#FFCC66">
            <td  HEIGHT="24" BGCOLOR="#f0f9ff" WIDTH="60" >
              <div align="center"><b>查看</b></div>
    </td>
            <td  HEIGHT="24" BGCOLOR="#f0f9ff" WIDTH="60" >
              <div align="center"><b>作者</b></div>
    </td>
    <td width="580" BGCOLOR="#f0f9ff">
      <div align="center"><b>标题</b></div>
    </td>
    <td  width="60" BGCOLOR="#f0f9ff">
      <div align="center"><b>价格</b></div>
    </td>
  </tr></thead>
  <tbody>
  <tr STYLE="background-color:expression(rowIndex%2==1?'#FFFFFF':'#f7f8f9')">
    <td valign="top" WIDTH="60" align="center"><a  datafld="ID" target="_blank"><IMG SRC="images/xq.gif" ALT="查看" border="0"></a></td>
       <td valign="top" WIDTH="60"><span datafld="AUTHOR">作者</span></td>
       <td valign="top" width="580" ><a  datafld="ID" target="_blank"><span datafld="TITLE">标题</span></a></td>
       <td valign="top" width="60" > <span datafld="PRICE">价格</span></td>
  </tr></tbody>
</table>
<form onsubmit="jump(this);return false;" method="post">
          <div align="right">
        每页显示
<input name=pageSize datasrc=#dsoInventory datafld=onePageRows size=2>条，
        共<span datasrc=#dsoInventory datafld=totalPages></span>页
        <span datasrc=#dsoInventory datafld=totalRows ></span>条
        <input type=submit style="width=0" >
        <input name=firstPage type=submit value=首页 onclick="pageNum.value=1">
        <input name=previousPage type=submit value=上页 onclick="pageNum.value=pageNum.value-1">
        第<input name=pageNum datasrc=#dsoInventory datafld=intCurrentPage size=2>页
        <input name=nextPage type=submit value=下页 onclick="pageNum.value=(pageNum.value-0)+1">
        <input name=lastPage type=submit value=尾页 onclick="pageNum.value=pageCount.value" >
        <input name=pageCount type=hidden datasrc=#dsoInventory datafld=totalPages onpropertychange="pageCount_onpropertychange(form)">
      </div> </form>
</body>
</html>

　完成以上三步后，当用户进行翻页操作时将自动对表格内的数据进行重新的XML绑定，而不刷新页面。



kelven 2006-06-21 17:58 发表评论
]]>