JS解析XML文件和XML字符串详解

前端之家收集整理的这篇文章主要介绍了JS解析XML文件和XML字符串详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JS解析XML文件

loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览器的类型 //支持IE浏览器 if(!window.DOMParser && window.ActiveXObject){ var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM']; for(var i=0;i支持Mozilla浏览器 else if(document.implementation && document.implementation.createDocument){ try{ /* document.implementation.createDocument('','',null); 方法的三个参数说明 * 第一个参数是包含文档所使用的命名空间URI的字符串; * 第二个参数是包含文档根元素名称的字符串; * 第三个参数是要创建的文档类型(也称为doctype) */ xmlDoc = document.implementation.createDocument('',null); }catch(e){ } } else{ return null; } if(xmlDoc!=null){ xmlDoc.async = false; xmlDoc.load(xmlFile); } return xmlDoc; }

JS解析XML字符串

loadXML = function(xmlString){ var xmlDoc=null; //判断浏览器的类型 //支持IE浏览器 if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser 判断是否是非ie浏览器 var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','Microsoft.XMLDOM']; for(var i=0;i方法载入xml字符串 break; }catch(e){ } } } //支持Mozilla浏览器 else if(window.DOMParser && document.implementation && document.implementation.createDocument){ try{ /* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。 * 要使用 DOMParser,使用不带参数的构造函数来实例化它,然后调用其 parseFromString() 方法 * parseFromString(text,contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型 * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意,不支持 "text/html"。 */ domParser = new DOMParser(); xmlDoc = domParser.parseFromString(xmlString,'text/xml'); }catch(e){ } } else{ return null; } return xmlDoc; }

测试XML

1 1 2 2 3 3 4 4 5 5 6 6

使用方法

以上方法适合IE,下面我们来探讨下IE和火狐浏览器下解析XML的问题

分别针对ie和火狐分别作了对xml文档和xml字符串的解析,所有代码都注释掉了,想看哪部分功能, 去掉注释就可以了。

至于在ajax环境下解析xml,其实原理是一样的,只不过放在了ajax里,还是要对返回的xml进行解析。

 
//解析xml文档///////////////////////////////////////////////////// 
var xmlDoc=null; 

//支持IE浏览器
if(window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
//支持Mozilla浏览器
else if(document.implementation && document.implementation.createDocument){
xmlDoc = document.implementation.createDocument('',null);
}
else{
alert("here");
}
if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load("house.xml");
}

//ie和火狐不仅解析器不一样,解析过程也不一样。如下;
//ie解析xml文档
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居

//层层遍历解析childNodes[1]
//alert(xmlDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].nodeValue);//弹出200万
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居

//还可以用item(i)进行遍历
//var nodes=xmlDoc.documentElement.childNodes;
//alert(nodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出150万
//alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出一室三居

//火狐解析xml文档
//火狐浏览器和ie解析xml不一样节点的值用textContent。
//并且他会在有的层次child节点前后都加上"\n"换行符。(这个搞不清楚为什么,用firebug调试的时候就是这个样子,所以写过的代码最好测试一下,换个环境就不对了)
//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。
//第3个节点是"\n",第4个节点才是真正的第二个节点。
//层层获取解析childNodes[0]
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//弹出150万
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//弹出一室三居

//直接获取节点名解析getElementsByTagName("address")
//alert(xmlDoc.getElementsByTagName("address")[0].textContent);//弹出150万 一室三居 200万 300万
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//弹出150万 一室三居
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//弹出150万
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//弹出一室三居
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//弹出200万

//火狐也可以用item(1)函数遍历,注意也是有的层次节点前后都加了节点"\n"。
//第一个节点是item(1),第二个节点是item(3),第三个节点是item(5)
//item(1)函数遍历解析
//var nodes=xmlDoc.documentElement.childNodes;
//alert(nodes.item(1).textContent); //弹出150万 一室三居
//alert(nodes.item(1).childNodes.item(1).textContent); //弹出150万
//alert(nodes.item(1).childNodes.item(3).textContent); //一室三居

//解析xml字符串/////////////////////////////////////////////////////////////////////////
var str=""+
"50万A6"+
"65万A8"+
"17万"+
"
";

//跨浏览器,ie和火狐解析xml使用的解析器是不一样的。
var xmlStrDoc=null;
if (window.DOMParser){// Mozilla Explorer
parser=new DOMParser();
xmlStrDoc=parser.parseFromString(str,"text/xml");
}else{// Internet Explorer
xmlStrDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlStrDoc.async="false";
xmlStrDoc.loadXML(str);
}

//ie解析xml字符串
//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出50万
//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出A6

//还可以用item(i)进行遍历
//var strNodes=xmlStrDoc.documentElement.childNodes;
//alert(strNodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出50万
//alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出A6

//火狐解析xml字符串
//火狐浏览器和ie解析xml不一样节点的值用textContent。
//并且他会在有的层次child节点前后都加上"\n"换行符。
//也就是说第1个节点是"\n",第4个节点才是真正的第二个节点。
//alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//弹出65万 A8
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//弹出65万

//火狐也可以用item(1)函数遍历,注意也是有的层次节点前后都加了节点"\n"。
//第一个节点是item(1),第二个节点是item(3),第三个节点是item(5)
//var nodes=xmlStrDoc.documentElement.childNodes;
//alert(nodes.item(1).textContent); //弹出65万 A8
//alert(nodes.item(1).childNodes.item(0).textContent); //弹出65万
//alert(nodes.item(1).childNodes.item(1).textContent); //弹出A8

其中xml每个节点所在层次是最烦人的问题,只能一次次去试,只要出来一个正确的, 就很好确定节点的层次关系了,或者debug一下。 感觉这方面json还是更好阅读和理解。这个解析太费劲了!

文档house.xml内容如下:

150万 一室三居 200万 230万

以上所述就是本文的全部内容了,希望大家能够喜欢。

原文链接:https://www.f2er.com/js/54699.html

猜你在找的JavaScript相关文章