XML文書データの解析において様々なブラウザに対応したJS実装方法

XML文書データの解析において様々なブラウザに対応したJS実装方法_javascriptスキル

WBOY

リリース： 2016-05-16 15:57:09

オリジナル

1081 人が閲覧しました

この記事の例では、XML 文書データを解析する際に、さまざまなブラウザーに対応した JS 実装方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

JS を使用して XML ドキュメントを解析する Web サイト上の多くのマテリアルには、多かれ少なかれ問題があります。

以下は私が要約したコードです。このコードは XML ドキュメントの解析に使用され、さまざまなブラウザーと互換性があります。

XMLDOM.js コードを解析します:

/* 
 * 纯JS解析XML文档(兼容各个浏览器) 
 */ 
function parseXMLDOM(){ 
 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(){ 
   var browserType = ""; 
   if(navigator.userAgent.indexOf("MSIE") != -1){ 
    browserType = "IE"; 
   }else if(navigator.userAgent.indexOf("Chrome") != -1){ 
    browserType = "Chrome"; 
   }else if(navigator.userAgent.indexOf("Firefox") != -1){ 
    browserType = "Firefox" 
   } 
   return browserType; 
  }, 
  "createXmlDom" : function(xmlDom){ 
   if(this.getBrowserType() == "IE"){//IE浏览器 
    xmlDom = new ActiveXObject('Microsoft.XMLDOM'); 
    xmlDom.async = false; 
    xmlDom.load(this.getXmlFile()); 
   }else{ 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("GET", this.getXmlFile(), false); 
    xmlhttp.send(null); 
    xmlDom = xmlhttp.responseXML; 
   } 
   return xmlDom; 
  }, 
  "parseXMLDOMInfo" : function(){ 
   var xmlDom = this.getXmlDom(); 
   if(this.getBrowserType() == "IE"){ 
    var bookObj = xmlDom.selectNodes("books/book"); 
    if(typeof(bookObj) != "undifined"){ 
     var strHtml=""; 
     for(var i = 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{ 
    var book = xmlDom.getElementsByTagName("book"); 
    var strHtml=""; 
    for(var i = 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(){ 
 var parseObj = new parseXMLDOM(); 
 //设置浏览器类型 
 parseObj.setBrowserType(parseObj.getBrowserType()); 
 //设置文件路径 
 parseObj.setXmlFile("test.xml"); 
 //创建XMLDOM 
 parseObj.setXmlDom(parseObj.createXmlDom(null)); 
 //解析XMLDOM 
 parseObj.parseXMLDOMInfo(); 
}

ログイン後にコピー

index.html コード:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <title>JS解析XML文档中的数据(兼容所有浏览器)</title> 
  <script language="javascript" type="text/javascript" src="js/parseXMLDOM.js"></script> 
 </head> 
 <body> 
  <span id="msg"></span> 
 </body> 
</html>

ログイン後にコピー

test.xml コード:

<&#63;xml version="1.0" encoding="UTF-8"&#63;> 
<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 プログラミング設計に役立つことを願っています。