js读取xml

最新推荐文章于 2022-06-13 09:20:27 发布

kehu23628

最新推荐文章于 2022-06-13 09:20:27 发布

阅读量112

点赞数

文章标签： XML 正则表达式 IE Apple 浏览器

最近刚学js，写了个用js操作xml的小程序
大家多拍拍砖，指出可以改进的地方
operxml.html文件


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
	table,tr,td {
		background-position: center;
		border-width: 1px;
		border-style: solid;
		border-collapse: collapse;
		border-color: blue;
		text-align: center;
		font-size: 20px;
	}
	table {
		width: 800px;
		margin-bottom: 20px;
	}
	tr {
		height: 40px;	
	}
	.bordertyle {
		font-family: sans-serif;
		text-align: center;
	}

	.btn {
		margin-left: 30px;
		margin-right: 30px;
	}	
	label {
		font-size: 20px;
		font-family: sans-serif;
	}
</style>

<script language="javascript"> 

//***********js操作XML*************
//* author:luobin *
//* Email:luobin23628@163.com *
//*********************************
/*
	function loadXML(xmlFile){
		var xmlDoc;
		if(!window.ActiveXObject){
			var parser = new DOMParser();
			xmlDoc = parser.parseFromString(xmlFile,"text/xml");
		}else{
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async="false";
			xmlDoc.load(xmlFile);
		}
		return xmlDoc;
	}
*/
	//针对两种浏览器，分别获取xmlDocument对象
	function   loadXML(xmlFile) 
    { 
		var xmlDoc;
			if(window.ActiveXObject) { 
				xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
				xmlDoc.async=false;
				xmlDoc.load(xmlFile);
			}
			else if(document.implementation&&document.implementation.createDocument){ 
				xmlDoc=document.implementation.createDocument( "", "",null); 
				xmlDoc.async=false;
				xmlDoc.load(xmlFile);
			} else{
				alert('Your   browser   cannot   handle   this   script'); 
			}
		return xmlDoc;
	}

	var xmlDoc = loadXML("test.xml");

	var members = xmlDoc.getElementsByTagName("member");
	var maxRes = members.length;

	var pageShow = 5;
	var currentPage = 1;

	var maxPage = Math.ceil(maxRes/pageShow);

	//此方法只能在body标签中或后调用
	function retrieve(){
		var oDiv = document.createElement("div");
		oDiv.id = "showhtml"
		oDiv.className = "bordertyle";
		if(maxRes){
			var oTable = generateTable(oDiv,(currentPage-1)*pageShow,currentPage*pageShow);

			var pageInf = document.createElement("div");

			var oLabel = document.createElement("label");
			oLabel.innerHTML = "共条"+maxRes+"记录,当前第";
			pageInf.appendChild(oLabel);

			var curLabel = document.createElement("label");
			curLabel.innerHTML = currentPage;
			curLabel.setAttribute("id","curLabel");
			pageInf.appendChild(curLabel);

			var oLabel3 = document.createElement("label");
			oLabel3.innerHTML = "页,共"+maxPage+"页";
			pageInf.appendChild(oLabel3);

			oDiv.appendChild(pageInf);

			var buttonSet = document.createElement("div")
			buttonSet.className = "bordertyle";

			var firstBtn = document.createElement("button");
			firstBtn.innerHTML = "首页";
			firstBtn.id = "firstBtn";
			firstBtn.className = "btn";
			firstBtn.onclick = function(){
				goToPage(1,oTable,curLabel);
			};
			buttonSet.appendChild(firstBtn);

			var preBtn = document.createElement("button");
			preBtn.id = "preBtn";
			preBtn.innerHTML = "前一页";
			preBtn.className = "btn";
			preBtn.onclick = function(){
				if(currentPage>1){
					goToPage(currentPage-1,oTable,curLabel);
				}
			};
			buttonSet.appendChild(preBtn);

			var tx = document.createElement("input");
			tx.value = currentPage;
			tx.id = "tx";
			tx.size = "2";
			buttonSet.appendChild(tx);
			var goBtn = document.createElement("button");
			goBtn.innerHTML = "GO";
			goBtn.onclick = function(){
				var txPage = parseInt(tx.value);
				goToPage(txPage,oTable,curLabel);
			}
			buttonSet.appendChild(goBtn);

			var nextBtn = document.createElement("button");
			nextBtn.innerHTML = "下一页";
			nextBtn.id = "nextBtn";
			nextBtn.className = "btn";
			nextBtn.onclick = function(){
				if(currentPage<maxPage){
					goToPage(currentPage+1,oTable,curLabel);
				}
			};
			buttonSet.appendChild(nextBtn);

			var lastBtn = document.createElement("button");
			lastBtn.innerHTML = "末页";
			lastBtn.id = "lastBtn";
			lastBtn.className = "btn";
			lastBtn.onclick = function(){
				goToPage(maxPage,oTable,curLabel);
			};
			buttonSet.appendChild(lastBtn);

			oDiv.appendChild(buttonSet);
		}else{
			oDiv.innerHTML = "无记录";
		}
		document.body.appendChild(oDiv);
		alterButton();//先把oDiv加到body之后才可调用，害我犯了错误
	}

	function generateTable(oDiv,start,end){
		var oTable = document.createElement("table");
		generateTableHead(oTable);
		generateTableContent(oTable,start,end);
		oDiv.appendChild(oTable);
		return oTable;
	}

	function generateTableHead(oTable){
		var oTr = oTable.insertRow(-1);

		var oTd = oTr.insertCell(-1);
		oTd.innerHTML = "name";//ie支持innerText，ff支持textContent 这里就偷懒的写法，改成innerHTML
		/**
			if(oTd.innerText){
				oTd.innerText = "name";
			}else{
				oTd.textContent = "name";
			}
		**/

		var oTd2 = oTr.insertCell(-1);
		oTd2.innerHTML = "loginname";

		var oTd3 = oTr.insertCell(-1);
		oTd3.innerHTML = "email";
	}

	function generateTableContent(oTable,start,end){
		end = (end>maxRes)?maxRes:end;
		for(var i=start;i<end;i++){
			var oTr = oTable.insertRow(-1);//ff中insertRow必须加上参数，而ie默认为-1
			oTr.id = members[i].getAttribute("id");

			var oTd = oTr.insertCell(-1);
			var oName = members[i].getElementsByTagName("name");
			oTd.innerHTML = oName[0].firstChild.nodeValue;//刚开始用的oName[0].text,不兼容ff，现在统一替换成oName[0].firstChild.nodeValue

			var oTd2 = oTr.insertCell(-1);
			var oLoginName = members[i].getElementsByTagName("loginName");
			oTd2.innerHTML = oLoginName[0].firstChild.nodeValue;

			var oTd3 = oTr.insertCell(-1);
			var oEmail = members[i].getElementsByTagName("email");
			oTd3.innerHTML = oEmail[0].firstChild.nodeValue;
		}
	}

	function removeTableContent(oTable){
		if(oTable.rows.length>1){
			for(var i=oTable.rows.length-1;i>=1;i--){
				oTable.deleteRow(i);
			}
		}
	}

	function alterButton(){
		preBtn.disabled = (currentPage<=1)?true:false;
		nextBtn.disabled = (currentPage>=maxPage)?true:false;
		firstBtn.disabled = (currentPage==1)?true:false;
		lastBtn.disabled = (currentPage==maxPage)?true:false;
	}

	function goToPage(page,oTable){
		//此处还要加个正则表达式校验page是数字，js的正则表达式还不会有待进一步学习
		if(page<1){
			window.alert("您输入的页数小于等于0,请输入一个0到"+maxPage+"的整数");
			return;
		}
		if(page>maxPage){
			window.alert("您输入的页数超过了最大页数,请输入一个0到"+maxPage+"的整数");
			return;
		}
		removeTableContent(oTable);
		currentPage = page;
		var start = (currentPage-1)*pageShow;
		var end = currentPage*pageShow;
		tx.value = currentPage;
		curLabel.innerHTML = currentPage;
		generateTableContent(oTable,start,end);
		alterButton();
	}

</script>
<script type="text/javascript">
</script>
</HEAD>
<BODY>
<script type="text/javascript">
	retrieve();
</script>
</BODY>
</HTML>

test.xml


<?xml version="1.0" encoding="GB2312"?>
<rautinee>
<member id='1'> 
<name>海仔</name>
<loginName>rautinee</loginName>
<email>rautinee@btamail.net.cn</email></member>
<member id='2'>
<name>刚强</name>
<loginName>hehe</loginName>
<email>rautinee@chinamanagers.com</email></member>
<member id='3'>
<name>金华刚</name>
<loginName>nature_it</loginName>
<email>rautinee_sea@hotmail.com</email></member>
<member id='4'>
<name>的简强</name>
<loginName>tank</loginName>
<email>tank@163.com</email></member>
<member id='7'>
<name>合资</name>
<loginName>kaka</loginName>
<email>kaka@eyou.com</email></member>
<member id='6'>
<name>加个人</name>
<loginName>apple</loginName>
<email>apple@163.com</email></member>
<member id='8'>
<name>null</name>
<loginName>sunny</loginName>
<email>rautinee@eyou.com</email></member>
<member id='10'>
<name>宝贝</name>
<loginName>index</loginName>
<email>rautinee@21cn.com</email></member>
<member id='12'>
<name>login</name>
<loginName>login</loginName>
<email>webmaster@chinamanagers.com</email></member>
<member id='13'>
<name>jiang</name>
<loginName>123</loginName>
<email>japing@chianmanagers.com</email></member>
<member id='14'>
<name>world</name>
<loginName>world</loginName>
<email>rautinee@21cn.com</email></member>
<member id='15'>
<name>swallow</name>
<loginName>swallow</loginName>
<email>swallow@chinamanagers.com</email></member>
<member id='16'>
<name>魏格</name>
<loginName>hotmail</loginName>
<email>rautinee_sea@hotmail.com</email></member>
<member id='17'>
<name>wrong</name>
<loginName>wrong</loginName>
<email>wrong@chinamanagers.com</email></member>
<member id='18'>
<name>leah</name>
<loginName>leah</loginName>
<email>leah@chinamanagers.com</email></member>
<member id='19'>
<name>ttth</name>
<loginName>ttth</loginName>
<email>rautinee@21cn.com</email></member>
</rautinee>