XML 应用程序


这一节示范了一个小型的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 >  
  
< COUNTRY > USA </ COUNTRY >  
  
< COMPANY > Columbia </ COMPANY >  
  
< PRICE > 10.90 </ PRICE >  
  
< YEAR > 1985 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Hide your heart </ TITLE >  
  
< ARTIST > Bonnie Tyler </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > CBS Records </ COMPANY >  
  
< PRICE > 9.90 </ PRICE >  
  
< YEAR > 1988 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Greatest Hits </ TITLE >  
  
< ARTIST > Dolly Parton </ ARTIST >  
  
< COUNTRY > USA </ COUNTRY >  
  
< COMPANY > RCA </ COMPANY >  
  
< PRICE > 9.90 </ PRICE >  
  
< YEAR > 1982 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Still got the blues </ TITLE >  
  
< ARTIST > Gary Moore </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > Virgin records </ COMPANY >  
  
< PRICE > 10.20 </ PRICE >  
  
< YEAR > 1990 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Eros </ TITLE >  
  
< ARTIST > Eros Ramazzotti </ ARTIST >  
  
< COUNTRY > EU </ COUNTRY >  
  
< COMPANY > BMG </ COMPANY >  
  
< PRICE > 9.90 </ PRICE >  
  
< YEAR > 1997 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > One night only </ TITLE >  
  
< ARTIST > Bee Gees </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > Polydor </ COMPANY >  
  
< PRICE > 10.90 </ PRICE >  
  
< YEAR > 1998 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Sylvias Mother </ TITLE >  
  
< ARTIST > Dr.Hook </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > CBS </ COMPANY >  
  
< PRICE > 8.10 </ PRICE >  
  
< YEAR > 1973 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Maggie May </ TITLE >  
  
< ARTIST > Rod Stewart </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > Pickwick </ COMPANY >  
  
< PRICE > 8.50 </ PRICE >  
  
< YEAR > 1990 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Romanza </ TITLE >  
  
< ARTIST > Andrea Bocelli </ ARTIST >  
  
< COUNTRY > EU </ COUNTRY >  
  
< COMPANY > Polydor </ COMPANY >  
  
< PRICE > 10.80 </ PRICE >  
  
< YEAR > 1996 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > When a man loves a woman </ TITLE >  
  
< ARTIST > Percy Sledge </ ARTIST >  
  
< COUNTRY > USA </ COUNTRY >  
  
< COMPANY > Atlantic </ COMPANY >  
  
< PRICE > 8.70 </ PRICE >  
  
< YEAR > 1987 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Black angel </ TITLE >  
  
< ARTIST > Savage Rose </ ARTIST >  
  
< COUNTRY > EU </ COUNTRY >  
  
< COMPANY > Mega </ COMPANY >  
  
< PRICE > 10.90 </ PRICE >  
  
< YEAR > 1995 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > 1999 Grammy Nominees </ TITLE >  
  
< ARTIST > Many </ ARTIST >  
  
< COUNTRY > USA </ COUNTRY >  
  
< COMPANY > Grammy </ COMPANY >  
  
< PRICE > 10.20 </ PRICE >  
  
< YEAR > 1999 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > For the good times </ TITLE >  
  
< ARTIST > Kenny Rogers </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > Mucik Master </ COMPANY >  
  
< PRICE > 8.70 </ PRICE >  
  
< YEAR > 1995 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Big Willie style </ TITLE >  
  
< ARTIST > Will Smith </ ARTIST >  
  
< COUNTRY > USA </ COUNTRY >  
  
< COMPANY > Columbia </ COMPANY >  
  
< PRICE > 9.90 </ PRICE >  
  
< YEAR > 1997 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Tupelo Honey </ TITLE >  
  
< ARTIST > Van Morrison </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > Polydor </ COMPANY >  
  
< PRICE > 8.20 </ PRICE >  
  
< YEAR > 1971 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Soulsville </ TITLE >  
  
< ARTIST > Jorn Hoel </ ARTIST >  
  
< COUNTRY > Norway </ COUNTRY >  
  
< COMPANY > WEA </ COMPANY >  
  
< PRICE > 7.90 </ PRICE >  
  
< YEAR > 1996 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > The very best of </ TITLE >  
  
< ARTIST > Cat Stevens </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > Island </ COMPANY >  
  
< PRICE > 8.90 </ PRICE >  
  
< YEAR > 1990 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Stop </ TITLE >  
  
< ARTIST > Sam Brown </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > A and M </ COMPANY >  
  
< PRICE > 8.90 </ PRICE >  
  
< YEAR > 1988 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Bridge of Spies </ TITLE >  
  
< ARTIST > T'Pau </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > Siren </ COMPANY >  
  
< PRICE > 7.90 </ PRICE >  
  
< YEAR > 1987 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Private Dancer </ TITLE >  
  
< ARTIST > Tina Turner </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > Capitol </ COMPANY >  
  
< PRICE > 8.90 </ PRICE >  
  
< YEAR > 1983 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Midt om natten </ TITLE >  
  
< ARTIST > Kim Larsen </ ARTIST >  
  
< COUNTRY > EU </ COUNTRY >  
  
< COMPANY > Medley </ COMPANY >  
  
< PRICE > 7.80 </ PRICE >  
  
< YEAR > 1983 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Pavarotti Gala Concert </ TITLE >  
  
< ARTIST > Luciano Pavarotti </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > DECCA </ COMPANY >  
  
< PRICE > 9.90 </ PRICE >  
  
< YEAR > 1991 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > The dock of the bay </ TITLE >  
  
< ARTIST > Otis Redding </ ARTIST >  
  
< COUNTRY > USA </ COUNTRY >  
  
< COMPANY > Atlantic </ COMPANY >  
  
< PRICE > 7.90 </ PRICE >  
  
< YEAR > 1987 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Picture book </ TITLE >  
  
< ARTIST > Simply Red </ ARTIST >  
  
< COUNTRY > EU </ COUNTRY >  
  
< COMPANY > Elektra </ COMPANY >  
  
< PRICE > 7.20 </ PRICE >  
  
< YEAR > 1985 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Red </ TITLE >  
  
< ARTIST > The Communards </ ARTIST >  
  
< COUNTRY > UK </ COUNTRY >  
  
< COMPANY > London </ COMPANY >  
  
< PRICE > 7.80 </ PRICE >  
  
< YEAR > 1987 </ YEAR >  
  
</ CD >
< CD >
  
< TITLE > Unchain my heart </ TITLE >  
  
< ARTIST > Joe Cocker </ ARTIST >  
  
< COUNTRY > USA </ COUNTRY >  
  
< COMPANY > EMI </ COMPANY >  
  
< PRICE > 8.20 </ PRICE >  
  
< YEAR > 1987 </ YEAR >  
  
</ 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 >
< 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 >
</ 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 >
< xml  src ="cd_catalog.xml"  tppabs ="http://www.w3schools.com/xml/cd_catalog.xml"  id ="xmldso"  async ="false" ></ 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 >
</ body >
</ html >

 

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

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


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

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

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

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

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

< html >
< head >
< script  type ="text/javascript" >
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 >
< xml  src ="cd_catalog.xml"  tppabs ="http://www.w3schools.com/xml/cd_catalog.xml"  id ="xmldso"  async ="false" ></ xml >
< p >
Title:
< span  datasrc ="#xmldso"  datafld ="TITLE" ></ span >
< br  /> Artist:
< span  datasrc ="#xmldso"  datafld ="ARTIST" ></ span >
< br  /> Year:
< span  datasrc ="#xmldso"  datafld ="YEAR" ></ span >
</ p >
< p >
< input  type ="button"  value ="Previous CD"
onclick
="moveprevious()"   />
< input  type ="button"  value ="Next CD"
onclick
="movenext()"   />
</ p >
</ body >
</ html >



小结

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

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

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

< head >
< script  type ="text/javascript" >
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 >

< xml  id ="xmldso_list"  src ="cd_catalog.xml"  tppabs ="http://www.w3schools.com/xml/cd_catalog.xml" ></ xml >
< table  border ="1"  bgcolor ="yellow" >
< 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 > Year:    </ th >< td  id ="td_year" ></ 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 >
< table  datasrc ="#xmldso_list"  border ="1" >
< 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  align ="left"  onClick ="testclick(this)" >
< td >< div  datafld ="TITLE" ></ td >
< td >< div  datafld ="ARTIST" ></ td >
< td >< div  datafld ="COUNTRY" ></ td >
< td >< div  datafld ="COMPANY" ></ td >
< td  align ="right" >< div  datafld ="PRICE" ></ td >
< td >< div  datafld ="YEAR" ></ td >
</ tr >
</ table >




 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值