XML属性をHTMLページに表示

JavaScriptを使用してHTMLページにXML属性の詳細を表示する作業を進めています。私のXMLファイルは、次のとおりです。HTMLのためのXML属性をHTMLページに表示

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

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

出典

2012-04-08 AMUL

あなたのFirebugのコンソールが何と言っていますか？（またはChromeデベロッパーコンソール） – jmort253

エラー：SCRIPT5：アクセスが拒否されました。 home.html、行12文字1 – AMUL

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

trueここでは、非同期HTTP要求が表示されます。それはバックグラウンドでドキュメントを取得するためにオフになり、終了時にreadyState==4でonreadystatechangeを呼び出します。これはおそらく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>

出典

2012-04-08 07:51:07 bobince

XML属性をHTMLページに表示

答えて

関連する問題