编程新手，所以这可能会成为大多数人的简单修复。话虽如此，我在通过HTML代码操作XML节点时遇到了麻烦，下面是我要完成的工作。
我的功能只是没有操纵从XML文件加载的现有数据，而且我不太清楚如何进行第二步。
XML文件
<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
<name id="waffle">Belgian Waffles</name>
<price>$5.95</price>
<description>
Two of our famous Belgian Waffles with plenty of real maple syrup
</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>
Light Belgian waffles covered with strawberries and whipped cream
</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>
Belgian waffles covered with assorted fresh berries and whipped cream
</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<price>$4.50</price>
<description>
Thick slices made from our homemade sourdough bread
</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>
Two eggs, bacon or sausage, toast, and our ever-popular hash browns
</description>
<calories>950</calories>
</food>
</breakfast_menu>
HTML文件
<!DOCTYPE html>
<html>
<body>
<div id="one">
<p id="demo"></p>
</div>
<form>
<input type="button" onclick="myFunction()" value="Change Item">
</form>
<script>
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","breakfast.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<div id='one'>");
var x=xmlDoc.getElementsByTagName("food");
for (i=0;i<x.length;i++)
{
document.write("<p>");
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write("Price: ", x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write("Calories: ", x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue);
document.write("</p></br><p id='two'>");
}
document.write("</div>");
function replace(xml) {
var textnode = document.createTextNode("English Muffin");
var x=xmlDoc.getElementsById("waffle").childNodes[0];
item.replaceChild(textnode, item.childNodes[0]).innerHTML;
}
function two(xml) {
xmlDoc.getElementsById("waffle")[0].childNodes[0].nodeValue = "English Muffin";
}
function myFunction(xml) {
var x, xmlDoc, txt;
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsById("waffle")[0].childNodes[0];
txt = x.nodeValue + "<br>";
x.nodeValue="English Muffin";
txt += x.nodeValue;
document.getElementById("demo").innerHTML = txt
}
</script>
</body>
</html>
答案 0 :(得分：0)
您没有正确配置XMLHttpRequest对象。您尚未设置“成功”回调函数，而是在发送请求后，您的代码会立即尝试访问结果而不等待请求处理，因此此时没有返回值。
XHR请求是异步的，这意味着我们不知道他们需要多长时间才能返回。我们必须设置一个可以在发生时调用的回调。
设置XHR的一般方法如下：
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","breakfast.xml",false);
// Set up callback functions to handle the outcomes of the request
xmlhttp.addEventListener("load", transferComplete);
xmlhttp.addEventListener("error", transferFailed);
// Only after the XHR has been completely configured can you send the request
xmlhttp.send();
// This function will be called when there is a successful
// response from the request.
function transferComplete(evt){
// Only when this function is called (automatically by the XHR)
// is it safe to access: xmlhttp.responseXML and only from within
// this function can you call it (unless you assign it to a higher
// scoped variable, but that wouldn't be a good idea because outside
// of this function, you can't be sure that the assignment has taken place.
// Also, instead of multiple document.write() statements, just
// populate an existing DOM element with the contents of
// the response.
}
// This function will be called when there is an error
function transferFailed(evt){
console.log("Something went wrong!");
}
有关设置XMLHttpRequest的详细信息，请参阅 this 。
备注：
XMLHttpRequest对象
多年了除非您仍然支持IE 8，否则您可以删除
整个if语句，只需使用：xmlhttp=new
XMLHttpRequest();。document.write()仅在将动态内容写入新内容时使用
窗口。相反，只需修改现有DOM元素的内容。答案 1 :(得分：0)
这样的事情会让你更接近，你需要向xmlhttprequest添加一个事件监听器来捕获load事件。在加载事件触发后，您可以处理您想要执行的XML。
<!DOCTYPE html>
<html>
<body>
<div id="one">
<p id="demo"></p>
</div>
<form>
<input type="button" onclick="myFunction()" value="Change Item">
</form>
<script>
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","breakfast.xml",false);
// this only sends out the request, it does not get populated with a response
xmlhttp.send();
// to get the file contents you need to add event listener for load event
xmlhttp.addEventListener("load", function(evt){
xmlDoc=xmlhttp.responseXML;
document.write("<div id='one'>");
var x=xmlDoc.getElementsByTagName("food");
for (i=0;i<x.length;i++)
{
document.write("<p>");
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write("Price: ", x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
document.write("</p><p>");
document.write("Calories: ", x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue);
document.write("</p></br><p id='two'>");
}
document.write("</div>");
});
function replace(xml) {
var textnode = document.createTextNode("English Muffin");
var x=xmlDoc.getElementsById("waffle").childNodes[0];
item.replaceChild(textnode, item.childNodes[0]).innerHTML;
}
function two(xml) {
xmlDoc.getElementsById("waffle")[0].childNodes[0].nodeValue = "English Muffin";
}
function myFunction(xml) {
var x, xmlDoc, txt;
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsById("waffle")[0].childNodes[0];
txt = x.nodeValue + "<br>";
x.nodeValue="English Muffin";
txt += x.nodeValue;
document.getElementById("demo").innerHTML = txt
}
</script>
</body>
</html>