간격에서 Ajax를 사용하여 페이지의 데이터를 자동으로 새로 고치는 방법은 무엇입니까?

나는 매 30 초마다 XML 파일을로드하고 그 내용을 HTML 페이지에 표시하려고합니다.간격에서 Ajax를 사용하여 페이지의 데이터를 자동으로 새로 고치는 방법은 무엇입니까?

지금까지 파일을로드하는 방법을 알고 있지만 자동으로 새로 고치고 업데이트 된 내용을 표시하는 방법을 모르겠습니다. data.xml 파일을로드 할 수없는 경우 error.png 이미지가 표시되는지 확인하는 것도 좋을 것입니다. '

<?xml version="1.0" encoding="utf-8"?> 
<definitions> 
    <foo> 
    <bar>1</bar> 
    <qux>One</qux> 
    </foo> 
    <foo> 
    <bar>2</bar> 
    <qux>Two</qux> 
    </foo> 
    <foo> 
    <bar>3</bar> 
    <qux>Three</qux> 
    </foo> 
    <foo> 
    <bar>4</bar> 
    <qux>Four</qux> 
    </foo> 
    <foo> 
    <bar>5</bar> 
    <qux>Five</qux> 
    </foo> 
    <foo> 
    <bar>6</bar> 
    <qux>Six</qux> 
    </foo> 
    <foo> 
    <bar>7</bar> 
    <qux>Seven</qux> 
    </foo> 
</definitions>

나는이 작업을 수행하는 방법에 대한 많은 예를 찾아 몇 시간 동안 인터넷을 검색 한 후, 그러나 나는 didn를 :

<head> 
    <script> 
    window.XMLHttpRequest 
     { 
     xmlhttp = new XMLHttpRequest(); 
     } 
    xmlhttp.open("GET", "data.xml", false); 
    xmlhttp.send(); 

    loadXMLDoc = xmlhttp.responseXML; 
    f = loadXMLDoc.getElementsByTagName("foo"); 

    function buildBar(i) 
     { 
     qux = (f[i].getElementsByTagName("qux")[0].childNodes[0].nodeValue); 
     document.getElementById("displayBar").innerHTML = qux; 
     } 
    </script> 
</head> 
<body> 
    <script> 
    document.write("<ul>"); 
    for (var i = 0; i < f.length; i++) 
     { 
     document.write("<li onclick='buildBar(" + i + ")'>"); 
     document.write(f[i].getElementsByTagName("bar")[0].childNodes[0].nodeValue); 
     document.write("</li>"); 
     } 
    document.write("</ul>"); 
    </script> 

    <div id="displayBar"> 
    </div> 
</body>

다음은 XML 파일입니다 : 여기

내 코드입니다 내 특정 경우에 그것을 구현하는 방법을 안다. 나는 프로그래머가 아니므로 친절하게 대해주십시오.

나는 정말 도움이된다. 그것은 많은 것을 의미 할 것입니다.

출처

2012-06-02 Karnak

다음 코드 를 확인하시기 바랍니다이 간단한 당신이 XML로 요청하고 대신

파일을 변경해야합니다 서버에서 텍스트 파일을 요청하고 TEXTFILE의 내용 사업부 각 5 초 업데이트

붙여 복사하십시오

<div id="content"> 
    <script> 
    var f; 
    function buildContent(xml) 
    { 
     f = xml; 
     //Build the new child andd append it to the father 
     el = document.getElementById("content"); 
     // var txtNode = document.createTextNode(txt); 
     // el.appendChild(txtNode); 

     ulElement = document.createElement("ul"); 
     for (var i = 0; i < f.length; i++) 
     { 
      li = document.createElement("li") 
      a = document.createElement("a") 
      a.setAttribute("onclick", 'buildBar('+ i + ')'); 

      var txtNode = document.createTextNode(f[i].getElementsByTagName("bar")[0].childNodes[0].nodeValue); 
      a.appendChild(txtNode); 
      li.appendChild(a); 
      // document.write("</li>"); 
      ulElement.appendChild(li); 
     } 
     el.appendChild(ulElement); 
    } 

    function buildBar(i) 
    { 

     qux = (f[i].getElementsByTagName("qux")[0].childNodes[0].nodeValue); 
     document.getElementById("displayBar").innerHTML = qux; 
    } 
    </script> 
</div> 

<div id="displayBar"> 
    </div> 

    <script> 
    function doItOnInterval() 
    { 
     //Perform the Ajax request 
     window.XMLHttpRequest 
     { 
      xmlhttp = new XMLHttpRequest(); 
     } 
     xmlhttp.open("GET", "data.xml", false); 
     xmlhttp.send(); 

     loadXMLDoc = xmlhttp.responseXML; 
     f = loadXMLDoc.getElementsByTagName("foo"); 

     //Remove all child of the div 
     el = document.getElementById("content"); 
     if (el.hasChildNodes()) 
     { 
      while (el.childNodes.length >= 1) 
      { 
       el.removeChild(el.firstChild);  
      } 
     } 

     //Send the text to rebuild the content 
     buildContent(f); 
    } 

    //Call the ajax refresh each 5 seconds 
    doItOnInterval(); 
    setInterval("doItOnInterval()", 5000); 
    </script>

출처

2012-06-02 10:37:57

당신이 날은 제가 위에서 붙여 넣은 코드에이 솔루션을 통합하는 데 도움이 수 다음? 그것은 정말로 많은 것을 의미 할 것입니다. 감사. – Karnak

나는 빠른 편집 작업을 할 것이다. –

xml 파일의 세그먼트를 게시 해주세요 –

간격에서 Ajax를 사용하여 페이지의 데이터를 자동으로 새로 고치는 방법은 무엇입니까?

답변

관련 문제