4.6.2 XMLHttpRequest 对象的属性和方法
IE5.0 开始,开发人员可以在 Web 页面内部使用 XMLHTTP ActiveX 组件扩展自身的功能,不用从当前的 Web 页面导航就可以直接将数据传输到服务器或者从服务器接收数据。 Mozilla1.0 以及 NetScape7 则是创建继承 XML 的代理类 XMLHttpRequest ;对于大多数情况, XMLHttpRequest 对象和 XMLHttp 组件很相似,方法和属性类似,只是部分属性不同。例程 4-25 的代码段显示了如何在 IE 浏览器和 Mozilla 浏览器中创建 XMLHttp- Request 对象。
例程 4-25 创建 XMLHttpRequest 对象
<script language="javascript">
var http_request = false;
//IE 浏览器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla 浏览器
http_request = new XMLHttpRequest();
</script>
不同版本的 IE 浏览器采用不同方式创建 XMLHttpRequest 对象,某些旧版本使用 Microsoft.XMLHTTP ,而较新的版本则使用 Msxml2.XMLHTTP 。通常,为了保证 Ajax 程序的浏览器兼容性,需要注意创建 XMLHttpRequest 对象的程序,要同时支持这两种创建方式。
X MLHttpRequest 对象提供了一系列属性和方法,来向服务器发起异步 http 请求,监 听服务 器的状态,并在服务器完成数据响应处理之后接收服务器返回的信息数据。表 4-1 7 列出了 XMLHttpRequest 对象的属性。
表 4-17 XMLHttpRequest 对象属性
属 性 |
描 述 |
onreadystatechange |
指定当 readyState 属性改变时的事件处理句柄,属性为只写 |
readyState |
返回当前请求的状态,属性为只读 |
responseBody |
将回应信息正文以 unsigned byte 数组形式返回,属性为只读 |
responseStream |
以 Ado Stream 对象的形式返回响应信息,属性为只读 |
responseText |
以字符串的形式返回服务器响应信息,属性为只读 |
responseXML |
将响应信息格式化为 XML Document 对象返回,属性为只读 |
status |
返回当前 HTTP 请求的状态码,属性为只读。如: 404 = " 文件未找到 " 、 200 = " 成功 " |
statusText |
返回当前 HTTP 请求的状态行,属性为只读 |
XMLHttpRequest 对象属性 readyState 返回当前 XMLHttp 请求的状态,这些状态用长 度为 4 的整形数据表示,其属性的状态含义如表 4-18 所示:
表 4-18 readyState 属性的状态
状 态 |
含 义 |
说 明 |
0 |
未初始化 |
对象已经建立,但是未初始化,即尚未调用 open 方法创建 http 请求 |
1 |
初始化 |
对象已经建立,但是为调用 send 方法发送 http 请求 |
2 |
发送数据 |
send 方法已经被调用,但是当前的状态以及 http 头未知 |
3 |
数据传送中 |
已经接收部分数据,因为响应及 http 头不全,这是通过 response 系列方法获取部分数据会出现错误 |
4 |
传送完成 |
数据接收完毕,此时可以通过 response 系列方法获取完整的回应数据 |
XMLHttpRequest 对象属性 onreadystatechange 是 readyState 状态改变的事件触发器,用来指定当 readyState 属性发生改变时的处理事件。在使用过程中,通常通过将事件处理函数名称赋予 onreadystatechange 的方式,来为 XMLHttpRequest 指定事件触发器,而在事件处理函数中判断 readyState 状态值并做相应的处理。例程 4-26 的代码段指定 doState- ReadyHandler 函数作为事件处理函数,并在 doStateReadyHandler 函数体内在 readyState 状态为 4 时弹出一个显示“完成”信息的对话框。
例程 4-26 指定 XMLHttpRequest 对象的回调函数
var http_request = null;
http_request = new ActiveXObject("Msxml2.XMLHTTP");
function send() {
http_request.onreadystatechange = doStateReadyHandler;
http_request.open("GET","http://localhost/sample.xml",true);
http_request.send();
}
function doStateReadyHandler() {
if(http_request.readySatate==4) window.alert(" 完成 ");
}
XMLHttpRequest 对象属性 responseText 将响应信息以字符串的形式返回。 XMLHttp- Request 尝试将响应信息解码为 Unicode 字符串,默认的响应数据编码方式为 UTF-8 。如果服务器返回的数据带有 BOM ( byte-order mark ),则 XMLHttpRequest 可以解码任何的 UCS-2 或者 UCS-4 数据。如果服务器返回的是 XML 文档,此属性不处理 XML 文档中的编码声明,仅将整个 XML 文档作为字符串返回。
如果服务器以 XML 文档的格式返回响应数据,这时应该采用 responseXML 属性加以处理。如果响应数据不是有效的 XML 文档,此属性本身不返回 XMLDOMParseError ,可以通过处理过的 DOMDocument 对象获取错误信息。在使用 responseXML 将服务器响应数据以 XML 文档的形式返回之前,先要将响应的内容类型设置为 application/xml 。
XMLHttpRequest 对象属性 status 代表当前 http 请求的状态,为长整型数据。其值及其含义如表 4-19 所示。
表 4-19 http 请求状态及其含义
值 |
描 述 |
值 |
描 述 |
100 |
客户必须继续发出请求 |
404 |
没有发现文件、查询或 URl |
101 |
客户要求服务器根据请求转换 HTTP 协议版本 |
405 |
用户在 Request-Line 字段定义的方法不允许 |
200 |
交易成功 |
406 |
根据用户发送的 Accept 拖,请求资源不可访问 |
201 |
提示知道新文件的 URL |
407 |
类似 401 ,用户必须首先在代理服务器上得到授权 |
202 |
接受和处理、但处理未完成 |
408 |
客户端没有在用户指定的饿时间内完成请求 |
203 |
返回信息不确定或不完整 |
409 |
对当前资源状态,请求不能完成 |
204 |
请求收到,但返回信息为空 |
410 |
服务器上不再有此资源且无进一步的参考地址 |
205 |
服务器完成了请求,用户代理必须复位当前已经浏览过的文件 |
411 |
服务器拒绝用户定义的 Content-Length 属性请求 |
206 |
服务器已经完成了部分用户的 GET 请求 |
412 |
一个或多个请求头字段在当前请求中错误 |
300 |
请求的资源可在多处得到 |
413 |
请求的资源大于服务器允许的大小 |
301 |
删除请求数据 |
414 |
请求的资源 URL 长于服务器允许的长度 |
302 |
在其他地址发现了请求数据 |
415 |
请求资源不支持请求项目格式 |
303 |
建议客户访问其他 URL 或访问方式 |
416 |
请求中包含 Range 请求头字段,在当前请求资源范围内没有 range 指示值,请求也不包含 If-Range 请求头字段 |
304 |
客户端已经执行了 GET ,但文件未变化 |
417 |
服务器不满足请求 Expect 头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求 |
305 |
请求的资源必须从服务器指定的地址得到 |
500 |
服务器产生内部错误 |
307 |
申明请求的资源临时性删除 |
501 |
服务器不支持请求的函数 |
400 |
错误请求,如语法错误 |
502 |
服务器暂时不可用,有时是为了防止发生系统过载 |
401 |
请求授权失败 |
503 |
服务器过载或暂停维修 |
402 |
保留有效 ChargeTo 头响应 |
504 |
关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长 |
403 |
请求不允许 |
505 |
服务器不支持或拒绝支请求头中指定的 HTTP 版本 |
在这些状 态中,最常用到的是“ 404 ”。通常,在类似例子 4-20 中 doStateReady Handler 的事件处理函数中,判断 status 的状态,然后做相应的处理。
XM LHttpRequest 对象提供了包括 send 、 open 在内的六种方法,用来向服务器发送 http 请求,并设置相应的头信息。表 4-20 列出 XMLHttpRequest 对象提供的方法及其含义。
表 4-20 XMLHttpRequest 对象的方法及其含义
方 法 |
描 述 |
abort |
取消当前请求 |
getAllResourceHeaders |
获取相应的全部 http 头信息 |
getResourceHeader |
从响应信息中获取指定的 http 头信息 |
open |
创建一个新的 http 请求,并指定此请求的方法、 URL 、以及验证信息(用户名 / 密码) |
send |
发送请求到 http 服务器并接收回应 |
setRequestHeader |
单独设定请求的某个 http 头 |
方 法 abort 的语法为: http_request.abort(); 调用此方法,当前请求返回 UNINITIALIZED 状态。
方法 getAllResourceHeaders 像 JSP 中的 HttpServletRequest 对象一样,获取 http 请求的请求头信息。其语法为: headers = http_request.getAllResourceHeaders();
相对, getResourceHeader 方法则是获取某个指定的 http 头信息,传入的参数为这个头信息的名称,其语法为: header = http_request.getResourceHeader(“header-name”);
getAllResourceHeaders 和 getResourceHeader 这两种方法,必须等到 http 请求发送成功即 send 方法成功执行之后才能够执行,否则会报错。
例程 4-27 使用 getAllResourceHeaders 和 getResourceHeader 两种方法取得相应的头信息,并将这些信息以弹出对话框的形式显示出来。其执行效果如图 4-23 所示。
图 4-23 获取 http 请求头信息
例程 4-27 sample4_21.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch04-- 获取请求头信息 </title>
<script language="javascript">
var http_request = false;
function send_request() {// 初始化、指定处理函数、发送请求的函数
http_request = false;
// 开始初始化 XMLHttpRequest 对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {// 设置 MiME 类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE 浏览器
try {
http_request = new ActiveXObject("Msxml2.XML HTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft. XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert(" 不能创建 XMLHttpRequest 对象实例 .");
return false;
}
// 确定发送请求的方式和 URL 以及是否异步执行下段代码
http_request.open("GET","sample4_19.htm", false);
http_request.send(null);
window.alert(" 全部头信息如下: /n"+http_request.getAll Response Headers() +
"/n"+" 头信息编码类型: /n"+http_request.getResponseHeader ("Content-Type"));
}
</script>
</head>
<body>
<input type="button" name="button" value=" 显示头信息 " onClick="send_ request()">
</body>
</html>
XMLHttpRequest 对象的 open 方法用来新建一个 http 请求,并设置请求的方法、 URL 以及验证信息等。其具体语法为:
http_request.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
bstrMethod 代表 http 方法,可选值为 POST 、 GET 、 PUT 和 PROPFIND ,大小写不敏感。 bstrUrl 为请求的目标 URL 地址,可以是绝对地址也可以是相对地址。 varAsync 为布尔型参数,指定该请求是否为异步方式,默认为 true ;如果为真,当 state 状态改变时会调用 onreadystatechange 属性指向的回调函数。如果服务器需要验证,则应该指定 bstrUser 参数为要验证的用户名, bstrPassword 参数为要验证的密码。如果 bstrUser 、 bstrPassword 参数不指定,则在服务器需要验证的时候,会弹出验证对话框。
创建 http 请求之后,就可以向服务器发送 http 请求, send 方法被调用,其语法为:
http_request.send(varBody);
参数 varBody 为要发送给服务器的内容。如果没有内容要发送, varBody 参数可以省 略。此方法的同步或异步方式取决于 open 方法中的 varAsync 参数,如果 varAsync 为 False , 此方法将会等待请求完成或者超时时才会返回,如果 varAsync 为 True ,此方法将立即返回。如果发送的数据为 BSTR ,则回应被编码为 UTF-8 ,必须在适当位置设置一个包含 charset 的文档类型头。如果发送的数据为 XML DOM object ,则回应将被编码为在 xml 文档中声明的编码,如果在 xml 文档中没有声明编码,则使用默认的 UTF-8 。
在 Ajax 应用程序中,有两种方法可以向服务器发送请求内容。一种是以“ & 内容名称 = 内容值”的形式直接附加在目标 URL 后面,通过 open() 方法设置发送内容。另外一种是将要发送的内容作为 send() 方法的参数,内容名称及其值也是成对出现的,中间用 & 字符隔开。
<!-- page -->