使用JavaScript解析XML文件 [英] Using JavaScript to parse an XML file
问题描述
我是Stack OverFlow和编码的新手。我正在尝试获取XML文件并使用JavaScript在浏览器中呈现它。我查看了一些如何执行此操作的示例代码，并提出了以下代码：
I am new to Stack OverFlow and coding in general. I am trying to take an XML file and render it in the browser using JavaScript. I have looked around at some sample code of how to do this and came up with the following code:
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","social.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("c_id")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
无论如何，当我在本地服务器上运行时，我试图显示的数据都没有表格出现了。我的.html文件和.xml文件在同一个文件夹中，所以我相信我有正确的文件路径。我可能只是在这里犯了一个菜鸟错误，但我不能为我的生活弄清楚为什么没有创建列出c_id和facebook_id值的表。我四处寻找答案，但却找不到任何答案。任何帮助将不胜感激。谢谢！
Anyway, when I run this on my local server none of the data that I am trying to display in the table appears. My .html file and .xml file are in the same folder, so I believe I have the correct file pathway. I could just be making a rookie mistake here, but I can't for the life of me figure out why a table listing the c_id and facebook_id values is not being created. I looked around for answers and haven't been able to find any. Any help would be greatly appreciated. Thanks!
推荐答案
您需要添加 onload 事件监听器发送请求之前 xmlhttprequest 。此外，您可能需要使用 DOMParser 解析XML。无论如何，这应该适用于现代浏览器：
You need to add an onload event listener to the xmlhttprequest before sending the request. Also, you might need to parse the XML with a DOMParser. Anyway, this should work on modern browsers:
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onload = function() {
var xmlDoc = new DOMParser().parseFromString(xmlhttp.responseText,'text/xml');
console.log(xmlDoc);
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("c_id")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
}
xmlhttp.open("GET","social.xml",false);
xmlhttp.send();
</script>
</body>
</html>
现在，只需要提一下你正在做的事情：
Now, just a couple of things worth mentioning about what you're doing:
-
xmlhttprequest对象有许多不同的参数，意味着各种各样的事情：readystate，状态代码，工程。您可能会对这些内容有所了解。
xmlhttprequestobjects have many different parameters that mean a variety of things:readystate, status code, the works. You might benefit looking a bit more into those.
document.write 应该永远不会被使用，永远。事实上，任何HTML注入方式都应该非常谨慎地处理。您可以使用许多MVC-esque框架中常见的基于模板的解决方案，或者如果您想要我的
document.write should really never be used, ever. In fact, any means of HTML injection should be handled very carefully. You could use a template-based solution common in many MVC-esque frameworks, or mine if you want :)
这篇关于使用JavaScript解析XML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
