新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> XML网站展示,XML源代码,XML编程示例。 本版仅接受原创、转贴、网站展示,具体的技术交流请前往各相关版块。
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - XML技术『 XML源码及示例(仅原创和转载) 』 → 利用XML数据绑定实现页面无刷新的数据浏览 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 5219 个阅读者浏览上一篇主题  刷新本主题   平板显示贴子 浏览下一篇主题
     * 贴子主题: 利用XML数据绑定实现页面无刷新的数据浏览 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     hsower 帅哥哟,离线,有人找我吗?狮子座1983-8-21
      
      
      威望:7
      等级:大四寒假(收到IBM的Offer啦)
      文章:72
      积分:1606
      门派:XML.ORG.CN
      注册:2004/4/3

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给hsower发送一个短消息 把hsower加入好友 查看hsower的个人资料 搜索hsower在『 XML源码及示例(仅原创和转载) 』的所有贴子 引用回复这个贴子 回复这个贴子 查看hsower的博客楼主
    发贴心情 利用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(" ");
    </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(" ");
    </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绑定,而不刷新页面。

    由于要考试,很久都没有上来了。
    是不是大家都要考试了呢?感觉好像没有什么更新。
    今天多发了一点,可不要说我灌水哦。


       收藏   分享  
    顶(0)
      




    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/6/19 13:51:00
     
     GoogleAdSense狮子座1983-8-21
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 XML源码及示例(仅原创和转载) 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/5/1 15:12:56

    本主题贴数1,分页: [1]

     *树形目录 (最近20个回帖) 顶端 
    主题:  利用XML数据绑定实现页面无刷新的数据浏览(10659字) - hsower,2004年6月19日

    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    78.125ms