Detaillierte Erläuterung des JS-Parsings von XML-Dateien und XML-Strings

JS analysiert XML-Datei

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

JS analysiert XML-Zeichenfolge

<script type=&#39;text/javascript&#39;>
loadXML = function(xmlString){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser 判断是否是非ie浏览器
var xmlDomVersions = [&#39;MSXML.2.DOMDocument.6.0&#39;,&#39;MSXML.2.DOMDocument.3.0&#39;,&#39;Microsoft.XMLDOM&#39;];
for(var i=0;i<xmlDomVersions.length;i++){
try{
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
xmlDoc.async = false;
xmlDoc.loadXML(xmlString); //loadXML方法载入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, &#39;text/xml&#39;);
}catch(e){
}
}
else{
return null;
}
return xmlDoc;
}
</script>

XML testen

<?xml version="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>

Verwendungsmethode

var xmldoc=loadXML(text.xml)
var elements = xmlDoc.getElementsByTagName("Company");
for (var i = 0; i < elements.length; i++) {
var name = elements[i].getElementsByTagName("cNname")[0].firstChild.nodeValue;
var ip = elements[i].getElementsByTagName("cIP")[0].firstChild.nodeValue;
}

Die obige Methode eignet sich für IE. Lassen Sie uns das Problem des XML-Parsings in IE- und Firefox-Browsern besprechen.

Wir haben die Analyse von XML-Dokumenten und XML-Strings für IE bzw. Firefox durchgeführt. Analyse, alle Codes sind auskommentiert. Wenn Sie sehen möchten, welcher Teil der Funktion ist,
entfernen Sie einfach die Kommentare.

Was das Parsen von XML in einer Ajax-Umgebung betrifft, ist das Prinzip eigentlich dasselbe, mit der Ausnahme, dass das zurückgegebene XML immer noch analysiert werden muss, wenn es in Ajax platziert wird.

<script> 
//解析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(&#39;&#39;,&#39;&#39;,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="<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使用的解析器是不一样的。 
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",第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) 
//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  
  
</script>

Die Ebene jedes Knotens in XML ist das nervigste Problem. Sie können es nur immer wieder versuchen,
es wird einfach sein, das zu bestimmen Hierarchische Beziehung der Knoten oder einmaliges Debuggen.
Ich bin der Meinung, dass JSON in dieser Hinsicht besser zu lesen und zu verstehen ist. Diese Analyse ist zu aufwendig!

Der Inhalt des Dokuments house.xml lautet wie folgt:

<?xml version="1.0" encoding="utf-8" ?>  
<address> 
  <city name="北京"> 
    <price>150万</price> 
    <type>一室三居</type> 
  </city> 
  <city name="上海"> 
    <price>200万 </price> 
  </city> 
  <city name="杭州"> 
    <price>230万</price> 
  </city> 
  <city name="南京"></city> 
</address>

Weitere ausführliche Artikel zum Parsen von XML-Dateien und XML-Strings durch JS finden Sie hier Achten Sie auf die chinesische PHP-Website!