表2-1 标准XMLHttpRequest操作
|
方 法 |
描 述 |
|
abort() |
停止当前请求 |
|
getAllResponseHeaders() |
把HTTP请求的所有响应首部作为键/值对返回 |
|
getResponseHeader("header") |
返回指定首部的串值 |
|
open("method", "url") |
建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数 |
|
send(content) |
向服务器发送请求 |
|
setRequestHeader("header", "value") |
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
下面来更详细地讨论这些方法。
void open(string method, string url, boolean asynch, string username, string password)：这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数，还有3个可选参数。要提供调用的特定方法（GET、POST或PUT），还要提供所调用资源的URL。另外还可以传递一个Boolean值，指示这个调用是异步的还是同步的。默认值为true，表示请求本质上是异步的。如果这个参数为false，处理就会等待，直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一，所以倘若将这个参数设置为false，从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。不过，前面已经说过，在某些情况下这个参数设置为false也是有用的，比如在持久存储页面之前可以先验证用户的输入。最后两个参数不说自明，允许你指定一个特定的用户名和密码。
void send(content)：这个方法具体向服务器发出请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流，或者串。传入这个方法的内容会作为请求体的一部分发送。
void setRequestHeader(string header, string value)：这个方法为HTTP请求中一个给定的首部设置值。它有两个参数，第一个串表示要设置的首部，第二个串表示要在首部中放置的值。需要说明，这个方法必须在调用open()之后才能调用。
在所有这些方法中，最有可能用到的就是open()和send()。XMLHttpRequest对象还有许多属性，在设计Ajax交互时这些属性非常有用。
void abort()：顾名思义，这个方法就是要停止请求。
string getAllResponseHeaders()：这个方法的核心功能对Web应用开发人员应该很熟悉了，它返回一个串，其中包含HTTP请求的所有响应首部，首部包括Content-
Length、Date和URI。
string getResponseHeader(string header)：这个方法与getAllResponseHeaders()是对应的，不过它有一个参数表示你希望得到的指定首部值，并且把这个值作为串返回。
除了这些标准方法，XMLHttpRequest对象还提供了许多属性，如表2-2所示。处理XMLHttpRequest时可以大量使用这些属性。
表2-2 标准XMLHttpRequest属性
|
属 性 |
描 述 |
|
onreadystatechange |
每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数 |
|
readyState |
请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成 |
|
responseText |
服务器的响应，表示为一个串 |
|
responseXML |
服务器的响应，表示为XML。这个对象可以解析为一个DOM对象 |
|
status |
服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等） |
|
statusText |
HTTP状态码的相应文本（OK或Not Found（未找到）等等） |
不同于标准Web客户中所用的标准请求/响应方法，Ajax应用的做法稍有差别。
1. 一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作，很多这样的事件都可以触发Ajax事件。可以有如下的代码：
<input type="text"d="email" name="email" οnblur="validateEmail()";>
2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用，并设置URL以及所希望的HTTP方法（通常是GET或POST）。请求实际上通过一个send()方法调用触发。可能的代码如下所示：
var xmlHttp;
function validateEmail() {
var email = document.getElementById("email");
var url = "validate?email=" + escape(email.value);
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
3. 向服务器做出请求。可能调用servlet、CGI脚本，或者任何服务器端技术。
4. 服务器可以做你想做的事情，包括访问数据库，甚至访问另一个系统。
5. 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中，响应可能涉及更广，还包括JavaScript、DOM管理以及其他相关的技术。需要说明，你还需要设置另外一些首部，使浏览器不会在本地缓存结果。为此可以使用下面的代码：
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");[1]
6. 在这个示例中，XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性，然后查看服务器返回的状态码。如果一切正常，callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法：
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//do something interesting here
}
}
}
表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指定 |
表3-3 动态创建内容时所用的W3C DOM属性和方法
|
属性/方法 |
描述 |
|
document.createElement(tagName) |
文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素 |
|
document.createTextNode(text) |
文档对象的createTextNode方法会创建一个包含静态文本的节点 |
|
<element>.appendChild(childNode) |
appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一个option元素，作为select元素的子节点 |
|
<element>.getAttribute(name) <element>.setAttribute(name, value) |
这些方法分别获得和设置元素中name属性的值 |
|
<element>.insertBefore(newNode, targetNode) |
这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面 |
|
<element>.removeAttribute(name) |
这个方法从元素中删除属性name |
|
<element>.removeChild(childNode) |
这个方法从元素中删除子元素childNode |
|
<element>.replaceChild(newNode, oldNode) |
这个方法将节点oldNode替换为节点newNode |
|
<element>.hasChildnodes() |
这个方法返回一个布尔值，指示元素是否有子元素 |