JS解析XML文件和XML字符串详解
JS解析XML文件
<scripttype='text/javascript'>
loadXML=function(xmlFile){
varxmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser&&window.ActiveXObject){
varxmlDomVersions=['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
for(vari=0;i<xmlDomVersions.length;i++){
try{
xmlDoc=newActiveXObject(xmlDomVersions[i]);
break;
}catch(e){
}
}
}
//支持Mozilla浏览器
elseif(document.implementation&&document.implementation.createDocument){
try{
/*document.implementation.createDocument('','',null);方法的三个参数说明
*第一个参数是包含文档所使用的命名空间URI的字符串；
*第二个参数是包含文档根元素名称的字符串；
*第三个参数是要创建的文档类型（也称为doctype）
*/
xmlDoc=document.implementation.createDocument('','',null);
}catch(e){
}
}
else{
returnnull;
}
if(xmlDoc!=null){
xmlDoc.async=false;
xmlDoc.load(xmlFile);
}
returnxmlDoc;
}
</script>
JS解析XML字符串
<scripttype='text/javascript'>
loadXML=function(xmlString){
varxmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser&&window.ActiveXObject){//window.DOMParser判断是否是非ie浏览器
varxmlDomVersions=['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
for(vari=0;i<xmlDomVersions.length;i++){
try{
xmlDoc=newActiveXObject(xmlDomVersions[i]);
xmlDoc.async=false;
xmlDoc.loadXML(xmlString);//loadXML方法载入xml字符串
break;
}catch(e){
}
}
}
//支持Mozilla浏览器
elseif(window.DOMParser&&document.implementation&&document.implementation.createDocument){
try{
/*DOMParser对象解析XML文本并返回一个XMLDocument对象。
*要使用DOMParser，使用不带参数的构造函数来实例化它，然后调用其parseFromString()方法
*parseFromString(text,contentType)参数text:要解析的XML标记参数contentType文本的内容类型
*可能是"text/xml"、"application/xml"或"application/xhtml+xml"中的一个。注意，不支持"text/html"。
*/
domParser=newDOMParser();
xmlDoc=domParser.parseFromString(xmlString,'text/xml');
}catch(e){
}
}
else{
returnnull;
}
returnxmlDoc;
}
</script>
测试XML
<?xmlversion="1.0"encoding="utf-8"?> <DongFang> <Company> <cNname>1</cNname> <cIP>1</cIP> </Company> <Company> <cNname>2</cNname> <cIP>2</cIP> </Company> <Company> <cNname>3</cNname> <cIP>3</cIP> </Company> <Company> <cNname>4</cNname> <cIP>4</cIP> </Company> <Company> <cNname>5</cNname> <cIP>5</cIP> </Company> <Company> <cNname>6</cNname> <cIP>6</cIP> </Company> </DongFang>
使用方法
varxmldoc=loadXML(text.xml)
varelements=xmlDoc.getElementsByTagName("Company");
for(vari=0;i<elements.length;i++){
varname=elements[i].getElementsByTagName("cNname")[0].firstChild.nodeValue;
varip=elements[i].getElementsByTagName("cIP")[0].firstChild.nodeValue;
}
以上方法适合IE，下面我们来探讨下IE和火狐浏览器下解析XML的问题
分别针对ie和火狐分别作了对xml文档和xml字符串的解析，所有代码都注释掉了，想看哪部分功能，
去掉注释就可以了。
至于在ajax环境下解析xml，其实原理是一样的，只不过放在了ajax里，还是要对返回的xml进行解析。
<script>
//解析xml文档/////////////////////////////////////////////////////
varxmlDoc=null;
//支持IE浏览器
if(window.ActiveXObject){
xmlDoc=newActiveXObject("Microsoft.XMLDOM");
}
//支持Mozilla浏览器
elseif(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)进行遍历
//varnodes=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)函数遍历解析
//varnodes=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字符串/////////////////////////////////////////////////////////////////////////
varstr="<car>"+
"<brand><price>50万</price><pattern>A6</pattern></brand>"+
"<brand><price>65万</price><pattern>A8</pattern></brand>"+
"<brand><price>17万</price></brand>"+
"</car>";
//跨浏览器，ie和火狐解析xml使用的解析器是不一样的。
varxmlStrDoc=null;
if(window.DOMParser){//MozillaExplorer
parser=newDOMParser();
xmlStrDoc=parser.parseFromString(str,"text/xml");
}else{//InternetExplorer
xmlStrDoc=newActiveXObject("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)进行遍历
//varstrNodes=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",第2个节点才是真正的第一个节点。
//第3个节点是"\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)
//varnodes=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
</script>
其中xml每个节点所在层次是最烦人的问题，只能一次次去试，只要出来一个正确的，
就很好确定节点的层次关系了，或者debug一下。
感觉这方面json还是更好阅读和理解。这个解析太费劲了！
文档house.xml内容如下：
<?xmlversion="1.0"encoding="utf-8"?> <address> <cityname="北京"> <price>150万</price> <type>一室三居</type> </city> <cityname="上海"> <price>200万</price> </city> <cityname="杭州"> <price>230万</price> </city> <cityname="南京"></city> </address>
以上所述就是本文的全部内容了，希望大家能够喜欢。