XML 基础之 XML 数据岛简介

zhaipuhong

浏览: 69723 次
性别:
来自: 深圳

最近访客更多访客>>

hjz2002

zhanghuang0713

andye

xm19929

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2008-07 ( 10)
更多存档...

博客分类：

XML 浏览器 IE JavaScript HTML

自 Microsoft Internet Explorer 5.0 起，Internet Explorer 有一个非标准特性称为 XML 数据岛，它允许使用非标准 HTML 标签 <xml> 在 HTML 文档中嵌入 XML。Mozilla 不支持 XML 数据岛，将其作为未知的 HTML 标签处理。所以，XML 数据岛只在 IE 浏览器中有效。现在的 web 应用客户端浏览器都要求支持多浏览器，这岂不是给我们出难题吗？幸好 IE 和 Mozilla 都支持 XML DOM，我们可以使用 JavaScript 结合 XML DOM 来解析并显示 XML。

什么是 XML 数据岛？数据岛就是被HTML页面引用或包含的XML数据，XML数据可以包含在HTML文件内，也可以包含在某外部文件内。就像 JavaScript 和 CSS 一样，你可以在 HTML 文挡中直接嵌入 XML 数据，也可以引用外部的 XML 数据。在把 XML 文档绑定到 HTML 文档中的一个 <xml> 标签。其id 属性为数据岛定义标识符，而其 src 属性指向 XML 文件。示例代码如下：

xmldataisland.hmtl 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>xml data island</title>
</head>

<body>
	<xml id="employees"> <!-- 唯一 id -->
		<?xml version="1.0" encoding="utf-8" ?>
		<employees>
			<employee>
				<id>1</id>
				<name>zhaipuhong</name>
				<gender>male</gender>
				<age>28</age>
			</employee>
			<employee>
				<id>2</id>
				<name>dingxia</name>
				<gender>female</gender>
				<age>25</age>
			</employee>
		</employees>
	</xml>
	
	
	<xml id="majors" src="major.xml"></xml>  <!-- 唯一 id -->
	
	<table datasrc="#employees"> <!-- 请不要忘了符号 '#' -->
		<tr><!--<div> 标签允许 datafld 属性引用要显示的 XML 元素-->
			<td><div datafld="id"></div></td>
			<td><div datafld="name"></div></td>
			<td><div datafld="gender"></div></td>
			<td><div datafld="age"></div></td>
		</tr>
	</table> 
	
	<table datasrc="#majors"> <!-- 请不要忘了符号 '#' -->
		<tr><!--<span> 标签允许 datafld 属性引用要显示的 XML 元素-->
			<td><span datafld="name"></span></td> 
			<td><span datafld="term"></span></td>
		</tr>
	</table>
	
</body>
</html>

major.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<majors>
	<major>
		<name>Information Technology</name>
		<term>4 year</term>
	</major>
	<major>
		<name>mathimatics</name>
		<term>4 year</term>
	</major>
</majors>

<table> 标签的 datasrc 属性把 HTML 表格绑定到 XML 数据岛。

运行结果如下：

1 zhaipuhong male 28 
2 dingxia female 25 
Information Technology 4 year 
mathimatics 4 year

以上简单介绍了 IE 浏览器中使用 XML 数据岛 ，那么要跨浏览器使用 XML 数据岛 则应该使用 XML DOM 解析器。它解析包含序列化 XML 文档的字符串并为解析后的 XML 生成文档。Mozilla 使用 DOMParser 类，它接受序列化字符串并用它创建 XML 文档。在 Internet Explorer 可用 ActiveX 实现同样的功能。下面简要学习一下。

微软的 XML 解析器内建于 Internet Explorer 5 以及更高的版本中，在 JavaScript 中创建并载入 xml 文件：

//创建一个空的微软 XML 文档对象
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";    //关闭异步加载
//解析器加载 XML 文档
xmlDoc.load("major.xml"); 
//若加载xml字符串而非XML文件,使用下面的语句
//xmlDoc.loadXML(xmlString);  //加载 xml 字符串（文本）,根据需要选用

//注意:loadXML() 方法用于加载字符串（文本），load() 用于加载文件

在 Mozilla 的 Firefox 及其他浏览器中的 XML 解析器，示例如下：

//创建一个空的微软 XML 文档对象
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";     //关闭异步加载

//加载 XML 文档
xmlDoc.load("major.xml");
  
//若加载xml字符串而非XML文件,使用下面的语句
var parser=new DOMParser();
var doc=parser.parseFromString(xmlString,"text/xml");

下面给一个完整是浏览器兼容的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浏览器兼容的 XML DOM 实例</title>
</head>

<body>

	<script>
	 	//一个浏览器兼容的实例
		var xmlDoc = null; 
		if(window.ActiveXObject){
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  //Internet Explorer
		}else if(document.implementation.createDocument){
			xmlDoc = document.implementation.createDocument("","",null);   //Mozilla
		}
		
		xmlDoc.async=false;
        xmlDoc.load("major.xml");
		document.write(xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue);  		
	</script>
</body>
</html>

xmldataisland.rar (1.4 KB)
描述: 本文示例源码
下载次数: 120

分享到：