三、 XMLHttpRequest 对 象的方法
XMLHttpRequest对 象提供了各 种 方法用于初始化和 处 理 HTTP请 求,下列将逐个展 开详细讨论 。
abort()方法
你可以使用 这 个 abort()方法来 暂 停与一个 XMLHttpRequest对 象相 联 系的 HTTP请 求,从而把 该对 象 复 位到未初始化状 态 。
open()方法
你需要 调 用 open(DOMString method, DOMString uri, boolean async, DOMString username, DOMString password)方法初始化一个 XMLHttpRequest对 象。 其中, method 参数是必 须 提供的 - 用于指定你想用来 发 送 请 求的 HTTP 方法 (GET , POST , PUT , DELETE 或 HEAD) 。 为 了把数据 发 送到服 务 器, 应该 使用 POST 方法; 为 了从服 务 器端 检 索数据, 应该 使用 GET 方法。 另外, uri 参数用于指定 XMLHttpRequest 对 象把 请 求 发 送到的服 务 器相 应 的 URI 。借助于 window.document.baseURI 属 性, 该 uri 被解析 为 一个 绝对 的 URI- 换 句 话说 ,你可以使用相 对 的 URI- 它将使用与 浏览 器解析相 对 的 URI 一 样 的方式被解析。 async 参数指定是否 请 求是异 步 的 - 缺省 值为 true 。 为 了 发 送一个同 步请 求,需要把 这 个参数 设 置 为 false 。 对 于要求 认证 的服 务 器, 你可以提供可 选 的用 户 名和口令参数。在 调 用 open() 方法后, XMLHttpRequest 对 象把它的 readyState 属性 设 置 为 1( 打 开 ) 并且把 responseText 、 responseXML 、 status 和 statusText 属性 复 位到它 们 的初始 值 。另外,它 还复 位 请 求 头 部。注意,如果你 调 用 open() 方法并且此 时 readyState 为 4 , 则 XMLHttpRequest 对 象将 复 位 这 些 值 。
send() 方法
在通 过调 用 open() 方法准 备 好一个 请 求之后,你需要把 该请 求 发 送到服 务 器。 仅 当 readyState 值为 1 时 ,你才可以 调 用 send() 方法;否 则 的 话 , XMLHttpRequest 对 象将引 发 一个异常。 该请 求被使用提供 给 open() 方法的参数 发 送到服 务 器。当 async 参数 为 true 时 , send() 方法立即返回,从而允 许 其它客 户 端脚本 处 理 继续 。在 调 用 send() 方法后, XMLHttpRequest 对 象把 readyState 的 值设 置 为 2( 发 送 ) 。当服 务 器响 应时 ,在接收消息体之前,如果存在任何消息体的 话 , XMLHttpRequest 对 象将把 readyState 设 置 为 3( 正在接收中 ) 。当 请 求完 成加 载时 ,它把 readyState 设 置 为 4( 已加 载 ) 。 对 于一个 HEAD 类 型的 请 求,它将在把 readyState 值设 置 为 3 后再立即把它 设 置 为 4 。
send() 方法使用一个可 选 的参数 - 该 参数可以包含可 变类 型的数据。典型地,你使用它并通 过 POST 方法 把数据 发 送到服 务 器。另外,你可以 显 式地使用 null 参数 调 用 send() 方法, 这 与不用参数 调 用它一 样 。 对 于大多数其它的数据 类 型,在 调 用 send() 方法之前, 应该 使用 setRequestHeader() 方法 ( 见 后面的解 释 ) 先 设 置 Content-Type 头 部。如 果在 send(data) 方法中的 data 参数的 类 型 为 DOMString ,那 么 ,数据将被 编码为 UTF-8 。如果数据是 Document 类 型,那 么 将使用由 data.xmlEncoding 指定的 编码 串行化 该 数据。
setRequestHeader() 方法
该 setRequestHeader(DOMString header , DOMString value) 方法用来 设 置 请 求的 头 部信息。当 readyState 值为 1 时 ,你可以在 调 用 open() 方法后 调 用 这 个方法;否 则 ,你将得到一个异常。
getResponseHeader() 方法
getResponseHeader(DOMString header , value) 方法用于 检 索响 应 的 头 部 值 。 仅 当 readyState 值 是 3 或 4( 换 句 话说 ,在响 应头 部可用以后 ) 时 ,才可以 调 用 这 个方法;否 则 , 该 方法返回一个空字符串。
getAllResponseHeaders()方法
该 getAllResponseHeaders()方法以一个字符串形式返回所有的响 应头 部( 每 一个 头 部占 单 独的一行)。如果 readyState的 值 不是 3或 4, 则该 方法返回 null。
四、 发 送 请 求
在 AJAX中, 许 多使用 XMLHttpRequest的 请 求都是从一个 HTML事件(例如一个 调 用 JavaScript函数的按 钮 点 击 (onclick)或一个按 键 (onkeypress))中被初始化的。 AJAX 支持包括表 单 校 验 在内的各 种应 用程 序。有 时 ,在填充表 单 的其它内容之前要求校 验 一个唯一的表 单 域。例如要求使用一个唯一的 UserID 来注册表 单 。如果不是使用 AJAX 技 术 来校 验这 个 UserID 域,那 么 整个表 单 都必 须 被填充和提交。如果 该 UserID 不是有效的, 这 个表 单 必 须 被重新提交。例如,一个相 应 于一个要求必 须 在服 务 器端 进 行 校 验 的 Catalog ID 的表 单 域可能按下列形式指定:
< form name="validationForm" action="validateForm" method="post"> |
前面的 HTML使用 validationMessage div来 显 示相 应 于 这 个 输 入域 Catalog Id的一个校 验 消息。 onkeyup事件 调 用一个 JavaScript sendRequest()函数。 这 个 sendRequest()函数 创 建一个 XMLHttpRequest对 象。 创 建一个 XMLHttpRequest 对 象的 过 程因 浏览 器 实现 的不同而有所区 别 。如果 浏览 器支持 XMLHttpRequest 对 象作 为 一个窗口属性 ( 所有普通的 浏览 器 都是 这样 的,除了 IE 5 和 IE 6 之外 ) ,那 么 ,代 码 可以 调 用 XMLHttpRequest 的构造器。如果 浏览 器把 XMLHttpRequest 对 象 实现为 一个 ActiveXObject 对 象 ( 就象在 IE 5 和 IE 6 中一 样 ) ,那 么 ,代 码 可以使用 ActiveXObject 的构造器。下面的函数将 调 用一个 init() 函数,它 负责检查 并决定要使用的适当的 创 建方法 - 在 创 建和返回 对 象之前。
< script type="text/javascript"> |
接下来,你需要使用 Open()方法初始化 XMLHttpRequest对 象 -指定 HTTP方法和要使用的服 务 器 URL。
var catalogId=encodeURIComponent(document.getElementById("catalogId").value); |
默 认 情况下,使用 XMLHttpRequest 发 送的 HTTP 请 求是异 步进 行的,但是你可以 显 式地把 async 参数 设 置 为 true ,如上面所展示的。
在 这种 情况下, 对 URL validateForm 的 调 用将激活服 务 器端的一个 servlet ,但是你 应该 能 够 注意到服 务 器端技 术 不是根本性的; 实际 上, 该 URL 可能是一个 ASP , ASP.NET 或 PHP 页 面或一个 Web 服 务 - 这 无 关紧 要,只要 该页 面能 够 返回一个响 应 - 指示 CatalogID 值 是否是有效的 - 即可。因 为 你在 作一个异 步调 用,所以你需要注册一个 XMLHttpRequest 对 象将 调 用的回 调 事件 处 理器 - 当它的 readyState 值 改 变时调 用。 记 住, readyState值 的改 变 将会激 发 一个 readystatechange事件。你可以使用 onreadystatechange属性来注册 该 回 调 事件 处 理器。
xmlHttpReq.onreadystatechange=processRequest; |
然后,我 们 需要使用 send() 方法 发 送 该请 求。因 为这 个 请 求使用的是 HTTP GET 方法,所以,你可以在不指定参数或使用 null 参数的情况下 调 用 send() 方法。
xmlHttpReq.send(null); |