JS如何跨浏览器进行解析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()" />
看完上述内容,你们掌握JS如何跨浏览器进行解析XML应用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。