XML 应用程序

来源：互联网发布：网络推手收费编辑：程序博客网时间：2024/05/20 03:40

这一节示范了一个小型的XML应用程序框架。

从XML文档开始

首先我们建立一个简单的XML文档。

来看一下我们原始的XML文档，描述了CD目录。

<?xml version="1.0" encoding="ISO-8859-1"?><CATALOG><CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR></CD>..... more ....

如果你使用IE5.0或者更高版本r, 浏览完整的XML文档。

<?xml version="1.0" encoding="ISO-8859-1" ?>

- <!-- Edited with XML Spy v4.2

-->

- <CATALOG>

- <CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COMPANY>Columbia</COMPANY>

</CD>

- <CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tyler</ARTIST>

<COMPANY>CBS Records</COMPANY>

</CD>

- <CD>

<TITLE>Greatest Hits</TITLE>

<ARTIST>Dolly Parton</ARTIST>

</CD>

- <CD>

<TITLE>Still got the blues</TITLE>

<ARTIST>Gary Moore</ARTIST>

<COMPANY>Virgin records</COMPANY>

</CD>

- <CD>

<ARTIST>Eros Ramazzotti</ARTIST>

</CD>

- <CD>

<TITLE>One night only</TITLE>

<COMPANY>Polydor</COMPANY>

</CD>

- <CD>

<TITLE>Sylvias Mother</TITLE>

</CD>

- <CD>

<TITLE>Maggie May</TITLE>

<ARTIST>Rod Stewart</ARTIST>

<COMPANY>Pickwick</COMPANY>

</CD>

- <CD>

<TITLE>Romanza</TITLE>

<ARTIST>Andrea Bocelli</ARTIST>

<COMPANY>Polydor</COMPANY>

</CD>

- <CD>

<TITLE>When a man loves a woman</TITLE>

<ARTIST>Percy Sledge</ARTIST>

<COMPANY>Atlantic</COMPANY>

</CD>

- <CD>

<TITLE>Black angel</TITLE>

<ARTIST>Savage Rose</ARTIST>

</CD>

- <CD>

<TITLE>1999 Grammy Nominees</TITLE>

<COMPANY>Grammy</COMPANY>

</CD>

- <CD>

<TITLE>For the good times</TITLE>

<ARTIST>Kenny Rogers</ARTIST>

<COMPANY>Mucik Master</COMPANY>

</CD>

- <CD>

<TITLE>Big Willie style</TITLE>

<ARTIST>Will Smith</ARTIST>

<COMPANY>Columbia</COMPANY>

</CD>

- <CD>

<TITLE>Tupelo Honey</TITLE>

<ARTIST>Van Morrison</ARTIST>

<COMPANY>Polydor</COMPANY>

</CD>

- <CD>

<TITLE>Soulsville</TITLE>

<COUNTRY>Norway</COUNTRY>

</CD>

- <CD>

<ARTIST>Cat Stevens</ARTIST>

<COMPANY>Island</COMPANY>

</CD>

- <CD>

<ARTIST>Sam Brown</ARTIST>

</CD>

- <CD>

<TITLE>Bridge of Spies</TITLE>

<COMPANY>Siren</COMPANY>

</CD>

- <CD>

<TITLE>Private Dancer</TITLE>

<ARTIST>Tina Turner</ARTIST>

<COMPANY>Capitol</COMPANY>

</CD>

- <CD>

<TITLE>Midt om natten</TITLE>

<ARTIST>Kim Larsen</ARTIST>

<COMPANY>Medley</COMPANY>

</CD>

- <CD>

<TITLE>Pavarotti Gala Concert</TITLE>

<ARTIST>Luciano Pavarotti</ARTIST>

<COMPANY>DECCA</COMPANY>

</CD>

- <CD>

<ARTIST>Otis Redding</ARTIST>

<COMPANY>Atlantic</COMPANY>

</CD>

- <CD>

<TITLE>Picture book</TITLE>

<ARTIST>Simply Red</ARTIST>

<COMPANY>Elektra</COMPANY>

</CD>

- <CD>

<ARTIST>The Communards</ARTIST>

<COMPANY>London</COMPANY>

</CD>

- <CD>

<TITLE>Unchain my heart</TITLE>

<ARTIST>Joe Cocker</ARTIST>

</CD>

</CATALOG>

将XML文档载入数据岛

数据岛可以访问XML文件。

通过数据岛，可以把XML文档引入到HTML页面中。

<xml src="cd_catalog.xml" id="xmldso" async="false"></xml>

使用上面示例代码，可以把cd_catalog.xml文件载入一个叫"xmldso"的数据岛中。属性async="false"的作用是在HTML处理器开始处理XML数据以前，必须确保XML文档中的所有数据都被载入到内存中。

把XML数据绑定到HTML的表格元素中

HTML中的table元素可以用来显示XML数据。

为了使你的XML数据能在HTML页面中显示出来，必须把的数据岛绑定到一个HTML元素上。

把XML数据绑定到table元素，需要在table属性添加一个资源属性，并且在span元素中添加字段属性:

<table datasrc="#xmldso" width="100%" border="1"><thead><th>Title</th><th>Artist</th><th>Year</th></thead><tr align="left"><td><span datafld="TITLE"></span></td><td><span datafld="ARTIST"></span></td><td><span datafld="YEAR"></span></td></tr>

</table>

如果你使用的是IE5.0或者更高版本: 观看数据岛绑定的实例

<html>

<body>

<xml

src="cd_catalog.xml" tppabs="http://www.w3schools.com/xml/cd_catalog.xml"

id="xmldso"

async="false">

</xml>

<table

datasrc="#xmldso"

width="100%"

border="1">

<thead>

<th>Title</th>

<th>Artist</th>

</thead>

</tr>

</table>

</body>

</html>

把数据岛绑定到<span> 或者<div> 元素上

<span>或<div>元素都可以用来显示XML数据。

没有必要使用table元素来显示XML数据，数据可以通过数据岛绑定到任何一个HTML元素上。

所要做的就是在你得页面中添加一些<span> 或者<div>元素，使用数据资源属性把每一个元素和XML文档元素绑定起来，就象下面这样:

<br />Title:<span datasrc="#xmldso" datafld="TITLE"></span><br />Artist:<span datasrc="#xmldso" datafld="ARTIST"></span><br />Year:<span datasrc="#xmldso" datafld="YEAR"></span>

或者象这样的形式:

<br />Title:<div datasrc="#xmldso" datafld="TITLE"></div><br />Artist:<div datasrc="#xmldso" datafld="ARTIST"></div><br />Year:<div datasrc="#xmldso" datafld="YEAR"></div>

如果你使用IE5.0或者更高版本: 观看数据绑定到HTML元素上的实例。

<html>

<body>

<br />Title:

<br />Artist:

<br />Year:

</body>

</html>

注意如果你使用<div>元素,数据将会显示在新的一行里。

上面的例子，可以看到XML数据都显示在一行里。如果要控制数据换行，就必须在你的代码里添加一些脚本程序。

为你的XML数据添加导航脚本

可以通过脚本程序来实现导航功能。

添加数据岛方法，使用脚本函数movenext() 和 moveprevious() 来实现导航功能。

<script type="text/javascript">function movenext(){x=xmldso.recordsetif (x.absoluteposition < x.recordcount){x.movenext()}}function moveprevious(){x=xmldso.recordsetif (x.absoluteposition > 1){x.moveprevious()}}</script>

如果你使用IE5.0或者更高版本:观看具有导航功能的XML数据绑定实例。

<html>

<head>

function movenext()

{

x=xmldso.recordset

if (x.absoluteposition < x.recordcount)

{

x.movenext()

}

function moveprevious()

{

x=xmldso.recordset

if (x.absoluteposition > 1)

{

x.moveprevious()

}

</script>

</head>

<body>

<p>

Title:

<br />Artist:

<br />Year:

</p>

<p>

<input type="button" value="Previous CD"

onclick="moveprevious()" />

<input type="button" value="Next CD"

onclick="movenext()" />

</p>

</body>

</html>

小结

如果你有创造力的话就可以编写出非常完善的应用程序。

如果你使用在这一页中学到的知识，在发挥一下想象力，就可以轻易的创造出完善的应用程序。

如果你使用IE5.0或者更高版本:观看一个做了一些修改的数据绑定实例。

<head>

function testclick(field)

{

var row=field.rowIndex

xmldso_list.recordset.absoluteposition=row

td_title.innerHTML=xmldso_list.recordset("TITLE")

td_artist.innerHTML=xmldso_list.recordset("ARTIST")

td_year.innerHTML=xmldso_list.recordset("YEAR")

td_country.innerHTML=xmldso_list.recordset("COUNTRY")

td_company.innerHTML=xmldso_list.recordset("COMPANY")

td_price.innerHTML=xmldso_list.recordset("PRICE")

}

</script>

</head>

<tr align="left"><th>Title: </th><td id="td_title"></td></tr>

<tr align="left"><th>Artist: </th><td id="td_artist"></td></tr>

<tr align="left"><th>Country:</th><td id="td_country"></td></tr>

<tr align="left"><th>Company:</th><td id="td_company"></td></tr>

<tr align="left"><th>Price: </th><td id="td_price"></td></tr>

</table>

<p><b>

用鼠标点击下面的 CD目录列表试试

</b><p><p><p></p>

<thead>

<tr align="left"><th>Title</th><th>Artist</th><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr>

</thead>

</tr>

</table>