读取XML内容并使用JavaScript放入HTML页面

时间:2011-07-04 08:53:38

标签: javascript html xml

我需要读取包含信息的XML文件,但一次只能读取一个HTML文件并显示在HTML页面中。它需要在<div>内的HTML内以<p>的形式显示为自己滚动。有人可以帮我解决这个问题吗?

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的:

<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>

1 个答案:

答案 0 :(得分:1)

虽然我会将实际编码留给您,但我会用于这样的一般结构是:

  • 首先加载XML。
  • 加载XML时,将数据提取到常规的javascript数组中,以便于处理。
  • 使用setTimeout以指定的间隔(http://www.w3schools.com/js/js_timing.asp)调用draw-function并设置一个(全局)变量以记住哪个索引是最后一个显示的索引。
  • 绘图功能显示数据,并递增变量。如果==长度,重置计数。