XML数据岛技术

最新推荐文章于 2017-05-13 15:49:45 发布

laven_liu

最新推荐文章于 2017-05-13 15:49:45 发布

阅读量178

点赞数

分类专栏： XML 文章标签： XML IE HTML Firefox 浏览器

XML 专栏收录该内容

2 篇文章

订阅专栏

:arrow: 最近，好几个朋友的项目中用到XML，这里特别讲下[color=red]XML数据岛技术[/color]，希望对他们以及来我BLOG的朋友们有所帮助，好了废话不多说了…
:arrow: 首先，我们来了解数据岛的概念，
[color=red]什么是数据岛(data Islands)？[/color]
[u]XML的数据源对象又称为DSO(data source object)或数据岛。
数据岛是指存在于HTML页面中的XML代码。 [/u]
[color=red]数据岛的优势[/color]
[u]将XML数据与HTML页面显示完美结合起来[/u]
[color=red]数据岛的缺陷[/color]
[u]只能在 IE 下运行，firefox等浏览器下无法使用。
安全性：xml 数据岛可通过查看 html 的源代码获取[/u]
:arrow: [color=red]数据岛在HTML中的显示方式[/color]
[color=red]DSO数据显示方式[/color]
[u]和SPAN标记捆绑[/u]
<span datasrc=”#数据源的名称” datafld=”某种标记或属性的名称” ></span>
[u]和DIV标记捆绑[/u]
<div datasrc=”#数据源的名称” datafld=”某种标记或属性的名称”></div>
[u]和INPUT标记捆绑[/u]
<input datasrc=”#数据源的名称” datafld=”某种标记或属性的名称”></input>
[u]和TEXTAREA标记捆绑[/u]
<textarea datasrc=”#数据源的名称” datafld=”某种标记或属性的名称”></textarea>
:arrow: [color=red]数据岛的使用[/color]
[u]内嵌数据岛[/u]
<xml id=“xmlid”> … </xml>
[u]外联的数据岛[/u]
<xml id=“xmlid” src=“1.xml“ />
:arrow: XML数据岛技术的东东就这么多了，下面给大家来个具体的实例了哟。
:arrow: 我们先写个[color=red]user.xml[/color]文件

<?xml version="1.0" encoding="UTF-8"?>	
		<user>
			<userName>admin</userName>
			<Gender>male</Gender>
			<age>22</age>
			<occupation>java engineer</occupation>
		</user>

:arrow: 下面就是我们写个[color=red]testdso.html[/color]，用来显示user.xml里内容。


<html>
  <head>
    <title>testdso.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
         <!-- 导入user.xml -->
 	<xml id="xmlid" src="./user.xml"/> 
         <!-- 注意这里用的datasrc控件 -->
	<table datasrc="#xmlid" border="1" >
		<tr>
			<td>userName</td>
			<td>Gender</td>
			<td>age</td>
			<td>occupation</td>
		</tr>
		<tr>
			<td><span  datafld="userName" ></span></td>
			<td><span  datafld="Gender" ></span></td>
			<td><span  datafld="age" ></span></td>
			<td><span  datafld="occupation" ></span></td>
		</tr>	
	</table>
  </body>
</html>