网页前端设计

http://www.86y.org

搜索文章

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

用声音读出全文关注我吧
 2011/5/9 20:43:56 阅读次数:16568

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

<!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.86y.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有可能为空所以添加了一个判断节点是否为空!

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

大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=137【JS读取XML并显示各节点[兼容IE/FF/Chrome,Safari]】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭