最近评论
正在载入评论列表...
案例4-2 解析XML文档
在Eclipse中新建一个项目，项目的名称为“P42_XMLDOM”。首先，新建一个HTML文档，页面名称为“readXML.jsp”。 该页面实现的效果如图4-4所示。用户单击“测试”按钮，页面中显示从对应XML文档中解析获得的数据信息。
图4-4 在JavaScirpt脚本中解析XML文档的效果
在该例中实现的是从XML文档中读取指定位置的数据信息，然后在HTML页面中进行显示，本例中所使用的XML文档的源代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<classmates>
<student >
<sid>1</sid>
<sname>张桂元</sname>
<gre>1700</gre>
<tse>120</tse>
</student>
<student >
<sid>1</sid>
<sname>贾燕枫</sname>
<gre>1800</gre>
<tse>120</tse>
</student>
<student >
<sid>1</sid>
<sname>张宇翔</sname>
<gre>1800</gre>
<tse>120</tse>
</student>
</classmates>
对该XML文档进行解析的HTML页面的源代码如下所示。在该页面中当用户单击“测试”按钮后，将调用“sendRequest()”函数。在该函数中将直接开始读取MyXml.xml文档中的信息。
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="images/css.css" type=text/css rel=stylesheet>
</head>
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
// 发送请求的函数
function sendRequest() {
var url = "MyXml.xml";
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("您所请求的页面有异常。");
}
}
}
// 读取XML文档中数据信息的函数，即解析函数
function readXml() {
var students = XMLHttpReq.responseXML.getElementsByTagName("student");
for(var i=0;i<students.length;i++) {
var stud = students[i];
var name = stud.getElementsByTagName("sname")[0].firstChild.data;
var gre = stud.getElementsByTagName("gre")[0].firstChild.data;
var tse = stud.getElementsByTagName("tse")[0].firstChild.data;
document.write(name + "<p>");
document.write(gre + "<p>");
document.write(tse);
document.write("");
}
}
</script>
<table>
<input type="button" value="测试" onclick="sendRequest();"/>
</table>
需要注意的是：在Ajax提交请求时，如果URL地址为文件名称，将开始直接操作对应的XML文档。在进行解析时，首先按照标记名称获取对应的结点数组，然后依据每一个数组元素继续获取子结点的相关信息，层层定位、层层解析。
图书导读
