如何直接用XML做数据源?

由于我们很多的数据是xml格式的,特别是web service得到的数据,我们能不能直接把xml作为数据源进行绑定呢?
答案是:yes!

本章演示一个 XML 应用程序的小型框架。

注释:本例使用了数据岛(Data Island),只能运行于 Internet Explorer 浏览器。

XML 文档实例

请看下面这个 XML 文档 ( "cd_catalog.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 >
<!  [CDATA[ more]] > </ CATALOG >

将 XML 文档载入数据岛

数据岛可用于访问 XML 文件。

如需在 HTML 页面“内部”获取 XML 文档,请您向 HTML 页面添加数据岛:

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

通过使用上面例子中的代码,XML 文件 "cd_catalog.xml" 将被载入一个名为 "xmldso" 的“可见的”数据岛中。添加 async="false" 属性的目的是为了在其他的 HTML 处理开始进行之前所有的 XML 数据均被载入。

将数据岛绑定至 HTML 表格

如果要让 XML 数据在 HTML 页面上可见,您必须把数据岛绑定至某个 HTML 元素。

如需向某个 HTML 表格绑定XML数据,请向 table 元素添加 datasrc 属性,并向 table 元素内部的 span 元素添加 datafld 属性:

 
   

< 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 >  

将数据岛绑定至 <span> 或 <div> 元素

<span> 或 <div> 元素可用于显示 XML 数据。

您不必使用 HTML 表格来显示 XML 数据。从数据岛那里来的数据可显示在 HTML 页面上的任何地方。

所有您需要做的事情就是向页面添加 <span> 或 <div> 元素。使用 datasrc 属性把元素绑定至数据岛,并使用 datafld 属性把每个元素绑定至 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 >
</ tr >
 
   

添加导航脚本

导航功能可由脚本来实现。

为了向 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>

EXample: 

Code
<html>

<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>

<body>
<xml id="xmldso_list" src="/example/xmle/xmle_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>Click on one of the CDs in the list:</b></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>

</body>
</html>

 

转载于:https://www.cnblogs.com/mqcan/archive/2008/04/24/1169838.html

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值