XML数据岛

最新推荐文章于 2011-07-12 12:15:00 发布

转载最新推荐文章于 2011-07-12 12:15:00 发布 · 1.7k 阅读

文章标签：

#xml #html #div #脚本 #button #function

w3c技术专栏收录该内容

9 篇文章

订阅专栏

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 文件：

不过到此时，被嵌入的 XML 数据对用户来说是不可见的。

下一步的工作是，通过将数据岛绑定至 HTML 元素，来格式化和显示其中的数据。

将数据岛绑定至 HTML 元素

下面的例子中，我们会向 HTML 文件中嵌入名为 "cd_catalog.xml" 的 XML 文件。

查看 "cd_catalog.xml" 。

这是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"
onclick="moveprevious()" />
<input type="button" value="Next CD"
onclick="movenext()" />
</p>
</body>
</html>