Home/ Questions/Q 8015545
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T20:17:04+00:00

I would like to load an XML file every 30 seconds and display its

  • 0

I would like to load an XML file every 30 seconds and display its contents inside an HTML page.

So far I know how to load the file, but I don’t know how to automatically refresh it and display its updated contents. It would also be great if it did some error checking and if it displayed error.png image when it’s not able to load data.xml file.

Here is my code:

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

Here’s the XML file:

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

After searching the internet for a few hours I found many examples on how to do this, but I didn’t know how to implement it in my particular case. I am not a programmer, so please be kind.

I would really appriciate any help. It would mean a lot.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Please check the following code
    This simple ask for a text file from the server and updates a div each 5 seconds with the content of the textfile
    YOu will need to change the file you request to xml and instead of

    Please copy paste the following

    <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>
    • 0