使用 JavaScript 读取 XML 内容并放入 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6569227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Read XML contents and put into HTML page using JavaScript
提问by Bala
I need to read through the XML file that contains info but one at a time and display in an HTML page. It needs to appear like its scrolling on its own within the HTML inside a <div>and in form of <p>. Can some one help me out with how to do this?
我需要通读包含信息但一次一个信息的 XML 文件并显示在 HTML 页面中。它需要在 HTML<div>中以<p>. 有人可以帮我解决如何做到这一点吗？
abc.xml
abc.xml
<?xml version="1.0" encoding="iso-8859-1" ?>
<projects>
<project>
<flag>1</flag>
<name>Project 1</name>
<descp> Short description. </descp>
<rating> 6 </rating>
<link> URL1 </link>
</project>
<project>
<flag>1</flag>
<name>Project 2</name>
<descp> Short description. </descp>
<rating> 9 </rating>
<link> URL2 </link>
</project>
<project>
<flag>1</flag>
<name>Project 3</name>
<descp> Short description. </descp>
<rating> 4 </rating>
<link> URL3 </link>
</project>
<project>
<flag>1</flag>
<name>Project 4</name>
<descp> Short description. </descp>
<rating> 5 </rating>
<link> URL4 </link>
</project>
</projects>
JavaScript:
JavaScript：
<script type="text/javascript">
window.onload = timer;
function timer() {
var xmlDoc=new ActiveXObject("MSXML.DOMDocument");
xmlDoc.async="false";
xmlDoc.load("./gsss_hp.xml");
var projects = xmlDoc.documentElement;
var project = projects.childNodes(0);
var numPro = projects.childNodes.length; // to find number of projects entered in the file
for(var i=0; i<numPro; i++){
for(var j=0; j<100000;j++){j+=18; j-=18; for(var z=0;z<5000;z++){}} /* do noting for nested loops */
show(i);
}
}
function show(num) {
var xmlDoc=new ActiveXObject("MSXML.DOMDocument");
xmlDoc.async="false";
xmlDoc.load("./gsss_hp.xml");
var projects = xmlDoc.documentElement;
var project = projects.childNodes(num);
var attr = project.childNodes.length;
for(var i=0;i<attr;i++){
var txt = xmlDoc.getElementsByTagName("project")[0].childNodes[i].nodeValue;
txt = txt + "<br />";
var idPos;
if(i==1) { idPos = "name"; }
else
if(i==2) { idPos = "descp"; }
else
if(i==3) { idPos = "rating"; }
else
if(i==4) { idPos = "link"; }
document.getElementById(idPos).innerHTML = txt;
}
}
</script>
采纳答案by Arvid Janson
While I'll leave the actual coding to you, the general structure I would use for something like this is:
虽然我会将实际编码留给您，但我将用于此类操作的一般结构是：
- Start off by loading the XML.
- When the XML is loaded, extract the data into a regular javascript array, to make it easier to handle.
- Use setTimeout to call draw-function at a specified interval ( http://www.w3schools.com/js/js_timing.asp) and set a (global) variable to remember which index is the last one displayed.
- The draw function displays the data, and increments the variable. If == length, reset count.
- 首先加载 XML。
- 加载 XML 时，将数据提取到常规 javascript 数组中，以使其更易于处理。
- 使用 setTimeout 以指定的时间间隔（http://www.w3schools.com/js/js_timing.asp）调用 draw-function并设置（全局）变量以记住哪个索引是最后显示的索引。
- draw 函数显示数据，并增加变量。如果 == 长度，则重置计数。
