如何直接用XML做数据源?

最新推荐文章于 2024-05-21 10:00:03 发布

转载最新推荐文章于 2024-05-21 10:00:03 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mqcan/archive/2008/04/24/1169838.html

本文介绍了一种将XML文档作为数据源直接绑定到HTML元素的方法，包括数据岛的使用、XML数据绑定到HTML表格和元素的过程及导航脚本的添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于我们很多的数据是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>

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>

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

<thead>

<th>Title</th>

<th>Artist</th>

<th>Country</th>

<th>Company</th>

<th>Price</th>

</tr>

</thead>

</tr>

</table>

</body>

</html>

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