JS跨浏览器解析XML应用
编程技术 / houtizong 发布于 2年前 111
首先介绍简单的理论：
对于XML，我们可以理解它是一种树结构，它包含根，元素，属性，文本等内容。不同浏览器都有自己的解析器，把XML读入内存，并把它转换为可被 JavaScript 访问的 XML DOM 对象。
微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。
如果你使用的是一个本地文件或者网络文件且该文件在是在本服务器，那么对于IE和其他浏览器来说都可以通过load(uRl)，loadXML(strXML)来创建Xdom对象。但是对于文本，除IE外需要一个单独的解析器来处理。
以下函数用于根据不同的浏览器来创建Xdom对象：
function loadXMLDoc() {var xmlDoc;// code for IEif (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 的内容，等同nodeValuex.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
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
