JS实现兼容各浏览器解析XML文档数据的方法
本文实例讲述了JS实现兼容各浏览器解析XML文档数据的方法。分享给大家供大家参考。具体分析如下:
网站上很多用JS解析XML文档的资料或多或少都有点问题,
以下是自己总结的代码,用来解析XML文档,兼容各个浏览器。
parseXMLDOM.js代码:
/* *纯JS解析XML文档(兼容各个浏览器) */ functionparseXMLDOM(){ var_browserType=""; var_xmlFile=""; var_XmlDom=null; return{ "getBrowserType":function(){ return_browserType; }, "setBrowserType":function(browserType){ _browserType=browserType; }, "getXmlFile":function(){ return_xmlFile; }, "setXmlFile":function(xmlFile){ _xmlFile=xmlFile; }, "getXmlDom":function(){ return_XmlDom; }, "setXmlDom":function(XmlDom){ _XmlDom=XmlDom; }, "getBrowserType":function(){ varbrowserType=""; if(navigator.userAgent.indexOf("MSIE")!=-1){ browserType="IE"; }elseif(navigator.userAgent.indexOf("Chrome")!=-1){ browserType="Chrome"; }elseif(navigator.userAgent.indexOf("Firefox")!=-1){ browserType="Firefox" } returnbrowserType; }, "createXmlDom":function(xmlDom){ if(this.getBrowserType()=="IE"){//IE浏览器 xmlDom=newActiveXObject('Microsoft.XMLDOM'); xmlDom.async=false; xmlDom.load(this.getXmlFile()); }else{ varxmlhttp=newXMLHttpRequest(); xmlhttp.open("GET",this.getXmlFile(),false); xmlhttp.send(null); xmlDom=xmlhttp.responseXML; } returnxmlDom; }, "parseXMLDOMInfo":function(){ varxmlDom=this.getXmlDom(); if(this.getBrowserType()=="IE"){ varbookObj=xmlDom.selectNodes("books/book"); if(typeof(bookObj)!="undifined"){ varstrHtml=""; for(vari=0;i<bookObj.length;i++){ strHtml+=bookObj[i].selectSingleNode("isbn").text; strHtml+=""; strHtml+=bookObj[i].selectSingleNode("price").text; strHtml+=""; strHtml+=bookObj[i].selectSingleNode("title").text; if(i!=bookObj.length-1){ strHtml+="<br>"; } } } }else{ varbook=xmlDom.getElementsByTagName("book"); varstrHtml=""; for(vari=0;i<book.length;i++){ strHtml+=book[i].getElementsByTagName("isbn")[0].textContent; strHtml+=""; strHtml+=""; strHtml+=book[i].getElementsByTagName("price")[0].textContent; strHtml+=""; strHtml+=book[i].getElementsByTagName("title")[0].textContent; if(i!=book.length-1){ strHtml+="<br>"; } } } document.getElementById("msg").innerHTML=strHtml; } } } window.onload=function(){ varparseObj=newparseXMLDOM(); //设置浏览器类型 parseObj.setBrowserType(parseObj.getBrowserType()); //设置文件路径 parseObj.setXmlFile("test.xml"); //创建XMLDOM parseObj.setXmlDom(parseObj.createXmlDom(null)); //解析XMLDOM parseObj.parseXMLDOMInfo(); }
index.html代码:
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>JS解析XML文档中的数据(兼容所有浏览器)</title> <scriptlanguage="javascript"type="text/javascript"src="js/parseXMLDOM.js"></script> </head> <body> <spanid="msg"></span> </body> </html>
test.xml代码:
<?xmlversion="1.0"encoding="UTF-8"?> <books> <book> <isbn>2207-1258-123</isbn> <price>25</price> <title>Javascript</title> </book> <book> <isbn>2207-1258-456</isbn> <price>50</price> <title>Ajax</title> </book> <book> <isbn>2207-1258-789</isbn> <price>75</price> <title>C#</title> </book> </books>
希望本文所述对大家的javascript程序设计有所帮助。