DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> 利用XML數據綁定實現頁面無刷新的數據浏覽
利用XML數據綁定實現頁面無刷新的數據浏覽
編輯：XML詳解     
  利用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綁定，而不刷新頁面。
XML詳解
用XAML做網頁！！—終結篇(上)
　本文示例源代碼或素材下載　　迄今為止的設計都很順利，但這次就不得不接觸我前面所說的非常糟糕的流文
C＃來創建和讀取XML文檔
擴展標記語言XML（eXtensibleMarkupLanguage），是由W3C組織制定的。做為
XMLTextReader和XmlDocument讀取XML文件的比較
看到網上一片文章，自己式了一下，果然 XMLTextReader速度要快！在.Net框架的Syst

相關文章

XML基礎XML與XSLTXML詳解
小編推薦
如何得到XML文檔大小 靈活調用xsl來解析xml文檔(js異步) XML入門常見問題(1) 用XAML做網頁！！—廣告展示區(下) 漫談PHP JSON數組對象數組介紹研究 XAML開發入門之用VS2005開發XAML程序 數學標記語言（Mathematical Markup Language, MathML） XPath表達式語法概要(一) 建立MS XML 測試環境 WML教程7：WML的事件
熱門推薦
[推薦]現實生活中的XML 詳解相互轉換JSON-lib包的相關介紹 W3C有意推廣XML新標准 為兼容性吵翻了天 XML 編程思想:XML和語義 XML+XSL+CSS+ASP打造留言簿 大話XML(目錄) 提升JSP應用程序的七大絕招 在 XML 內生成文檔並重用信息，第 1 部分: 利用 XML 發布文檔 一個在客戶端生成並使用XML的例子
大家都在看
網頁設計技巧:設計顏色尺寸對齊方式對比 XUL 教程 列表控件 css去掉下劃線 鼠標滾輪放大頁面字體事件Mousewheel bootstrap基礎知識學習筆記 CSS網頁布局全精通 CSS實現的中英文雙語菜單效果代碼 js如何獲取file控件的完整路徑具體實現代碼
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved