利用XML的數(shù)據(jù)綁定和瀏覽器的自動顯示功能可以實現(xiàn)一個無刷新的數(shù)據(jù)瀏覽，即前后翻頁、頁碼定位的功能，本人實現(xiàn)時采用JSP＋XML的方式。
具體的效果可以參看：http://guide.pconline.com.cn/comment/topic.jsp?id=10178
相關(guān)內(nèi)容：
通過數(shù)據(jù)綁定，可以把一個XML文檔鏈接到一個HTML頁，然后綁定標(biāo)準(zhǔn)的HTML元素，例如SPAN、TABLE，到獨立的XML元素。HTML元素會自動顯示所綁定的XML元素的內(nèi)容。
使用數(shù)據(jù)綁定的兩個主要步驟：
1）鏈接XML文檔到想要顯示XML數(shù)據(jù)的HTML頁。
有兩種方法：
（A）通過在HTML頁中包括名為XML的HTML元素來完成。例如：<XML ID="dsoBook" SRC="Book.xml"></XML>，HTML頁中的某個元素（dsoBook）把XML文檔中Book.xml鏈接到該頁。
（B）使用數(shù)據(jù)島的方法。例如：
<HTML><HEAD>
<TITLE></TITLE>
</HEAD>
<BODY><XML ID="dsoInventory">...</XML>
</BODY></HTML>
2）綁定HTML元素到XML元素。當(dāng)綁定一個HTML元素到一個XML元素時，HTML元素會自動顯示所綁定的XML元素的內(nèi)容。例如：<SPAN DATASRC="#dsoBook" DATAFLD="AUTHOR"></SPAN>，結(jié)果，HTML元素SPAN顯示元素AUTHOR的內(nèi)容。
下面是一個XML數(shù)據(jù)綁定的例子：
? <!-- 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數(shù)據(jù)綁定實現(xiàn)頁面無刷新的數(shù)據(jù)瀏覽具體做法：
1)在XML.jsp中建立數(shù)據(jù)島。<XML id="dsoInventory" src="xmlsrc.jsp" ></XML>，其中xmlsrc.jsp文件是通過訪問數(shù)據(jù)庫后返回XML格式的數(shù)據(jù)，實現(xiàn)時應(yīng)該包含求總記錄數(shù)據(jù)、每頁顯示條數(shù)、總頁數(shù)、分頁返回數(shù)據(jù)等方法。
返回的數(shù)據(jù)格式如：
?<?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>
使用時可以根據(jù)具體情況返回相應(yīng)的XML數(shù)據(jù)。
2）在頁內(nèi)綁定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>標(biāo)題</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">標(biāo)題</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(" ");
</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數(shù)據(jù)。
? }
? 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(" ");
</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數(shù)據(jù)。
? }
? 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>標(biāo)題</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">標(biāo)題</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>
完成以上三步后，當(dāng)用戶進(jìn)行翻頁操作時將自動對表格內(nèi)的數(shù)據(jù)進(jìn)行重新的XML綁定，而不刷新頁面。
posted on 2006-06-21 17:58
kelven 閱讀(350)
評論(0) 編輯 收藏 所屬分類:
無刷新