HTML中不僅含有大量的格式化語句,還到處充斥著內容數據,讓人看著實在是頭大。美工人員在調整介面佈局時,可能會不經意的修改了內容資料;業面內容維護人員在維護資料時往往也無意的弄亂了業面佈局程式碼。
於是乎,人們開始有意識的避免這種混亂局勢。利用XML進行資料描述,在HTML中僅保留頁面佈局程式碼,這樣就使得資料在介面分開,再也不會因為修改版面而遺失內容資料;亦不會在維護資料時改變頁面佈局。
數據與界面被分離開了,我們似乎還需要某種手段再讓它們有機的結合。 XML資料配合不同的HTML,可以給客戶不同的資料瀏覽方式。 XML資料島就可以將XML中的資料很自然的引入到HTML中,而無需編寫繁瑣的程式碼。
下面我用實例向大家闡述。
假設我們有一個名為「Book.xml」的XML檔案存圖書信息,內容如下。
<?xmlversion="1.0"encoding="gb2312"?> <books> <bookid="0001"bookcategory="文艺"amount="150"remain="80"discount="8.7"> <title>三国演义</title> <author>罗贯中</author> <publisher>文艺出版社</publisher> <isbn>0-765-58007-8</isbn> <price>80</price> </book> <bookid="0002"bookcategory="文艺"amount="100"remain="70"discount="9.8"> <title>红楼梦</title> <author>曹雪芹</author> <publisher>三秦出版社</publisher> <isbn>0-765-58007-9</isbn> <price>22</price> </book> <bookid="0003"bookcategory="文艺"amount="120"remain="60"discount="8.5"> <title>西游记(上下册)</title> <author>吴承恩</author> <publisher>人民文学出版社</publisher> <isbn>0-765-58007-3</isbn> <price>40.12</price> </book> </books>
每個圖書結點(Book)都有分類,數據,餘量,折扣四個屬性,還有書名,作者,出版社,書號和價格五個子元素。這裡只是為了跟大家講述如何使用XML資料島,故資料結構定義的很簡單,資料量也不是很大。
我們想要在HTML中以表格的形式,將XML中的內容顯示出來。我們現在開始動手寫HTML檔。首先要在HTML中建構一個表格,用來顯示圖書的資訊。這部分想必大家都很梳洗,我就不細講了,我們著重的講一下如何定義XML資料導,以及如何將資料表HTML表格進行綁定。
XML資料島,顧名思義,它充當資料來源的作用,就是引入儲存資料的XML文件,並為其分配一個ID,方便在HTML中引用。定義程式碼如下:
<xmlid="XMLData"src="Test07.xml"></xml>
一般性的,我們會將這句程式碼寫在
標記中。 ID是其識別符,方便在HTML檔案其他地方引用,src是XML資料檔案的位置,可以是相對位置,也可以是一個有效的URL。在此範例中是其值是“Test07.xml”,表示這是與該HTML檔案存放在同一位置的一個名為“Test07.xml”的檔案。<tableid="tblbooks"datasrc="#XMLData"border=1datapagesize=2width="100%"> <thead> <thstyle="font-style:blod">书名</th> <thstyle="font-style:blod">类别</th> <thstyle="font-style:blod">书号</th> <thstyle="font-style:blod">作者</th> <thstyle="font-style:blod">出版社</th> <thstyle="font-style:blod">定价</th> <thstyle="font-style:blod">数量</th> <thstyle="font-style:blod">余量</th> </thead> <tr> <td><spandatafld="title"></span></td> <td><spandatafld="bookcategory"></span></td> <td><spandatafld="isbn"></span></td> <td><spandatafld="author"></span></td> <td><spandatafld="publisher"></span></td> <td><spandatafld="price"></span></td> <td><spandatafld="amount"></span></td> <td><spandatafld="remain"></span></td> </tr> </table>
大家可以發現,在
標記中放置一個標記並指定字段,如 | ,表示這個標記與title字段進行綁定,該字段值會自動的填充到標記中。 |