首先是定义一个XML文件,文件名为student.xml,代码如下：
<?xml version="1.0" encoding="utf-8" ?>
<classmates>
<student>
<sid>05205020227</sid>
<sname>YJ</sname>
<sex>女</sex>
</student>
<student>
<sid>05205020228</sid>
<sname>YKF</sname>
<sex>男</sex>
</student>
<student>
<sid>05205020229</sid>
<sname>ZDW</sname>
<sex>男</sex>
</student>
<student>
<sid>05205020230</sid>
<sname>ZGJ</sname>
<sex>男</sex>
</student>
</classmates>
接下来就是一个网页文件,嵌入javascript脚本代码，如下：
<!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>
<title>Dom解析HTML</title>
<script language="javascript" type="text/javascript">
var XMLHttpReq;
var url = "student.xml";
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
XMLHttpReq = new XMLHttpRequest(); //Mozilla浏览器
}
else if(window.ActiveXObject)
{
try
{
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
}
}
}
}
//发送请求的函数
function sendRequest()
{
createXMLHttpRequest();
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.open("GET",url,true);
XMLHttpReq.send(null);
}
//处理响应的函数
function processResponse()
{
if(XMLHttpReq.readyState==4)//判断对象状态
{
if(XMLHttpReq.status==200)//信息已经成功返回，开始处理信息
{
readXml();
}
else
{
//页面不正常
window.alert(XMLHttpReq.statusText);
window.alert("请求的页面有异常");
}
}
}
//读取XML文档中的数据信息的函数，既是解析函数
function readXml()
{
var table = document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("width","600");
document.body.appendChild(table);
var caption = "学生信息"+url;
table.createCaption().appendChild(document.createTextNode(caption));
var header = table.createTHead();
var headerrow = header.insertRow(0);
headerrow.insertCell(0).appendChild(document.createTextNode("学号"));
headerrow.insertCell(1).appendChild(document.createTextNode("姓名"));
headerrow.insertCell(2).appendChild(document.createTextNode("性别"));
var students = XMLHttpReq.responseXML.getElementsByTagName("student");
for(var i=0;i<students.length;i++)
{
var stud = students[i];
var sid = stud.getElementsByTagName("sid")[0].firstChild.data;
var sname = stud.getElementsByTagName("sname")[0].firstChild.data;
var sex = stud.getElementsByTagName("sex")[0].firstChild.data;
var row = table.insertRow(i+1);
row.insertCell(0).appendChild(document.createTextNode(sid));
row.insertCell(1).appendChild(document.createTextNode(sname));
row.insertCell(2).appendChild(document.createTextNode(sex));
}
}
</script>
</head>
<body>
<form >
<input type="button" value="解析XML文件" onclick="sendRequest();"/>
</form>
</body>
</html>
