2012-11-02 5 views
15

저는 Stack Overflow 및 코딩에 익숙하지 않습니다. XML 파일을 가져 와서 자바 스크립트를 사용하여 브라우저에서 렌더링하려고합니다. 나는이 작업을 수행하는 방법에 대한 몇 가지 샘플 코드에서 주위를 둘러 보았다 다음 코드를 내놓았다 한 : 어쨌든JavaScript를 사용하여 XML 파일 구문 분석

<!DOCTYPE html> 
<html> 
<body> 

<script> 
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","social.xml",false); 
    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("c_id")[0].childNodes[0].nodeValue); 
    document.write("</td><td>"); 
    document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue); 
    document.write("</td></tr>"); 
    } 
    document.write("</table>"); 
</script> 

</body> 
</html> 

, 나는이에 표시하는 것을 시도하고 데이터의 내 로컬 서버 없음에서이 작업을 실행할 때 테이블이 나타납니다. 내 .html 파일과 .xml 파일은 같은 폴더에 있으므로 올바른 파일 경로가 있다고 생각합니다. 여기서 신참 실수를 저지를 수는 있지만 c_id 및 facebook_id 값을 나열하는 테이블이 만들어지지 않는 이유를 알지 못합니다. 나는 대답을 둘러 보았고 아무 것도 찾을 수 없었다. 어떤 도움이라도 대단히 감사하겠습니다. 감사!

+0

어떤 브라우저를 테스트 하시겠습니까? 오류를보고하고 있습니까? –

답변

12

요청을 보내기 전에 onload 이벤트 수신기를 xmlhttprequest에 추가해야합니다. 또한 XML을 DOMParser으로 구문 분석해야 할 수도 있습니다. 어쨌든,이 현대적인 브라우저에서 작동합니다 :

<!DOCTYPE html> 
<html> 
    <body> 

     <script> 
      if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp=new XMLHttpRequest(); 
      } 
      else 
      {// code for IE6, IE5 
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 



      xmlhttp.onload = function() { 
       var xmlDoc = new DOMParser().parseFromString(xmlhttp.responseText,'text/xml'); 

       console.log(xmlDoc); 

       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("c_id")[0].childNodes[0].nodeValue); 
        document.write("</td><td>"); 
        document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue); 
        document.write("</td></tr>"); 
       } 
       document.write("</table>"); 

      } 


      xmlhttp.open("GET","social.xml",false); 
      xmlhttp.send(); 
      </script> 

    </body> 
</html> 

를 이제, 당신이 일을하는지에 대해 언급 할 가치가 것들의 단지 몇 :

  • xmlhttprequest 개체의 다양성을 의미하는 여러 가지 매개 변수가를 것들 : readystate, 상태 코드, 작동합니다. 그것들을 조금 더 살펴 보는 것이 도움이 될 것입니다.

  • document.write은 절대로 사용해서는 안됩니다. 사실 HTML 삽입 방법은 매우 조심스럽게 다루어야합니다. 많은 MVC-esque 프레임 워크에서 일반적인 템플릿 기반 솔루션을 사용할 수 있습니다. 또는 mine :