Javascript -循环遍历xml元素并依次显示

Javascript - cycle through xml elements and display in turn

本文关键字：显示 元素 xml 循环 遍历 Javascript      更新时间：2023-09-26

我正在尝试创建一个应用程序，将显示，并定期更改，一段文本(如新闻文章或类似)。我希望数据来自xml文件，以便其他人可以添加故事/删除旧故事等。我试图让我的JavaScript填充一个单一的html字段与数据从xml文件。然后在给定的时间之后，现在我们说4秒，它会变成下一个数据。下面是我一直在尝试做的一个非常粗略的版本:

html: 

<head>
  <script src="script.js"></script>
</head>
<body>
  <div id="text"></div>
</body>
XML: 

<document>
  <text>one</text>
  <text>two</text>
  <text>three</text>
</document>
JavaScript: 

var timer = setInterval(addText,4000);
var xhttp = new XMLHttpRequest();
xhttp.onreadystaechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        addText(this);
    }
};
function addText(xml) {
    var xmlDoc = xml.responseXML;
    var count = 0;
    var max = xmlDoc.GetElementsByTagName("text");
    document.getElementById("text").innerHTML = 
    xmlDoc.getElementByTagName("text")[count].childNodes[0].nodeValue;
    if (count < max.length) {
        count++;
    } else {
        count = 0;
    }
}
xhttp.open("GET", "XMLFile.xml",true);
xhttp.send();

目前我遇到的问题是，第一个xml字段填充成功，但然后我得到一个错误说"Unable to get property 'responseXML' of undefined or null reference" .

理想情况下，我还希望每次函数发生时都打开xml文档，因此如果向xml文件中添加额外的数据，则不必重新启动应用程序—如果这有意义(并且可能)

可以将addText置于onreadystatechange处理程序的作用域中。像这样。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
       var xmlDoc = this.responseXML;
       var count = 0;
       var xText = xmlDoc.getElementsByTagName("text");
       var max = xText.length;
       var docText = document.getElementById("text");
       function addText() {
         //docText, xText and  count are available from parent scope
          docText.innerHTML = 
             xText[(count++) % max].childNodes[0].nodeValue;
       }
       var timer = setInterval(addText,4000);
    }
};
xhttp.open("GET", "XMLFile.xml",true);
xhttp.send();
相关文章：