如何直接用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

 

posted @ 2008-04-24 19:34  陋室  阅读(1265)  评论(1编辑  收藏  举报