Question

我正在使用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>

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>

问题是浏览器中没有显示任何内容。上面的代码有什么问题吗？

Answer 1

xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

此处true为您提供异步HTTP请求。它会在后台获取文档，并在完成后使用onreadystatechange回拨readyState==4。在您阅读responseXML的下一个陈述中可能不会发生这种情况。

如果您需要同步请求，这将暂停浏览器而不会执行下一行，直到文档提取完成，请改为使用false。

但请注意，浏览器“挂起”通常被认为是非常不受欢迎的。通常，您应该优先使用具有回调函数的异步请求。但是，这样的函数必须使用DOM方法将内容写入页面，而不是仅在页面加载时可用的旧学校document.write。

最后，在将文档写入文档时，您不是HTML转义的nodeValue，所以如果数据中有<或&个字符，那么''我遇到了问题。

ETA：这是一个未经测试的与DOM方法异步执行的示例：

<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>

在HTML页面中显示XML属性

1 个答案: