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

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

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

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

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

<!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代码

//判断子节点为不为空 ??
function?isnull(obj) ??
{ ??
????var?nodevalue?=?""; ??
????if(obj.childNodes[0]?!=?null) ??
????{ ??
????????nodevalue?=obj.childNodes[0].nodeValue; ??
????} ??
????return?nodevalue; ??
}??