首頁 > 其他

Xml資料島技術

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

微軟從IE5開始將資料島技術引入到瀏覽器中。通過使用資料島，可以輕鬆的將Xml資料繫結到HTML中，這樣就省去了手工填充資料的麻煩。另外，當改變Xml的資料時，繫結資料也會隨著Xml的改變而改變。

1、在HTML中引入Xml資料島

Xml資料島的使用方法有兩種，一種是在HTML中直接嵌入XML，另一種是外部引入Xml資料。

直接嵌入Xml資料島，是指將Xml文檔內容直接放在<xml>標籤中，使用方法如下：

<html>
    <head></head>
    <body>
        <xml>
            <?xml version="1.0" encoding="utf-8" ?>
            <book>
                <name>Xml應用系列</name>
                <auhtor>學路的小孩</auhtor>
                <date>2009-03-23</date>
            </book>
        </xml>
    </body>
</html>

      外部引入Xml資料，則是通過指定<xml>標籤的src屬性來實現的，例如：

<xml id="xmlData" src="book.xml"></xml>

 

      2、將資料繫結到HTML標籤

     將資料島中的資料繫結到HTML中，需要指定HTML標籤的兩個屬性：datasrc和datafld。其中，datasrc表示的是資料來源，即綁定那個資料來源；datafld表示的是綁定那個欄位。當這兩個屬性都被正確指定後，HTML就會顯示Xml中的資料了。下面用一個例子來說明：

     還是原來的Xml文檔，通過外部引入到HTML中，然後通過綁定到span標籤中來顯示Xml中的資料。代碼如下：

<html>
<head>
    <title>資料島測試</title>
    <script type="text/javascript">
        function btnOnclick()
        {
            var xmlDoc = document.getElementById("XmlData");
            
            xmlDoc.documentElement.selectSingleNode("name").text = "abc";
        }
    </script>
</head>
<body>
    <xml src="book.xml" id="XmlData"></xml>
    
    <div>
        <span>書名：</span>
        <span datasrc="#XmlData" datafld="name"></span>
        <br />
        
        <span>作者：</span>
        <span datasrc="#XmlData" datafld="author"></span>
        <br />
        
        <span>日期：</span>
        <span datasrc="#XmlData" datafld="date"></span>
    </div>
    
    <input type="button" value="改變XML值" onclick="btnOnclick()" />
    
</body>
</html>

     這段HTML代碼在IE中的效果如：

     當單擊按鈕“改變XML值”後，通過執行JavaScript代碼，改變了xml資料的值，這時HTML中的資料會自動更新，

     Xml資料島不僅可以綁定在span標籤，還可以綁定在table標籤中，並且可以多行顯示。另外，當綁定到span中時，如果Xml中有多條資料時，可以通過JavaScript來控制顯示哪一條資料。具體的JavaScript代碼為：moveFirst() 顯示第一條記錄、 movePrevious() 顯示上一條記錄、 moveNext() 顯示下一條記錄、 moveLast() 顯示最後一條記錄、 move(n) 顯示第n條記錄，n從0開始；還能夠通過BOF和EOF判斷是不是第一條記錄和最後一條記錄；這些方法和屬性都是XmlData.recordset屬性提供的。其中XmlData為資料島的ID。

     要顯示Xml資料，其實方法不只有這一種，還可以通過為Xml文檔添加CSS樣式或者XSL文檔來將Xml中的資料呈現到瀏覽器中。下一篇我將介紹如何通過CSS和XSL來實現資料的顯示。請繼續關注。

聲明

作者：齊飛Email：youring2@gmail.com
歡迎轉載，但請保留本段資訊！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More