上一篇文中说到请求返回的消息，可以是字符串也可以是对象，返回的字符串我们可以使用弹出框的形式将所有内容显示出来，但是还没有加工处理。下面将详细说明如何取出对象中有效信息。
DOM文档对象模型，在JavaScript的学习中，我们只知道它是三个组成部分之一，规定文档结构，还有处理网页内容的接口和API，那时候学习的是了解功能，现在的学习是它如何实现处理内容的。
一：DOM再认识
DOM提供了文档结构化的表示，我们可以简单理解成xml文档中每个结点的元素都是DOM的一部分。而JavaScript是访问和处理DOM的语言，这就意味着，文档中元素可以结合DOM和JavaScript访问啦。
1）用于遍历XML的DOM元素方法
- getElementById(id) 根据id获取文档中的元素
- getElementsByTagName(name) 根据标记名返回子元素的数组
- hasChildNodes() 判断是否有子元素
- getAttribute(name) 获取元素的属性值
2）实例说明
<?xml version="1.0" encoding="utf-8" ?>
<school>
<grade>
lishuangzhe1111
</grade>
</school>
var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象
var resultNode = xmlDoc.getElementsByTagName("grade");
var currentNode = null;
for (var i = 0; i < resultNode.length; i++) {
currentNode = states[i];
out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
}
alert(out);
如果xml文档中再套一层，那我们也就再添加一层去取。如下：
<?xml version="1.0" encoding="utf-8" ?>
<school>
<grade1>
<name>li</name>
<name>li</name>
<name>li</name>
</grade1>
</school>
@H_404_82@var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象
var resultNode = xmlDoc.getElementsByTagName("grade1")[0]; //将返回的对象中 标记为grade1的放在一个数组中
var retultNodes = resultNode.getElementsByTagName("name"); //获取对象中所有标记为state的元素
var currentNode = null;
for (var i = 0; i < resultNodes.length; i++) {
currentNode = states[i];
out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
}
alert(out);
二：请求处理详解
就是将接受到的返回信息，根据需求挑出自己想要的内容。
如下：
<script type="text/javascript">
var xmlhttp;
var requestType = "";
//创建XMLHttpRequest对象
....
//设置开始请求
function startRequest(requestedList) {
requestType = requestedList;
createXMLHttpRequest();
//设置回掉函数
xmlhttp.onreadystatechange = handleStateChange;
xmlhttp.open("GET","XMLFile1.xml",true);
xmlhttp.send(null);
}
function handleStateChange() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
if (requestType == "beijing") {//如果选择"beijing"将执行listbeijing()
listbeijing();
} else if (requestType == "...") {
....
}
}
}
}
function listbeijing() {
var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象
var resultNode = xmlDoc.getElementsByTagName("beijing")[0]; //将返回的对象中 标记为north的放在一个数组中
var out = "beijing:";
var resultNodes = resultNode.getElementsByTagName("name"); //获取对象中所有标记为state的元素
outputList("beijing:",resultNodes);
}
//迭代处理数组中的所有元素，
function outputList(title,states) {
var out = title;
var currentNode = null;
for (var i = 0; i < states.length; i++) {
currentNode = states[i];
out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
}
alert(out);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" name="name" value=" clickme" onclick="startRequest('beijing')" />
</form>
</body>
xml文件内容：
<?xml version="1.0" encoding="utf-8" ?>
<school>
<beijing>
<name>li1</name>
<name>li2</name>
</beijing>
<langfang>
<name>shuang1</name>
<name>shuang2</name>
</langfang>
</school>
如上所述就是对通过异步传输过来的xml document对象的处理过程。这样整个Ajax异步处理过程就完成啦。
