如何自动刷新页面上的数据在区间上使用Ajax？

我想每30秒加载一个XML文件并在HTML页面中显示其内容。如何自动刷新页面上的数据在区间上使用Ajax？

到目前为止，我知道如何加载文件，但我不知道如何自动刷新它并显示它的更新内容。如果它进行了一些错误检查，并且在无法加载data.xml文件时显示error.png图像，它也会很棒。

这里是我的代码：

<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文件：

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

搜索互联网的几个小时，我发现如何做到这一点的例子很多之后，但我没有”不知道如何在我的特定情况下实现它。我不是程序员，所以请善待。

我会真的appriciate任何帮助。这意味着很多。

来源

2012-06-02 Karnak

请检查下面的代码这个简单的要求从服务器的文本文件，并更新一个div每5秒文本文件的内容你需要改变你的请求XML和替代

文件

请复制粘贴以下

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

回答

相关问题