Javascript 在HTML页面中显示XML属性_Javascript_Html_Xml

Javascript 在HTML页面中显示XML属性

javascript html xml

Javascript 在HTML页面中显示XML属性,javascript,html,xml,Javascript,Html,Xml,我正在使用JavaScript在HTML页面中显示XML属性的详细信息。我的XML文件是： <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbi

我正在使用JavaScript在HTML页面中显示XML属性的详细信息。我的XML文件是：

<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>


皇帝讽刺剧
鲍勃·迪伦
美国
哥伦比亚
10.90
1985
隐藏你的心
邦尼泰勒
英国
哥伦比亚唱片公司
9.90
1988

HTML的代码是：

<html>
    <body>
    <script type="text/javascript">
    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","cd_catalog.xml",true);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 

    document.write("<table border='1'>");
    var x=xmlDoc.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
    { 
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }
    document.write("</table>");
    </script>
    </body>
</html>


if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“GET”，“cd_catalog.xml”，true）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
文件。填写（“”）；
var x=xmlDoc.getElementsByTagName（“CD”）；
对于（i=0；i
这里的true
为您提供了一个异步HTTP请求。它在后台提取文档，并在完成后用readyState==4
调用onreadystatechange
。在您阅读responseXML
的下一条语句时，这可能不会发生
如果需要同步请求，即暂停浏览器并在文档获取完成之前不执行下一行，请改用false

但是，请注意，浏览器“挂起”的结果通常被认为是非常不可取的。通常，您应该优先使用带有回调函数的异步请求。但是，这样的函数必须使用DOM方法将内容写入页面，而不是老式的文档。write
，这是唯一有用的可以在页面加载时使用
最后，您在将它们写入文档时读取的nodeValue
s不是HTML转义，因此，如果Firebug控制台（或Chrome开发者控制台）中有任何内容，它会给出错误：SCRIPT5：访问被拒绝。home.HTML，第12行字符1
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

<table id="cds"></table>
<script type="text/javascript">

    var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.onreadystatechange= function() {
        if (this.readyState===4 || this.status===200)
            populateTable(this.responseXML);
    };
    xhr.open('GET', 'cd_catalog.xml', true);
    xhr.send();

    function populateTable(xml) {
        var table= document.getElementById('cds');
        var cds= xml.getElementsByTagName('CD');
        for (var i= 0; i<cds.length; i++) {
            var row= table.insertRow(-1);

            function getProperty(name) {
                var el= cds[i].getElementsByTagName(name)[0];
                if (el.firstChild)
                    return el.firstChild.data;
                return ''; // allow empty elements
            }
            function addCell(value) {
                row.insertCell(-1).appendChild(document.createTextNode(value));
            }

            addCell(getProperty('ARTIST'));
            addCell(getProperty('TITLE'));
        }
    };

</script>