javascript - 在 HTML 页面中显示 XML 属性-6ren

javascript - 在 HTML 页面中显示 XML 属性

转载作者：行者123 更新时间：2023-11-30 13:21:42

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

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

最佳答案

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

true这里给你一个异步 HTTP 请求。它会在后台获取文档并回调 onreadystatechange与 readyState==4当它完成时。在您阅读 responseXML 的下一条语句中，这可能不会发生。 .

如果您想要一个同步请求，这将暂停浏览器并且在文档获取完成之前不执行下一行，请使用 false相反。

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

最后，您没有对 nodeValue 进行 HTML 转义你在将它们写入文档时阅读过，所以如果有任何 <或 &数据中的字符，你就有问题了。

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>

关于javascript - 在 HTML 页面中显示 XML 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10061141/

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 HTML 页面中显示 XML 属性