1. 首页
  2. 问答
  3. 在html中使用JavaScript解析XML

在html中使用JavaScript解析XML

2016-05-09 72 views
2

您好，我想用javascript解析serverlist.xml到html网站。它的工作对我来说与国家，主机名，名称，地图，numplayers和MAXPLAYERS，但是当我想在html中使用JavaScript解析XML

table += x[i].getElementsByTagName("players")[0].childNodes[0].nodeValue;

解析的“玩家”的内容，那么我看不到任何东西。我想它是因为玩家标签有更多的孩子节点，但我不知道如何解决这个问题。谢谢你的帮助。

serverlist.xml

<qstat> 
    <server> 
    <hostname>1.2.3.4:27966</hostname> 
    <name>Server 1</name>  
    <gametype>Type 1</gametype> 
    <map>q3dm3</map> 
    <numplayers>3</numplayers> 
    <maxplayers>18</maxplayers> 
    <numspectators>0</numspectators> 
    <maxspectators>0</maxspectators> 
    <ping>0</ping> 
    <retries>0</retries> 
    <players> 
     <player> 
     <name>E.Krenz^GDR</name> 
     <score>6</score> 
     <ping>0</ping> 
     </player><player> 
     <name>G.Schroeder^GER</name> 
     <score>2</score> 
     <ping>0</ping> 
     </player> 
     <player> 
     <name>W.Ulbricht^GDR</name> 
     <score>1</score> 
     <ping>0</ping> 
     </player></players> 
    </server> 
</qstat>

serverlist.html

<html> 
<body> 
<table id="demo"></table> 

<script> 
var x,xmlhttp,xmlDoc 
xmlhttp = new XMLHttpRequest(); 
xmlhttp.open("GET", "../serverlist.xml", false); 
xmlhttp.send(); 
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("server"); 
table='<tr><th bgcolor="#333333">Players</th><th bgcolor="#333333">Country</th><th bgcolor="#333333">Servername</th><th bgcolor="#333333">IP</th><th bgcolor="#333333">Map</th><th bgcolor="#333333">Players</th><th bgcolor="#333333">Connect</th></tr>'; 
for (i = 0; i <x.length; i++) { 
    table += "<tr><td>"; 
    table += x[i].getElementsByTagName("players")[0].childNodes[0].nodeValue; 
    table += "</td><td>"; 
    table += '<iframe src="../serverlist/country/'; 
    table += x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue; 
    table += '.php" height="25px" width="27px" frameborder="0" scrolling="yes"></iframe>' 
    table += "</td><td>"; 
    table += x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue; 
    table += "</td><td>"; 
    table += x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue; 
    table += "</td><td>"; 
    table += x[i].getElementsByTagName("map")[0].childNodes[0].nodeValue; 
    table += "</td><td>"; 
    table += x[i].getElementsByTagName("numplayers")[0].childNodes[0].nodeValue; 
    table += "/"; 
    table += x[i].getElementsByTagName("maxplayers")[0].childNodes[0].nodeValue; 
    table += '</td><td><a href="hlsw://'; 
    table += x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue; 
    table += '/?Connect=1"><img src="../images/hlsw.jpg" width="13" height="13" border="0" />'; 
    table += '<img src="../images/pixel.png" width="10" height="10" border="0" /><a href="qtracker://'; 
    table += x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue; 
    table += '?game=quake3&amp;action=connect"><img src="../images/qtracker.jpg" width="13" height="13" border="0" /></a>' 
    table += '<img src="../images/pixel.png" width="10" height="10" border="0" /><a href="../serverlist/bat/'; 
    table += x[i].getElementsByTagName("hostname")[0].childNodes[0].nodeValue; 
    table += '.bat"><img src="../images/bat.png" width="13" height="13" border="0" /></a>' 
    table += "</td></tr>"; 
} 
document.getElementById("demo").innerHTML = table; 
</script> 
</body> 
</html>

来源

2016-05-09 hansfrans

+0

解析XML的DOM节点树结构，并通过它使用JavaScript的作品有所在某些浏览器中有所不同，具体取决于您使用的命令。解决这个问题将消除使用DOM结构时的一些“不可预见的问题”。它可以帮助将XML解析为对象树（就像使用JSON一样） - 之后您可以随心所欲地遍历，而不会出现奇怪的问题。我可以通过给你一个很好的“XML DOM to Object”解析器函数来回答这个问题。如果你想尝试这个，然后回来评论，我会用代码发布一个答案。 – argon

+0

感谢您的回答。请发布您的代码。谢谢。 ;） – hansfrans

回答

1

从评论的讨论，下面是一个文本到XML解析器功能的全面工作示例以及一简洁的数据类型标识符。

simplify函数使用上述函数来限制代码重复和复杂性，并将XML DOM结构转换为对象（或对象列表）。

每个 “节点” 具有3个方面表示XML节点：

  • Kind - 的 “nodeName的”（标签名）
  • Attr - 属性
  • Data - 内容

您可以根据需要更改这些“方面名称”。

要测试代码，只需将&粘贴到一个新的HTML文件中，保存&用您的网络浏览器打开它（本示例中不需要Web服务器）。

下面这个例子的输出将出现在web-console;所以，只需打开您的Web浏览器的“开发人员工具”并查看控制台日志。

查看最后<script>元素中的3行JavaScript代码，作为如何使用它的说明。

<html> 
    <head></head> 
    <body> 

     <script> 
      function typeOf(data) 
      { 
       var tpof = (({}).toString.call(data).match(/\s([a-zA-Z]+)/)[1].toLowerCase()); 

       tpof = (((tpof == 'element') || (tpof == 'window') || (tpof == 'global')) ? 'object' : tpof); 
       tpof = (((tpof == 'htmlcollection') || (tpof == 'namednodemap')) ? 'array' : tpof); 

       return tpof; 
      } 



      function parsed(data) 
      { 
       var text, list; 

       if (typeOf(data) == 'string') 
       { 
        data = data.trim(); 
        text = data.toLowerCase(); 
        list = {null:null, true:true, false:false}; 

        if (!isNaN(data)) 
        { return (data * 1); } 

        if (list[data]) 
        { return list[data]; } 

        if ((data.substr(0,1) == '<') && (data.substr(-1,1) == '>')) 
        { 
         var pars = new DOMParser(); 
         var dxml = null; 

         try 
         { dxml = pars.parseFromString(data, "application/xml"); } 
         catch(err) 
         { console.log(err); } 

         if (dxml) 
         { return ([].slice.call(dxml.childNodes)); } 
        } 

       } 

       return data; 
      } 



      function simplify(dxml) 
      { 
       var resl, kind, indx=0; 
       var list; 

       if (typeOf(dxml) == 'array') 
       { 
        resl = []; 

        for (var i in dxml) 
        { 
         if (!dxml.hasOwnProperty(i) || !dxml[i].nodeName) 
         { continue; } 

         kind = dxml[i].nodeName; 

         if ((kind == '#text') || (kind == '#comment')) 
         { continue; } 

         resl[indx] = simplify(dxml[i]); 
         indx++; 
        } 

        return resl; 
       } 


       resl = {Kind:dxml.nodeName.toLowerCase(), Attr:{}, Data:''}; 

       if (dxml.attributes && (dxml.attributes.length > 0)) 
       { 
        list = [].slice.call(dxml.attributes); 

        for (var i in list) 
        { 
         if (!list.hasOwnProperty(i) || !list[i].name || !list[i].value) 
         { continue; } 

         resl.Attr[list[i].name] = parsed(list[i].value); 
        } 
       } 

       if (dxml.childElementCount < 1) 
       { resl.Data = (dxml.textContent || ''); } 
       else 
       { resl.Data = simplify([].slice.call(dxml.childNodes)); } 

       return resl; 
      } 
     </script> 


     <script id="xdom" type="text/xmldata"> 
      <qstat> 
      <server> 
       <hostname>1.2.3.4:27966</hostname> 
       <name>Server 1</name>  
       <gametype>Type 1</gametype> 
       <map>q3dm3</map> 
       <numplayers>3</numplayers> 
       <maxplayers>18</maxplayers> 
       <numspectators>0</numspectators> 
       <maxspectators>0</maxspectators> 
       <ping>0</ping> 
       <retries>0</retries> 
       <players> 
       <player> 
        <name>E.Krenz^GDR</name> 
        <score>6</score> 
        <ping>0</ping> 
        </player><player> 
        <name>G.Schroeder^GER</name> 
        <score>2</score> 
        <ping>0</ping> 
       </player> 
       <player> 
        <name>W.Ulbricht^GDR</name> 
        <score>1</score> 
        <ping>0</ping> 
        </player></players> 
      </server> 
      </qstat> 
     </script> 


     <script> 
      var text = document.getElementById('xdom').innerHTML; 
      var xdom = parsed(text); 
      var tree = simplify(xdom); 

      console.log(tree); 
     </script> 

    </body> 
</html>

如果您发现该代码是有用的，不要忘了“赞成票”，感谢;）

来源

2016-05-09 18:00:12 argon

+0

当我打开html文件时，我只看到一个空白的白页。 – hansfrans

+0

检查控制台日志，对不起，我会编辑答案并在那里说。 – argon

+0

答案现在已更新，并包含打开浏览器的Web控制台的说明，其中显示结果。 – argon

相关问题

 相关问题