Question

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

HMTL：

<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文件中，则不必重新启动应用程序 - 如果这是有意义的（并且是可能的）

Answer 1

您可以将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();

Javascript - 循环浏览xml元素并依次显示

1 个答案: