JS跨浏览器解析XML应用

标签: js 浏览器 解析 | 发表时间:2012-03-21 17:50 | 作者:
出处:http://www.iteye.com

首先介绍简单的理论:

对于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内节点的属性和子节点的内容。对于一般应用来说,我觉得上面内容已经足够了。我会在之后补充一些其他操作。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [js 浏览器 解析] 推荐:

JS跨浏览器解析XML应用

- - ITeye博客
对于XML,我们可以理解它是一种树结构,它包含根,元素,属性,文本等内容. 不同浏览器都有自己的解析器,把XML读入内存,并把它转换为可被 JavaScript 访问的 XML DOM 对象. 微软的 XML 解析器与其他浏览器中的解析器是有差异的. 微软的解析器支持对 XML 文件和 XML 字符串(文本)的加载,而其他浏览器使用单独的解析器.

js实现浏览器全屏

- - Web前端 - ITeye博客
  HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做 . 全屏API,游戏呀,等都很有用.     作用:请求某个元素element全屏 .   这里是将其中的元素ID去请求fullscreen .   如果用户在全屏模式下,则返回true .   返回当前处于全屏模式下的元素 .

用html5 js实现浏览器全屏 - 天魂地煞

- - 博客园_首页
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持. "" : "not ";}, false); 全屏样式设置.

用js小类库获取浏览器的高度和宽度信息

- - 博客园_首页
在做项目时碰到了要在页面上显示一个浮动DIV层的效果. 本来做的是在页面居中时显示的,但后来经过自己的测试发现,当网页中出现了滚动条之后,那个浮动的DIV却还是在页面的顶部显示的. 因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果(其实已经在页面的顶部显示了),因此,我们需要准备的知道用户当前的浏览的位置的信息.

【Web 开发必备】 史上最全的浏览器 CSS & JS Hack 手册

- - 博客园_首页
  浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异. 因此,浏览器兼容成为前端开发人员的必备技能. 如果有一份浏览器 Hack 手册,那查询起来就方便多了. 这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊.

纯js实现浏览器图片选择预览、旋转、批量上传

- - ITeye博客
工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本. 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点:. IE input type=file的图片预览要用IE的filter css.    chrome/firefox则用File api的file reader.

一句话解决JS获得图片尺寸问题,兼容各个浏览器

- - CSDN博客推荐文章
之前用到图片等比缩小或者懒加载或者预加载之类的都要首先获得图片的高度和宽度,到网上看别人 用 Image 对象 使用 image.width,image.height 或者使用一个div包裹图片,不设置图片的高和宽,然后获得div的宽和高就是图片的高和宽,但是经过本人实验 首先使用image对象的方法获得尺寸,很不靠谱,特在IE7上面 ,很坑爹,存在很多兼容性问题.

JS获取Ip和浏览器信息,用户逗留时间写进数据库

- - ITeye博客
data: "{IP:'" + IP + "',city:'" + city + "',fromURL:'" + fromURL + "',Browse:'" + Browse + "',time:'" + time + "'}",. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载

- - CSDN博客Web前端推荐文章
        最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多. 在上传图片之前验证图片的格式,并同时实现预览. 这篇博客我们就用一段简单的js代码来实现验证图片格式,并同时预览的功能. 选择图片:
.

浏览器是怎样工作的:渲染引擎,HTML解析(连载二)

- - 携程UED
渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上. 默认情况下渲染引擎可以显示HTML,XML文档以及图片. 通过插件(浏览器扩展)它可以显示其它类型文档. 比如使用PDF viewer插件显示PDF文件. 我们会在一个专门的章节讨论插件与扩展. 在这一节我们将专注渲染引擎的主要用途——显示用CSS格式化的HTML与图片.