1

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>

問題は、ブラウザに何も表示されないことです。上記のコードに問題はありますか？

4

1 に答える 1

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

hereはtrue、非同期 HTTP リクエストを提供します。バックグラウンドでドキュメントを取得するためにオフになり、終了するとコールバックonreadystatechangeしreadyState==4ます。これは、次のステートメントではおそらく発生していませんresponseXML。

同期リクエストが必要な場合は、ブラウザを一時停止し、ドキュメントのフェッチが完了するまで次の行を実行しませんfalse。代わりに使用します。

ただし、結果として生じるブラウザの「ハング」は、一般的に非常に望ましくないと考えられていることに注意してください。通常は、コールバック関数を優先して非同期リクエストを使用する必要があります。ただし、そのような関数は、コンテンツをページに書き込むために DOM メソッドを使用する必要がdocument.writeあり、ページの読み込み時にのみ使用できる従来の方法ではありません。

nodeValue最後に、ドキュメントに書き込むときに読み取った s を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>
于 2012-04-08T07:51:07.387 に答える