月光软件站 - 编程文档 - Java - 利用XML数据绑定实现页面无刷新的数据浏览

Java

本类阅读TOP10

·使用MyEclipse开发Struts框架的Hello World!(录像1)
·hibernate配置笔记
·AOP编程入门--Java篇
·linux下Tomcat 5.0.20 与 Apache 2 安装/集成/配置
·在win2003下整合了整合Tomcat5.5+ apache_2.0.53+ mod_jk_2.0.47.dll
·构建Linux下IDE环境--Eclipse篇
·Jsp 连接 mySQL、Oracle 数据库备忘(Windows平台)
·ASP、JSP、PHP 三种技术比较
·Tomcat5.5.9的安装配置
·AWT GUI 设计笔记(二)

→ 分类导航

VC语言	Delphi
VB语言	ASP
Perl	Java
Script	数据库
其他语言	游戏开发
文件格式	网站制作
软件工程	.NET开发

利用XML数据绑定实现页面无刷新的数据浏览

作者：未知来源：月光软件站 加入时间：2005-2-28　月光软件站

利用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数据绑定的例子：
　　
<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"?>

<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>

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

相关文章：

相关软件：