通过XMLHttpRequest.responseXML;
将响应解析为XML
获得对象有下面的属性和方法
表3-1 用于处理XML文档的DOM元素属性
属性名
描述
childNodes
返回当前元素所有子元素的数组
firstChild
返回当前元素的第一个下级子元素
lastChild
返回当前元素的最后一个子元素
nextSibling
返回紧跟在当前元素后面的元素
nodeValue
指定表示元素值的读/写属性
parentNode
返回元素的父节点
previousSibling
返回紧邻当前元素之前的元素
表3-2 用于遍历XML文档的DOM元素方法
方法名
描述
getElementById(id) (document)
获取有指定惟一ID属性值文档中的元素
getElementsByTagName(name)
返回当前元素中有指定标记名的子元素的数组
hasChildNodes()
返回一个布尔值,指示元素是否有子元素
getAttribute(name)
返回元素的属性值,属性由name指定
下面看一个实例
面的例子可以看到,使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表,各个州按地区划分。
代码清单3-3 服务器返回的美国州名列表
这里是个xml
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
在浏览器上会生成具有两个按钮的HTML页面。点击第一个按钮,将从服务器加载XML文档,然后在警告框中显示列于文档中的所有州。点击第二个按钮也会从服务器加载XML文档,不过只在警告框中显示北部地区的各个州(见图3-2)。
图3-2 点击页面上的任何一个按钮都会从服务器加载XML文档,并在警告框中显示适当的结果
代码清单3-4显示了parseXML.html。
代码清单3-4 parseXML.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parsing XML Responses with the W3C DOM</title>
<script type="text/javascript">
var xmlHttp;
var requestType = "";
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(requestedList)
{
requestType = requestedList;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "parseXML.xml", true);
xmlHttp.send(null);
}
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
if(requestType == "north")
{
listNorthStates();
}
else if(requestType == "all")
{
listAllStates();
}
}
}
}
function listNorthStates() {
var xmlDoc = xmlHttp.responseXML;
var northNode = xmlDoc.getElementsByTagName("north")[0];
var out = "Northern States";
var northStates = northNode.getElementsByTagName("state");
outputList("Northern States", northStates);
}
function listAllStates() {
var xmlDoc = xmlHttp.responseXML;
var allStates = xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
function outputList(title, states) {
var out = title;
var currentState = null;
for(var i = 0; i < states.length; i++) {
currentState = states[i];
out = out + "/n- " + currentState.childNodes[0].nodeValue;
}
alert(out);
}
</script>
</head>
<body>
<h1>Process XML Document of U.S. States</h1>
<br/>
<br/>
<form action="#">
<input type="button" value="View All Listed States"
οnclick="startRequest('all');"/>
<br/>
<br/>
<input type="button" value="View All Listed Northern States"
οnclick="startRequest('north');"/>
</form>
</body>
</html>
解析:
listNorthStates和listAllStates函数则不同,它们使用了XMLHttpRequest对象的responseXML属性,将结果获取为XML文档,这样一来,你就可以使用W3C DOM方法来遍历XML文档了。
仔细研究一下listAllStates函数。它首先创建了一个局部变量,名为xmlDoc,并将这个变量初始化设置为服务器返回的XML文档,这个XML文档是使用XMLHttpRequest对象的responseXML属性得到的。利用XML文档的getElementsByTagName方法可以获取文档中所有标记名为state的元素。getElementsByTagName方法返回了包含所有state元素的数组,这个数组将赋给名为allStates的局部变量。
listNorthStates函数与listAllStates是类似的,只不过增加了一个小技巧。你只想得到北部地区的州,而不是所有州。为此,首先使用getElementsByTagName方法获取north标记,从而获得XML文档中的north元素。因为文档只包含一个north元素,而且getElementsByTagName方法总是返回一个数组,所以要用[0]记法来抽出north元素。这是因为,在getElementsByTagName方法返回的数组中,north元素处在第一个位置上(也是惟一的位置)。既然有了north元素,接下来调用north元素的getElementsByTagName方法,就可以得到north元素的state子元素。有了north元素所有state子元素的数组后,再使用outputList方法在警告框中显示这些州名。