Question

我想每30秒加载一个XML文件，并在HTML页面中显示其内容。

到目前为止，我知道如何加载文件，但我不知道如何自动刷新它并显示其更新的内容。如果它进行了一些错误检查，并且当它无法加载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>

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

我真的很喜欢任何帮助。这意味着很多。

Answer 1

请检查以下代码这个简单的请求来自服务器的文本文件，并使用文本文件的内容每5秒更新一次div 你需要将你请求的文件更改为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>

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

1 个答案: