您的位置: 首页  >  IT文章  >  JS读取XML并展示各节点[兼容IE/FF/Chrome,Safari]

JS读取XML并展示各节点[兼容IE/FF/Chrome,Safari]

分类: IT文章 • 2023-12-14 10:05:06
JS读取XML并显示各节点[兼容IE/FF/Chrome,Safari]

今天同事有需要JS显示XML!
后来就做了一个效果!或许以后能用的着呢! ^_^
JS读取并输出xml文件节点及属性（兼容IE，FF） !
好东东发出来分享一下了!

转自：http://www.ok22.org/art_detail.aspx?id=137（可直接运行）
代码如下： 

Html代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>JS读取XML兼容IE/FF/Chrome,Safari</title>  
  6. <style>  
  7. li{list-style:none;}   
  8. </style>  
  9. <script type="text/javascript">  
  10. //==============================================================   
  11. var orderDoc;   
  12. //获取xml文件   
  13. function loadXmlFile(xmlFile){   
  14.   var xmlDom = null;   
  15.   if (window.ActiveXObject){   
  16.     xmlDom = new ActiveXObject("Microsoft.XMLDOM");   
  17.     xmlDom.async=false;   
  18.    xmlDom.load(xmlFile)||xmlDom.loadXML(xmlFile);//如果用的是XML字符串//如果用的是xml文件   
  19.   }else if (document.implementation && document.implementation.createDocument){   
  20.     var xmlhttp = new window.XMLHttpRequest();   
  21.     xmlhttp.open("GET", xmlFile, false);   
  22.     xmlhttp.send(null);   
  23.     xmlDom = xmlhttp.responseXML;   
  24.   }else{   
  25.     xmlDom = null;   
  26.   }   
  27.   return xmlDom;   
  28. }   
  29. //判断子节点为不为空   
  30. function isnull(obj)   
  31. {   
  32.     var nodevalue = "";   
  33.     if(obj.childNodes[0] != null)   
  34.     {   
  35.         nodevalue =obj.childNodes[0].nodeValue;   
  36.     }   
  37.     return nodevalue;   
  38. }   
  39. var stringsss="";   
  40. //根据编号获取数据   
  41. function getDataByid(number)   
  42. {   
  43.     var time =isnull(orderDoc.getElementsByTagName("time")[number]);   
  44.     var place =isnull(orderDoc.getElementsByTagName("place")[number]);   
  45.     var reason =isnull(orderDoc.getElementsByTagName("reason")[number]);   
  46.     var unit = isnull(orderDoc.getElementsByTagName("unit")[number]);   
  47.     var money =isnull(orderDoc.getElementsByTagName("money")[number]);   
  48.     var status =isnull(orderDoc.getElementsByTagName("status")[number]);   
  49.     var docNum =isnull(orderDoc.getElementsByTagName("docNum")[number]);   
  50.     var score =isnull(orderDoc.getElementsByTagName("score")[number]);   
  51.     var std='<li><b>网址:'+(time)+'<br />站名称:'+(place)+'<br />描述:'+(reason)+'</b></li>';   
  52.     return std;   
  53. }   
  54.   
  55. //获得页面内容   
  56. function getContent(){   
  57.     //exBrows();   
  58.     orderDoc=loadXmlFile("http://www.ok22.org/download/ex2.xml");   
  59.         var items=orderDoc.getElementsByTagName("results").length;   
  60.         //alert(orderDoc.getElementsByTagName("Item").length);   
  61.         var htmlstr="";   
  62.         stringsss+='<ul>';   
  63.         for(i=0;i<items;i++){   
  64.             stringsss+=getDataByid(i);   
  65.         }   
  66.         stringsss+='</ul>'   
  67.         document.write(stringsss);   
  68. }   
  69. </script>  
  70.   
  71. </head>  
  72.   
  73. <body>  
  74. </body>  
  75. <script type="text/javascript" language="javascript">  
  76. getContent();   
  77. </script>  
  78. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS读取XML兼容IE/FF/Chrome,Safari</title>
<style>
li{list-style:none;}
</style>
<script type="text/javascript">
//==============================================================
var orderDoc;
//获取xml文件
function loadXmlFile(xmlFile){
  var xmlDom = null;
  if (window.ActiveXObject){
    xmlDom = new ActiveXObject("Microsoft.XMLDOM");
	xmlDom.async=false;
   xmlDom.load(xmlFile)||xmlDom.loadXML(xmlFile);//如果用的是XML字符串//如果用的是xml文件
  }else if (document.implementation && document.implementation.createDocument){
    var xmlhttp = new window.XMLHttpRequest();
    xmlhttp.open("GET", xmlFile, false);
    xmlhttp.send(null);
    xmlDom = xmlhttp.responseXML;
  }else{
    xmlDom = null;
  }
  return xmlDom;
}
//判断子节点为不为空
function isnull(obj)
{
	var nodevalue = "";
	if(obj.childNodes[0] != null)
	{
		nodevalue =obj.childNodes[0].nodeValue;
	}
	return nodevalue;
}
var stringsss="";
//根据编号获取数据
function getDataByid(number)
{
	var time =isnull(orderDoc.getElementsByTagName("time")[number]);
	var place =isnull(orderDoc.getElementsByTagName("place")[number]);
	var reason =isnull(orderDoc.getElementsByTagName("reason")[number]);
	var unit = isnull(orderDoc.getElementsByTagName("unit")[number]);
	var money =isnull(orderDoc.getElementsByTagName("money")[number]);
	var status =isnull(orderDoc.getElementsByTagName("status")[number]);
	var docNum =isnull(orderDoc.getElementsByTagName("docNum")[number]);
	var score =isnull(orderDoc.getElementsByTagName("score")[number]);
	var std='<li><b>网址:'+(time)+'<br />站名称:'+(place)+'<br />描述:'+(reason)+'</b></li>';
	return std;
}

//获得页面内容
function getContent(){
	//exBrows();
	orderDoc=loadXmlFile("http://www.ok22.org/download/ex2.xml");
		var items=orderDoc.getElementsByTagName("results").length;
		//alert(orderDoc.getElementsByTagName("Item").length);
		var htmlstr="";
		stringsss+='<ul>';
		for(i=0;i<items;i++){
			stringsss+=getDataByid(i);
		}
		stringsss+='</ul>'
		document.write(stringsss);
}
</script>

</head>

<body>
</body>
<script type="text/javascript" language="javascript">
getContent();
</script>
</html>

因为XML有可能为空所以添加了一个判断节点是否为空!

Js代码
  1. //判断子节点为不为空   
  2. function isnull(obj)   
  3. {   
  4.     var nodevalue = "";   
  5.     if(obj.childNodes[0] != null)   
  6.     {   
  7.         nodevalue =obj.childNodes[0].nodeValue;   
  8.     }   
  9.     return nodevalue;   
  10. }  

相关推荐