Ajax学习日记(二)
与服务器通信：发送请求与处理响应
1、处理服务器响应
XMLHttpRequest对象提供了两个用来访问服务器响应的属性，第一个属性为responseText，将响应提供为一个串，
第二个属性为responseXML，将响应提供为一个XML对象。
2、使用innerHTML属性创建动态内容
如果将服务器响应作为简单的文本来响应，则灵活性欠佳。简单文本没有结构，很难用JavaScript进行逻辑性表
述，而且要想动态地生成页面也很困难。
如果结合使用HTML元素的innerHTML属性,responseText属性就会变得非常有用。innerHTML属性是一个非标准的
属性，最早在IE中实现，后来也为其他许多流行的浏览器所采用。这是一个简单的串，表示一组开始标记和结束标
记之间的内容。
通过结合使用responseText和innerHTML，服务器就能“生产”或生成HTML内容，由浏览器使用innerHTML属性来
“消费”或处理。
下面的例子展示了一个搜索功能，具体的步骤如下：
A：点击search按钮，调用startRequest函数，它先调用createXMLHttpRequest函数来初始化XMLHttpRequest对
象的一个实例；
B：startRequest函数将回调函数设置为handleStateChange函数；
C：startRequest函数使用open()方法来设置请求方法（GET）及请求目标，并且设置为异步地完成请求；
D：使用XMLHTtpRequest对象的send()方法发送请求；
E：XMLHttpRequest对象的内部状态每次都有变化时，都会调用handleStateChange函数。一旦接收到响应（如果
readyState属性的值为4），div元素的innerHTML属性就将使用XMLHttpRequest对象的responseTex置。
代码 innerHTML.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Using responseText with innerHTML</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XNLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET","innerHTML.xml",true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.getElementById("results").innerHTML=xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Search for Today's Activities" onclick="startRequest();" />
</form>
<div id="results"></div>
</body>
</html>
代码innerHTML.xml
<table border="1">
<tbody>
<tr>
<th>Activity Name</th>
<th>Location</th>
<th>Time</th>
</tr>
<tr>
<td>Waterskiing</td>
<td>Dock #1</td>
<td>9:00 AM</td>
</tr>
<tr>
<td>Volleyball</td>
<td>East Court</td>
<td>2:00</td>
</tr>
<tr>
<td>Hiking</td>
<td>Trail 3</td>
<td>3:30 PM</td>
</tr>
</tbody>
</table>
3、将响应解析为XML
你已经了解到，当服务器不一定按XML格式发送响应。只要Content-Type响应首部正确设置为text/plain(如果是XML
，Context-Type响应首部则是text/xml)，将响应作为简单文本发送是完全可以的。复杂的数据结构就很适合以XML
格式发送。对应导航XML文档及修改XML文档的结构的内容，当前浏览器已经提供了很好的支持。
浏览器到底怎么处理服务器返回XML呢？当前浏览器把XML看作是遵循W3C DOM 的文档。W3C DOM指定了一组很丰富的
API，可用于搜索和处理XML文档。DOM兼容的浏览器必须实现这些API，而且不允许有自定义的行为，这样就尽可能
地改善脚本在不同的浏览器的可移植性。
W3C DOM：文档对象模型（DOM）是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构
和样式。文档可进一步处理，处理的结果可以放回到所提供的页面中。
不仅如此，W3C还解释了为什么要定义标准的DOM。W3C从其成员处收到了大量请求。这些请求都是关于将XML和HTML
文档的对象模型提供给脚本所要采用的方法。提案并没有提出新的标记或样式表技术，而只是力图确保这些可互操
作而且与脚本语言无关的解决方案能得到共识，并为开发社区所采纳。简单的说，W3C DOM标准的目的是尽量避免20
世纪90年代末的脚本恶梦，那时相互竞争的浏览器都有自己专用的对象模型，而且通常都是不兼容的，这就使得实
现跨平台的脚本极其困难。
W3C DOM和JavaScript
W3C DOM和JavaScript很容易混淆。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。
DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不可并不严格要求这样。可以使用任何脚本语言来访问DOM，这就要归功于其一致的API。
| 属性名 |
描述 |
| childNodes |
返回当前元素所有子元素的数组 |
| firstChild |
返回当前元素的第一个下级子元素 |
| lastChild |
返回当前元素的最后一个子元素 |
| nextSibling |
返回紧跟在当前元素后面的元素 |
| nodeValue |
指定表示元素值的读/写属性 |
| parentNode |
返回元素的父节点 |
| previousSibling |
返回紧邻当前元素之前的元素 |
用于处理XML文档的DOM元素属性
| 方法名 |
描述 |
| getElementById(id)(document) |
获取有指定唯一ID属性值文档中的元素 |
| getElementsByTagName(name) |
返回当前元素中有指定标记名的子元素的数组 |
| hasChildNodes() |
返回一个布尔值，指示元素是否有子元素 |
| getAttribute(name) |
返回元素的属性值，属性由name指定 |
用于遍历XML文档的DOM元素方法
有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能的灵活性，将XML作为浏览器和服务器之
间的通信介质。
代码显示了服务器向浏览器返回的XML文档内容。
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" onclick="startRequest('all');"/>
<br/><br/>
<input type="button" value="View All Listed Northern States" onclick="startRequest('north');"/>
</form>
</body>
</html>
parseXML.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>
以上脚本从服务器获取XML文档并加以处理