XML 数据岛(XML Data Island )
通过使用 Internet Explorer ,非官方的 <xml> 标签可用来创建 XML 数据岛。
嵌入 HTML 中的 XML 数据
XML 数据岛是嵌入 HTML 中的 XML 数据。
下面我们为您演示它的工作原理;假设我们有下列的 XML 文档("note.xml") :
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
然后,在 HTML 文档中,您可以使用 <xml> 标签将上面的 XML 文件嵌入进去。<xml> 标签的 id 属性定义了数据岛的 ID ,而 src 属性指向被嵌入的 XML 文件:
<html>
<body>
<xml id="note" src="note.xml"></xml>
</body>
</html>
不过到此时,被嵌入的 XML 数据对用户来说是不可见的。
下一步的工作是,通过将数据岛绑定至 HTML 元素,来格式化和显示其中的数据。
将数据岛绑定至 HTML 元素
下面的例子中,我们会向 HTML 文件中嵌入名为 "cd_catalog.xml" 的 XML 文件。
这是HTML 文件:
<html>
<body>
<xml id="cdcat" src="cd_catalog.xml"></xml>
<table border="1" datasrc="#cdcat">
<tr>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="TITLE"></span></td>
</tr>
</table>
</body>
</html>
例子解释:
<table> 标签的 datasrc 属性可以把 HTML 格元素绑定到 XML 数据岛。这个 datasrc 属性会引用数据岛的 id 属性。
<td> 无法被绑定至数据岛,所以我们使用了 <span> 标签。<span> 允许 datafld 属性来引用需要显示的XML 元素。在本例中,datafld="ARTIST" 用来引用 XML 文件中的 <ARTIST> 元素,而 datafld="TITLE" 用来引用 XML 文件中的 <TITLE> 元素。当这个 XML 文件被读取时,会针对每一个 <CD> 创建更多的行。
如果您使用的 IE 浏览器是 5.0 或者更高的版本,那么您可以亲自测试一下(TIY) 。
还有另外一个例子,演示 <thead> 、<tbody> 以及 <tfoot> 。
将数据岛绑定至 <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>
如果您正在使用 IE 5.0 或者更高的版本:查看 XML 数据如何在 HTML 元素中显示 。
请注意,如果您使用了 HTML 的 <div> 元素,那么数据会被显示为新行。
通过上面的例子,您仅仅会看到一行 XML 数据。如需定位到下一格数据行,您需要向代码添加一些脚本。
添加导航脚本
导航功能可由脚本来实现。
为了向 XML 数据岛添加导航,你需要创建可调用数据岛的 movenext() 和 moveprevious() 方法的脚本。
<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="/example/xmle/xmle_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"
οnclick="moveprevious()" />
<input type="button" value="Next CD"
οnclick="movenext()" />
</p>
</body>
</html>