当前位置: 代码迷 >> JavaScript >> JS循环读取XML解决方案
  详细解决方案

JS循环读取XML解决方案

热度:149   发布时间:2012-11-06 14:07:00.0
JS循环读取XML
XML code
<pitems>
  <plist>
    <shopinfo id="1"  lat="40.81" lng="111.6" cityname="呼和浩特市1" />
    <shopinfo id="2"  lat="40.81" lng="111.6" cityname="呼和浩特市2" />
  </plist>
</pitems>


------解决方案--------------------
HTML code

<html>
<head>
<script language="javascript" type="text/javascript"> 

function parseXML(){
 XmlDoc=new ActiveXObject("Microsoft.XmlDOM"); //初始化,给上述定义变量赋值 
 xml="x.xml";//需要读取的xml文件 
 XmlDoc.async = false;
 XmlDoc.load(xml);
getvalue();
}
       
function getvalue() {
  var ListDesc="";
  nodes=XmlDoc.documentElement.childNodes; 
  for(i=0;i<nodes.length;i++){ 


    window.document.getElementById('date').innerHTML=nodes.item(i).childNodes.item(0).text+"&nbsp;&nbsp;"+
    window.document.getElementById('date').innerHTML;
    window.document.getElementById('city').innerHTML=nodes.item(i).childNodes.item(1).text+"&nbsp;&nbsp;"+
    window.document.getElementById('city').innerHTML;
    window.document.getElementById('url').innerHTML=nodes.item(i).childNodes.item(2).text+"&nbsp;&nbsp;"+
    window.document.getElementById('url').innerHTML;

    ListDesc=nodes.item(i).childNodes(0).text+"&nbsp;"+nodes.item(i).childNodes(1).text+"&nbsp;&nbsp;"
    +nodes.item(i).childNodes(2).text+"<br><hr/>"
    +ListDesc;

    }

   list.innerHTML=ListDesc; 

} 

</script> 
</head>

<body onload="parseXML()">
DATE=<span id="date" ></span><br/><hr/>
CITY=<span id="city" ></span><br/><hr/>
URL=<span id="url" ></span><br/><hr/>

<div id="list">loading....</div>
</body>
</html>



x.xml

<?xml version="1.0" encoding="gb2312" ?> 
<root> 
<citymessage> 
<date>2010年1月1日</date> 
<city>北京</city> 
<url>http://www.baidu.com/</url> 
</citymessage> 
<citymessage> 
<date>2010年2月2日</date> 
<city>香港</city> 
<url>http://www.2345.com/</url> 
</citymessage>
<citymessage> 
<date>2010年3月3日</date> 
<city>湖北</city> 
<url>http://www.163.com/</url> 
</citymessage>
<citymessage> 
<date>2010年4月4日</date> 
<city>澳门</city> 
<url>http://www.qq.com/</url> 
</citymessage>
</root>

------解决方案--------------------
参见:JavaScript/jQuery加载xml文档
  相关解决方案