2

我想每 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>

在互联网上搜索了几个小时后，我发现了很多关于如何执行此操作的示例，但我不知道如何在我的特定情况下实现它。我不是程序员，所以请善待。

我真的很乐意提供任何帮助。这意味着很多。

4

1 回答 1

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>
于 2012-06-02T10:37:57.547 回答