XML---JS基本操作

SavageGarden

浏览: 216752 次
性别:
来自: 北京

最近访客更多访客>>

冷月宫主

zdtjkl

yy66yy

你好LL

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

XML Microsoft

最近用XML比较多，写点基本操作的总结，积累下
JS读取XML文件内容
很简单的一个页面，点击按钮时读取XML内容显示在DIV中

<html>
	<head>
		<title>解析XML</title>
	</head>
	<body>
		<div align="center">
			<input type="button" onclick="javascript:showListByXML()" value="解析XML" />
		</div>
		<div id="div1" align="center" style="position:absolute; border-width:1; border-style:outset;
							padding:1; width:262; height:25; left: 500; top: 150; visibility: hidden; background-color:#FFFFFF"></div>
	</body>
</html>

JS代码

<script LANGUAGE="JavaScript">
     /**
	*学生类实体
	*/
	function student(){
		var num="";
		var name="";
		var age="";
		var sex="";	
	}
	/**
	*加载XML文件
	*/
	var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	xmlDoc.async = false;
	xmlDoc.load("xmlForYaWu.xml");
	
	/**
	*得到根节点
	*/
	var root = xmlDoc.getElementsByTagName("Students")[0];
	
	/**
	*得到所有子节点
	*/
	var Students = xmlDoc.getElementsByTagName("Students")[0].getElementsByTagName("Student");
	
	/**
	*赋值为一个子节点
	*/
	
	var xmlStudent;
	
	/**
	*赋值为一个学生类实体
	*/
	
	var jsStudent;
	
	/**
	*存储学生类实体的数组
	*/
	var StudentList = new Array(Students.length);
	
	/**
	*将XML中的节点、属性转化为JS学生类实体的属性，并存储到数组中
	*/
	for(var i = 0; i < Students.length; i++){
		xmlStudent = Students[i];
		jsStudent = new student();
		
		jsStudent.num = xmlStudent.getAttribute("num");
		jsStudent.name = xmlStudent.getAttribute("name");
		jsStudent.age = xmlStudent.getAttribute("age");
		jsStudent.sex = xmlStudent.getAttribute("sex");
		
		StudentList[i] = jsStudent;
	}
	
	/**
	*控制显示的DIV
	*/
	var div = document.getElementById("div1");
	
	/**
	*显示DIV
	*/
	function showDIV(){
		div.style.visibility = "visible";
	}
	
	/**
	*隐藏DIV
	*/
	function closeDIV(){
		div.style.visibility = "hidden";
	}
	
	/**
	*从存储着学生类实体的数组中遍历，写到table中格式化输出
	*/
	function showListByXML(){
		var table = "<table border=0 width='100%' bgcolor='#ddffFF' style='{border-color: #3388cc; border-style: solid; border-width: 1px;}'>"
			+"<tr align='center'>"
			+"<td>编号</td><td>姓名</td><td>年龄</td><td>性别</td><td>操作</td>"
			+"</tr>";
		for(var i = 0; i < StudentList.length; i++){
			jsStudent = StudentList[i];
			if(jsStudent!=null){
				table += "<tr align='center'><td>"+jsStudent.num+"</td><td>"+jsStudent.name+"</td><td>"+jsStudent.age+"</td><td>"+jsStudent.sex+"</td><td><a href=javascript:editEntity("+jsStudent.num+")>编辑</a>&nbsp&nbsp<a href=javascript:deleEntity("+jsStudent.num+")>删除</a></td></tr>";
			}
		}
		table += "<tr><td colspan=5><a href=javascript:addEntity()>添加</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href=javascript:closeDIV()>关闭</a></td></tr></table>";
		
		div.innerHTML = table;
		showDIV();
	}
	
	/**
	*根据学生编号得到要编辑的学生，
	*如果编号没有在数组中遍历出的学生实体中找到，
	*就创建一个新的学生实体
	*/
	function editEntity(num){
		closeDIV();
		var table = "<table border=0 width='100%' bgcolor='#ddffFF' style='{border-color: #3388cc; border-style: solid; border-width: 1px;}'>";
		for(var i = 0; i < StudentList.length; i++){
			jsStudent = StudentList[i];
			if(jsStudent!=null&&jsStudent.num==num){
					break;
			}else if(i==StudentList.length-1){
				jsStudent = new student();
				jsStudent.num = num;
				jsStudent.name = "";
				jsStudent.age = "";
				jsStudent.sex = "";
			}
		}
		table += "<tr align='center'><td>姓名</td><td><input type='text' id='"+jsStudent.num+"name' value="+jsStudent.name+"></td></tr>";
		table += "<tr align='center'><td>年龄</td><td><input type='text' id='"+jsStudent.num+"age' value="+jsStudent.age+"></td></tr>";
		table += "<tr align='center'><td>性别</td><td><input type='text' id='"+jsStudent.num+"sex' value="+jsStudent.sex+"></td></tr>";
		table += "<tr align='center'><td colspan=2><input type=button onclick=saveEntity("+num+") value='保存'/></td></tr></table>"
		div.innerHTML = table;
		showDIV();
	}
	
	/**
	*保存学生实体，转化为Elemental，保存到XML文件
	*/
	function saveEntity(num){
		var isNew = false;
		for(var i = 0; i < Students.length; i++){
			xmlStudent = Students[i];
			if(xmlStudent.getAttribute("num")==num){
				break;
			}else if(i==Students.length){
				xmlStudent = xmlDoc.CreateElement("Student");
				isNew = true;
			}
		}
		xmlStudent.setAttribute("num",num);
		xmlStudent.setAttribute("name",document.getElementById(num+"name").value);
		xmlStudent.setAttribute("age",document.getElementById(num+"age").value);
		xmlStudent.setAttribute("sex",document.getElementById(num+"sex").value);
		
		if(isNew){
			root.AppendChild(xmlStudent);
		} 
                //客户端保存有问题，先注掉
		//xmlDoc.save("xmlForYaWu.xml");
	}
	
	/**
	*添加一个学生实体，则将编号加1，然后调用编辑的方法
	*/
	function addEntity(){
		editEntity((Students.length+1));
	}
	
	/**
	*删除指定NUM的节点
	*/
	function deleEntity(num){
		xmlStudent = null;
		for(var i = 0; i < Students.length; i++){
			xmlStudent = Students[i];
			if(xmlStudent.getAttribute("num")==num){
				break;
			}
		}
		//删除、保存有问题，先注掉
		//xmlStudent.removeAll();
		//xmlDoc.save("xmlForYaWu.xml");
	}
</script>

XML文件

<?xml version="1.0" encoding="GB2312"?>
<Students>
		<Student num="1" name="张三" age="22" sex="男"/>
		<Student num="2" name="李四" age="23" sex="男"/>
		<Student num="3" name="王五" age="24" sex="男"/>
</Students>

分享到：