2

XML ファイルを 30 秒ごとに読み込み、その内容を 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ではなく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 に答える