当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

JS跨浏览器解析XML应用

发表于: 2012-03-21   作者:cuisuqiang   来源:转载   浏览次数:
摘要: 首先介绍简单的理论: 对于XML,我们可以理解它是一种树结构,它包含根,元素,属性,文本等内容。不同浏览器都有自己的解析器,把XML读入内存,并把它转换为可被 JavaScript 访问的 XML DOM 对象。 微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串(文本)的加载,而其他浏览器使用单独的解析器。不过,所有的解析器都含有遍历

首先介绍简单的理论:

对于XML,我们可以理解它是一种树结构,它包含根,元素,属性,文本等内容。不同浏览器都有自己的解析器,把XML读入内存,并把它转换为可被 JavaScript 访问的 XML DOM 对象。

微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串(文本)的加载,而其他浏览器使用单独的解析器。不过,所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。

如果你使用的是一个本地文件或者网络文件且该文件在是在本服务器,那么对于IE和其他浏览器来说都可以通过load(uRl),loadXML(strXML)来创建Xdom对象。但是对于文本,除IE外需要一个单独的解析器来处理。

以下函数用于根据不同的浏览器来创建Xdom对象:

function loadXMLDoc() {
	var xmlDoc;
	// code for IE
	if (window.ActiveXObject){
	  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//创建空的微软 XML 文档对象
	  //xmlDoc.load(uRl);
	  //loadXML() 方法用于加载字符串(文本),而 load() 用于加载文件
	  xmlDoc.loadXML(xmlstr);
	}
	// code for Mozilla, Firefox, Opera, etc.
	else if(document.implementation&&document.implementation.createDocument){ 
	  xmlDoc=document.implementation.createDocument("","",null);
	  //xmlDoc.load(uRl);
	  //Internet Explorer 使用 loadXML() 方法来解析 XML 字符串,而其他浏览器使用 DOMParser 对象
	  parser=new DOMParser();
	  xmlDoc=parser.parseFromString(txt,"text/xml");
	}else{
	  alert('Your browser cannot handle this script');
	}
	//关闭异步加载,这样可确保在文档完整加载之前,解析器不会继续执行脚本
	xmlDoc.async=false;	
	createTable(xmlDoc);
}

 

方法内有具体的解析,我不再啰嗦,对于解析的内容,分为字符串和文本两种。

首先定义一个字符串:

var xmlstr="<?xml version=\"1.0\" encoding=\"UTF-8\"?><goodss><goods id=\"1\"><name>数码相机</name><price>3206(元)</price></goods><goods id=\"2\"><name>联想笔记本电脑</name><price>3206(元)</price></goods></goodss>";

 然后定义一个goods.xml文件:

文件内容为:

<?xml version="1.0" encoding="UTF-8"?>
<goodss>
	<goods id="1">
		<name>数码相机</name>
		<price>3206(元)</price>
	</goods>
	<goods id="2">
		<name>联想笔记本电脑</name>
		<price>3206(元)</price>
	</goods>
</goodss>

 

通过取消和注释方式来选择是文本还是字符串。

这个方法可以是通用的,下面再来解析这个Xdom对象:

function createTable(xmldoc){
	var goodss=xmldoc.getElementsByTagName("goods");
	for(var i=0;i<goodss.length;i++){
		var g=goodss[i];
		if (g.nodeType==1){
			var name=g.getElementsByTagName("name")[0].childNodes[0].nodeValue;
			var price=g.getElementsByTagName("price")[0].childNodes[0].nodeValue;
			var id=g.getAttribute("id");
			document.write(id +  "-->" + name + "-->" + price);
			document.write("<br />");
		}
	}	
}

 

对于使用到的函数和属性我们来解析一下:

/*
一些典型的 DOM 属性
x.nodeName - x 的名称 
x.nodeValue - x 的值 
x.parentNode - x 的父节点 
x.childNodes - x 的子节点 
x.attributes - x 的属性节点
x.firstChild - x 的第一个子节点,等同于childNodes[0]
x.lastChild  - x 的最后一个子节点
x.data - x 的内容,等同nodeValue
x.length - x 的长度
x.nodeType - x 的类型:1,元素,2,属性,3,文本,4,注释,5,文档
在上面的列表中,x 是一个节点对象
XML DOM 方法
x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素,返回的是数组
x.getAttribute(name) - 返回属性的值
*/
/*出于安全方面的原因,现代的浏览器不允许跨域的访问。
这意味着,网页以及它试图加载的 XML 文件,都必须位于相同的服务器上。
否则,xmlDoc.load() 将产生错误 "Access is denied"。
*/

 

早页面增加一个按钮来调用函数:

<input type="button" name="bxml" value="Read" onclick="loadXMLDoc()" />

 页面将会输出XMl内节点的属性和子节点的内容。对于一般应用来说,我觉得上面内容已经足够了。我会在之后补充一些其他操作。

 

请您到ITEYE看我的原创:http://cuisuqiang.iteye.com

或支持我的个人博客,地址:http://www.javacui.com

 

JS跨浏览器解析XML应用

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
首先、说一点关于opera浏览器不兼容问题。一般出现不兼容问题有两种原因: 第一:加载XML方式 第二
最近在一个后台系统中要实现复制功能,折腾了我一天多,要在IE,火狐,谷歌浏览器都能实现复制成功
先来直接分析源码,如下: <!DOCTYPE HTML><html> <head> <meta charset="UTF
转自: http://polaris.blog.51cto.com/1146394/265667/ 今天同事测试发现项目中一个小bug,然后我
今天同事测试发现项目中一个小bug,然后我负责解决。研究了不短的时间,终于搞定了,有点激动。呵呵
Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用 Socket.IO 是一个功能非常强大的框架,能够帮
最近接到一个功能拓展需求,新需求中所引用的数据接口却只能提供XML格式……无奈自身功力有限,没有
上次由于我的失误,导致小编摆了个乌龙,所以弄个版本出来正一下名 本次修改点: 1、增加了用户名和
日期:2013-1-22 来源:GBin1.com 在线演示 HTML5 audio的确非常棒,能够快速简单的帮助你添加音频
Respond.js主页: https://github.com/scottjehl/Respond Respond.js是为了解决IE6-IE8不支持响应式
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号