在javascript中操作(访问)xml文件
今天，在上xml课的时候，吴旻昊在做项目中，需要在网页中直接操作xml文件，我给大家举一个小案例，希望对各位有帮助:
首先建立一个student.xml文档如下 ,该文档描述了一些学生信息
<?xml version="1.0" encoding="utf-8"?>
<StuList>
<stu id="00恭">
<stuName>张三</stuName>
<stuSex>男</stuSex>
<stuAge>20</stuAge>
<stuGrade>90</stuGrade>
</stu>
<stu id="00喜">
<stuName>李四</stuName>
<stuSex>女</stuSex>
<stuAge>18</stuAge>
<stuGrade>99</stuGrade>
</stu>
<stu id="00发">
<stuName>王五</stuName>
<stuSex>男</stuSex>
<stuAge>22</stuAge>
<stuGrade>50</stuGrade>
</stu>
<stu id="00财">
<stuName>刘六</stuName>
<stuSex>女</stuSex>
<stuAge>17</stuAge>
<stuGrade>80</stuGrade>
</stu>
</StuList>
我要达到的效果是通过点击下一个学生按钮，和上一个学生，可以显示不同的学生
现在，我写一个testXml.html文件，去访问student.xml文件,testXml.html文件如下:
<html>
<head>
<script language="JavaScript">
<!--
var i = -1;
//创建一个active对象
var StuDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
//加载xml文件
StuDoc.load("student.xml");
//选中节点
var items = StuDoc.selectNodes("/StuList/stu");
function getNode(doc, xpath) {
var retval = "";
var value = doc.selectSingleNode(xpath);
if (value) retval = value.text;
return retval;
}
//得到下一个学生
function getNextStu() {
i++;
if (i > items.length - 1) i = 0;
document.forms.name.value = getNode(StuDoc, "/StuList/stu[" + i + "]/stuName");
document.forms.sex.value = getNode(StuDoc,"/StuList/stu[" + i + "]/stuSex");
document.forms.age.value = getNode(StuDoc, "/StuList/stu[" + i + "]/stuAge");
document.forms.grade.value = getNode(StuDoc,"/StuList/stu["+ i + "]/stuGrade");
}
//得到前一个学生
function getPreStu() {
i--;
if (i < 0) i = items.length - 1;
document.forms.name.value = getNode(StuDoc, "/StuList/stu[" + i + "]/stuName");
document.forms.sex.value = getNode(StuDoc,"/StuList/stu[" + i + "]/stuSex");
document.forms.age.value = getNode(StuDoc, "/StuList/stu[" + i + "]/stuAge");
document.forms.grade.value = getNode(StuDoc,"/StuList/stu["+ i + "]/stuGrade");
}
// -->
</script>
</head>
<body >
<h2>访问学生信息</h2>
<form>
<table border="1">
<tr><td>姓名</td><td><input type="text" name="name"></td></tr>
<tr><td>性别</td><td><input type="text" name="sex"></td></tr>
<tr><td>年龄</td><td><input type="text" name="age"></td></tr>
<tr><td>成绩</td><td><input type="text" name="grade"></td></tr>
</table>
<input type="button" value="上一个学生" >
<input type="button" value="下一个学生 " >
</form>
</body>
</html>
如何使用案例: 非常简单，
1：只要将 土色部分 保存为一个student.xml文件，注意文件名不要修改,
如果要修改，则需要在testXml.html文件 //加载xml文件 StuDoc.load("student.xml"); 作对应的修改
2：将绿色部分 保存为testXml.html文件(该文件名可以随意)
3：将student.xml和testXml.html文件放入到同一文件夹下就可以使用了,用ie打开testXml.html就会看到
图一：
图二：
页:
[1]