Fatal编程技术网
  • javascript/
  • Javascript 将XML文件解析到表中

Javascript 将XML文件解析到表中

javascript ajax xml html dom

Javascript 将XML文件解析到表中,javascript,ajax,xml,html,dom,Javascript,Ajax,Xml,Html,Dom,这是需要解析的XML文件，我们称之为“servers.XML”。 此文件位于我希望解析它的同一服务器上（同一文件夹中的xml文件） 我已经花了几个小时研究如何做到这一点，但似乎无法正确显示或根本无法显示内容 谢谢你的帮助 编辑当前代码： <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black;

这是需要解析的XML文件，我们称之为“servers.XML”。 此文件位于我希望解析它的同一服务器上（同一文件夹中的xml文件）

我已经花了几个小时研究如何做到这一点，但似乎无法正确显示或根本无法显示内容

谢谢你的帮助

编辑当前代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse:collapse;
        }
        th, td {
            padding: 5px;
        }
    </style>
</head>
<body>

<script>
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","AOD-H1Z1.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    document.write("<table><tr><th colspan='2'>Server</th></tr>");
    var x=xmlDoc.getElementsByTagName("server");
    for (i=0;i<x.length;i++)
    {
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("timestamp")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("timestamp")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }
    document.write("</table>");
</script>

</body>
</html>


表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充物：5px；
}
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“GET”，“AOD-H1Z1.xml”，false）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
文件。写入（“服务器”）；
var x=xmlDoc.getElementsByTagName（“服务器”）；

对于（i=0；i首先，我注意到您在其他
节点中嵌套了
节点。例如，更可取的语法是删除这些包装节点，或将其重命名为
（这是我在下面的代码中假设的）

Edit：由于您的xml已经从Ajax请求中解析出来，您可以跳过
xmlString、xmlDoc
和解析部分

您可以这样分析它：



var xmlString='lowlowlowHighHighHighHighHighHighHighHigh'，
xmlDoc，
//创建表元素
table=document.createElement（'table'）；
//解析xml
if（window.DOMParser）{//标准浏览器
var parser=新的DOMParser（）；
xmlDoc=parser.parseFromString（xmlString，“text/xml”）；
}
else{//Internet Explorer
xmlDoc=新的ActiveXObject（“Microsoft.XMLDOM”）；
xmlDoc.async=false；
loadXML（xmlString）；
}
var servers=xmlDoc.getElementsByTagName（'list'）[0]。子节点[0]
.getElementsByTagName（'server'）；
//对于每个服务器

对于（var i=0，l=servers.length；iIs），有没有一种方法可以在不更改节点名称的情况下解析文件？

|----------------------------------|
| server name                      |
|----------------------------------|
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
|----------------------------------|
|                                  |
|----------------------------------|
| server name                      |
|----------------------------------|
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |
| timestamp name | timestamp value |



<!DOCTYPE html>
<html>
<head>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse:collapse;
        }
        th, td {
            padding: 5px;
        }
    </style>
</head>
<body>

<script>
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","AOD-H1Z1.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    document.write("<table><tr><th colspan='2'>Server</th></tr>");
    var x=xmlDoc.getElementsByTagName("server");
    for (i=0;i<x.length;i++)
    {
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("timestamp")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("timestamp")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }
    document.write("</table>");
</script>

</body>
</html>