原生JS操作XML
虽然现在广泛使用json数据格式,但是xml这种数据格式也是有他的作用的。html作为xml的先驱,我们可以用JS操作html的节点(DOM),所以操作xml也不会是太复杂。 生成XMLxml的规范不在此篇的讨论范围之中。下面说明我们如何用原生的JS来创建xml节点,以生成xml文档。 现代浏览器(IE9+)首先我们创建xml文档, // 创建一个新的、文档元素为<root>的xml文档 var xmldom = document.implementation.createDocument('','root',null); var child = xmldom.createElement('child'); var text = xmldom.createTextNode('hello'); child.setAttribute('a','dd'); // 可以像在html中一样为元素添加属性 child.appendChild(text); xmldom.documentElement.appendChild(child); 我们可以用DOMParser类型来将xml字符串转换为文档, var parser = new DOMParser(); // 要先创建一个DOMParser实例 // 第一个参数是xml字符串格式,也可以写成<root><child/></root>这种形式,第二个参数不可以省略 var xmldom = parser.parseFromString('<root><child></child></root>','text/xml'); 用这种方法和第一种方法所达到的效果是一样的。 既然我们可以将xml的字符串形式转换成xml文档,那么也可以将xml文档序列化, var serializer = new XMLSerializer(); var xmlstring = serializer.serializeToString(xmldom); 这样我们就可以得到序列化的xml文档。 IE8-我们需要用到ActiveObject对象,首先创建xml对象, // 创建XML对象 function createDocument() { if (typeof arguments.callee.activeXString != "string") { var versions = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument"],i,len; for (i = 0,len = versions.length; i < len; i++) { try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex) { //pass } } } return new ActiveXObject(arguments.callee.activeXString); } var xmldom = createDocument(); xmldom.loadXML("<root><child></child></root>"); 我们就得到了xml文档,当然如果你像创建xml文档,也得使用这种方式, var xmldom = createDocument(); xmldom.loadXML("<root></root>"); var xmldom2 = xmldom.createElement("child"); var text = xmldom.createTextNode('hello'); xmldom2.appendChild(text); xmldom.documentElement.appendChild(xmldom2); 读取XML文件现代浏览器(IE9+)chrome由于他的安全机制的限制,不可以读取本地的XML文件。可以通过在本地设置服务器的方式来读取文件,类似与原生Ajax请求,这里用同步方式来实现, var xml = new XMLHttpRequest(); xml.open("GET",xmlFile,false); xml.send(null); if(xmlhttp.readyState == 4){ xmldom = xmlhttp.responseXML.documentElement; } firefox我们可以用以下方法来获取我们本机上的xml文件 var xmldom = document.implementation.createDocument("","",null); xmldom.async = false; // 同步 xmldom.load('aa.xml'); IE8-继续使用先前的createDocument函数,用以下方法创建, var xmldom = createDocument(); xmldom.async = false; xmldom.load('aa.xml'); 加载方式和ff比较相近。 错误处理现代浏览器(IE9+)DOM2级处理xml错误时,没有用对象来捕获错误,而是直接生成一个错误的XML文档,通过这个文档可以获得错误信息。 var errors = xmldom.getElementsByTagName('parsererror'); if (errors.length) { console.log(errors[0].textContent); } IE8-在低版本的IE下,错误是xml文档的一个属性(无错时返回0),我们可以直接去获取, if (xmldom.parseError != 0) { // 处理错误 } XPath现代浏览器(非IE)我们使用DOM3级的Xpath来处理这个问题。首先,我们需要得到XpathResult对象,有以下两种方法, 一、 var eva = new XPathEvaluator(); var result = eva.evaluate('root/child',xmldom,null,XPathResult.OROERED_NODE_IIERATOR_TYPE,null); 二、 var result = xmldom.evaluate('root/child',null); 两个函数看上去参数十分的多,共有5个参数,第一个参数是XPath的路径,第二个参数是上下文节点对象,就是需要解析的xml文档对象,第三个参数是命名空间求解器(通常是null),第四个参数是返回的结果类型,第五个参数是保存结果的XPathResult对象(通常是null)。 返回的结果类型共有十种,将在以后进行介绍。 我们可以用以下方法来获得一个单一的节点, if (result != null) { console.log(result.singleNodeValue.tagName); } 对于节点集合,我们可以这样去处理, var nodes = []; if (result != null) { while ((node = result.iteraNext()) != null) { nodes.push(node); } } IEie下是基于ActiveX的xmlDOM文档对象实现的,在每个节点提供两个方法,selectSingleNode()和selectNodes()方法。两个方法都接受一个XPath模式的查找路径,找到匹配的返回,无则返回null。 var xmlele = xmldom.selectSingleNode('life/city'); // 得到第一个city节点,直接省略life根节点会出错 xmlele.xml // "<city><people><name>aaaa</name><age>11</age></people></city>" xmlele.tagName // "city"? ??xmlele.nodeName 也可以得到 操作十分类似与对html的操作。 对于路径的写法,有以下几种情况,
var xmlele = xmldom.selectNodes('life/city'); // 获得一个集合(数组) xmlele.length ?// 1 最后,在异步加载中,我们可以为onreadystatechange添加处理程序,共有4个状态(readyState), 1:DOM正在加载数据 2:DOM已经加载完成数据 3:DOM已经可以使用,某些部分可能无法访问 4:DOM已经完全可以使用 至于,整个一个大的兼容函数怎么写,我们只需要一次对各个不同的浏览器进行判断就可以了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |