使用JavaScript解析动态XML文件？
使用JavaScript解析动态XML文件？
提问于 2018-08-28 05:06:55
经过多年的休整，我现在才重新开始进行Web开发/设计。我现在可以使用一些指导来解决我当前做错的事情，以及一种更好的方法来指导我的代码获得更好的（工作）结果。
我要做的是JavaScript为网站创建一个应用程序，从特定XML文件中提取特定数据并将数据加载到页面。
数据全部位于12个不同的XML文件中，每月1个。每个文件都设置了每天的数据。我想要实现的是在页面加载时动态更新此数据，以显示特定日期的报价。
我尝试了很多不同的东西，但没有运气。加载时会出现空白页面。我不是在寻找答案 - 只是一些指导。
我的XML文件设置如下：
<MONTH>
<DAY>1
<TITLE></TITLE>
<QUOTE></QUOTE>
<SOURCE></SOURCE>
<TEXT></TEXT>
</DAY>
(1 every day for the entire month)
</MONTH>
关于如何设置HTML文件的简要草案，减去单独的CSS文件将如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Daily Reflection</title>
</head>
<body>
<script type="javascript" src="dr1.js"></script>
<div id="title"></div>
<div id="quote"></div>
<div id="source"></div>
<div id="text"></div>
</body>
</html>
我目前的JavaScript代码：
var date = new Date();
var day = date.getDay();
var xhttp = new XMLHttpRequest();
var months = new Array()
months[0] = "./DTA/january.xml";
months[1] = "./DTA/february.xml";
months[2] = "./DTA/march.xml";
months[3] = "./DTA/april.xml";
months[4] = "./DTA/may.xml";
months[5] = "./DTA/june.xml";
months[6] = "./DTA/july.xml";
months[7] = "./DTA/august.xml";
months[8] = "./DTA/september.xml";
months[9] = "./DTA/october.xml";
months[10] = "./DTA/november.xml";
months[11] = "./DTA/december.xml";
var month = months[date.getMonth()];
function getToday(xml) {
/*pull the xml file by "month".xml from the DTA subdir */
xhttp.open("GET", month, true);
xhttp.send();
/* pull and set variables for the current days reflection information from xml file */
var xmlDoc = xml.responseXML;
var title = xmlDoc.getElementsByTagName('title')[day];
var t = title.childNodes[0];
var quote = xmlDoc.getElementsByTagName('quote')[day];
var q = quote.childNodes[0]
var source = xmlDoc.getElementByTagName('source')[day];
var s = source.childNodes[0];
var text = xmlDoc.getElementByTagName('text')[day];
var x = text.childNodes[0];
/* write the set days reflection variables to the html document */
document.getElementById("title").innerHTML =
t.nodeValue;
document.getElementById("quote").innerHTML =
q.nodeValue;
document.getElementById("source").innerHTML =
s.nodeValue;
document.getElementById("text").innerHTML =
x.nodeValue;
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
getToday(this);
}
};
任何帮助是极大的赞赏！
回答 1
Stack Overflow用户
发布于 2018-08-28 14:23:45
你做事的顺序很破碎。
您只创建一个XMLHttpRequest对象（看起来您打算为每个请求回收它，不要这样做，为每个请求创建一个新对象）。
在创建对象时，您正在为其分配一个onreadystatechange函数（现代替换将使用addEventListener和使用load事件）。
你指定的函数负责调用open和send...但是在你调用之前状态不会改变open，send所以它永远不会被调用。
你需要重构你的逻辑。
确定将触发开始获取数据的内容。无论是加载页面，单击按钮还是其他内容。那时运行一个功能。
该功能应该：
- 创建一个新的XMLHttpRequest对象
- 为其分配一个负载事件处理程序，用于查看
responseXML和处理数据 - 呼叫
open - 呼叫
send
有关完整指南，请参阅使用XMLHttpRequest。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002456
复制相关文章
相似问题
腾讯云开发者
