ajax基础读书笔记第三章（发送请求与处理响应）

来源：互联网发布：.商标域名编辑：程序博客网时间：2024/05/17 23:10

通过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"?>

<north>

<state>Minnesota</state>

<state>North Dakota</state>

</north>

<south>

<state>Texas</state>

<state>Oklahoma</state>

<state>Louisiana</state>

</south>

<east>

<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">

<head>

<title>Parsing XML Responses with the W3C DOM</title>

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/>

<input type="button" value="View All Listed States"

onclick="startRequest('all');"/>

<br/>

<input type="button" value="View All Listed Northern States"

onclick="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方法在警告框中显示这些州名。

ajax基础读书笔记 第三章（发送请求与处理响应）

ajax基础读书笔记第三章（发送请求与处理响应）