XMLHTTPRequest

 

XMLHTTPRequest

求助编辑

百科名片

 

 XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

对象

浏览器支持

　　XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。正如在 XMLHttpRequest 对象 这一节所介绍的。

W3C 标准化

　　XMLHttpRequest 对象还没有标准化，但是 W3C 已经开始了标准化的工作，本手册介绍的内容都是基于标准化的工作草案。

　　当前的 XMLHttpRequest 实现已经相当一致。但是和标准有细微的不同。例如，一个实现可能返回 null，而标准要求是空字符串，或者实现可能把 readyState 设置为 3 而不保证所有的响应头部都可用。

编辑本段

属性

readyState

　　HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

　　5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

　　状态       名称       描述

0     Uninitialized    初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1     Open       open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。

2     Send       Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。

3     Receiving       所有响应头部都已经接收到。响应体开始接收但未完成。

4     Loaded    HTTP 响应已经完全接收。

 

　　readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。

responseText

　　目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

　　如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。

　　如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

responseXML

　　对请求的响应，解析为 XML 并作为 Document 对象返回。

statu

　　由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

statusText

　　这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

编辑本段

事件句柄

onreadystatechange

　　每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。

编辑本段

方法

abort()

　　取消当前响应，关闭连接并且结束任何未决的网络活动。

　　这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

getAllResponseHeaders()

　　把 HTTP 响应头部作为未解析的字符串返回。

　　如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。

getResponseHeader()

　　返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

　　该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

open()

　　初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

send()

　　发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

setRequestHeader()

　　向一个打开但未发送的请求设置或添加一个 HTTP 请求。

编辑本段

XMLHttpRequest.open()

　　初始化 HTTP 请求参数

语法

　　open(method, url, async, username, password)method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。

　　url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

　　async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。

　　username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

说明

　　这个方法初始化请求参数以供 send() 方法稍后使用。它把 readyState 设置为 1，删除之前指定的所有请求头部，以及之前接收的所有响应头部，并且把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。当 readyState 为 0 的时候（当 XMLHttpRequest 对象刚创建或者 abort() 方法调用后）以及当 readyState 为 4 时（已经接收响应时），调用这个方法是安全的。当针对任何其他状态调用的时候，open() 方法的行为是为指定的。

　　除了保存供 send() 方法使用的请求参数，以及重置 XMLHttpRequest 对象以便复用，open() 方法没有其他的行为。要特别注意，当这个方法调用的时候，实现通常不会打开一个到 Web 服务器的网络连接。

编辑本段

XMLHttpRequest.send()

　　发送一个 HTTP 请求

语法

　　send(body)如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者 Document 对象。如果请求体不适必须的话，这个参数就为 null。对于任何其他方法，这个参数是不可用的，应该为 null（有些实现不允许省略该参数）。

说明

　　这个方法导致一个 HTTP 请求发送。如果之前没有调用 open()，或者更具体地说，如果 readyState 不是 1，send() 抛出一个异常。否则，它发送一个 HTTP 请求，该请求由以下几部分组成：

　　之前调用 open() 时指定的 HTTP 方法、URL 以及认证资格（如果有的话）。 之前调用 setRequestHeader() 时指定的请求头部（如果有的话）。 传递给这个方法的 body 参数。 一旦请求发布了，send() 把 readyState 设置为 2，并触发 onreadystatechange 事件句柄。

　　如果之前调用的 open() 参数 async 为 false，这个方法会阻塞并不会返回，直到 readyState 为 4 并且服务器的响应被完全接收。否则，如果 async 参数为 true，或者这个参数省略了，send() 立即返回，并且正如后面所介绍的，服务器响应将在一个后台线程中处理。

　　如果服务器响应带有一个 HTTP 重定向，send() 方法或后台线程自动遵从重定向。当所有的 HTTP 响应头部已经接收，send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange 事件句柄。如果响应较长，send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄：这可以作为一个下载进度指示器。最后，当响应完成，send() 或后台线程把 readyState 设置为 4，并最后一次触发事件句柄。

编辑本段

XMLHttpRequest.setRequestHeader()

语法

　　setRequestHeader(name, value)name 参数是要设置的头部的名称。这个参数不应该包括空白、冒号或换行。

　　value 参数是头部的值。这个参数不应该包括换行。

说明

　　setRequestHeader() 方法指定了一个 HTTP 请求的头部，它应该包含在通过后续 send() 调用而发布的请求中。这个方法只有当 readyState 为 1 的时候才能调用，例如，在调用了 open() 之后，但在调用 send() 之前。

　　如果带有指定名称的头部已经被指定了，这个头部的新值就是：之前指定的值，加上逗号、空白以及这个调用指定的值。

　　如果 open() 调用指定了认证资格，XMLHttpRequest 自动发送一个适当的 Authorization 请求头部。但是，你可以使用 setRequestHeader() 来添加这个头部。类似地，如果 Web 服务器已经保存了和传递给 open() 的 URL 相关联的 cookie，适当的 Cookie 或 Cookie2 头部也自动地包含到请求中。可以通过调用 setRequestHeader() 来把这些 cookie 添加到头部。XMLHttpRequest 也可以为 User-Agent 头部提供一个默认值。如果它这么做，你为该头部指定的任何值都会添加到这个默认值后面。

　　有些请求头部由 XMLHttpRequest 自动设置而不是由这个方法设置，以符合 HTTP 协议。这包括如下和代理相关的头部：

Host Connection Keep-Alive Accept-charset Accept-Encoding If-Modified-Since If-None-Match If-Range Range

 

全面剖析XMLHttpRequest对象

2006-11-27 09:31作者：朱先忠编译出处：天极软件责任编辑：方舟

　　三、 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。

全面剖析XMLHttpRequest对象

2006-11-27 09:31作者：朱先忠编译出处：天极软件责任编辑：方舟

　　四、 发送请求

 

　　在AJAX中，许多使用XMLHttpRequest的请求都是从一个HTML事件（例如一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress)）中被初始化的。AJAX支持包括表单校验在内的各种应用程序。有时，在填充表单的其它内容之前要求校验一个唯一的表单域。例如要求使用一个唯一的UserID来注册表单。如果不是使用AJAX技术来校验这个UserID域，那么整个表单都必须被填充和提交。如果该UserID不是有效的，这个表单必须被重新提交。例如，一个相应于一个要求必须在服务器端进行校验的Catalog ID的表单域可能按下列形式指定：

＜form name="validationForm" action="validateForm" method="post"＞

＜table＞

　＜tr＞＜td＞Catalog Id:＜/td＞

　　＜td＞

　　　＜input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" οnkeyup="sendRequest()"＞

　　＜/td＞

　　＜td＞＜div id="validationMessage"＞＜/div＞＜/td＞

　＜/tr＞

＜/table＞＜/form＞

 

 

　　前面的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"＞

function sendRequest(){

　var xmlHttpReq=init();

　function init(){

　　if (window.XMLHttpRequest) {

　　　return new XMLHttpRequest();

　　}

　else if (window.ActiveXObject) {

　　return new ActiveXObject("Microsoft.XMLHTTP");

　}

}

＜/script＞

 

 

　　接下来，你需要使用Open()方法初始化XMLHttpRequest对象-指定HTTP方法和要使用的服务器URL。

var catalogId=encodeURIComponent(document.getElementById("catalogId").value);

xmlHttpReq.open("GET"， "validateForm?catalogId=" + catalogId， true);

 

 

　　默认情况下，使用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()方法。

全面剖析XMLHttpRequest对象

2006-11-27 09:31作者：朱先忠编译出处：天极软件责任编辑：方舟

　　五、 处理请求

 

　　在这个示例中，因为HTTP方法是GET，所以在服务器端的接收servlet将调用一个doGet()方法，该方法将检索在URL中指定的catalogId参数值，并且从一个数据库中检查它的有效性。

 

　　本文示例中的这个servlet需要构造一个发送到客户端的响应；而且，这个示例返回的是XML类型，因此，它把响应的HTTP内容类型设置为text/xml并且把Cache-Control头部设置为no-cache。设置Cache-Control头部可以阻止浏览器简单地从缓存中重载页面。

public void doGet(HttpServletRequest request，

HttpServletResponse response)

throws ServletException， IOException {

　...

　...

　response.setContentType("text/xml");

　response.setHeader("Cache-Control"， "no-cache");

}

 

 

　　来自于服务器端的响应是一个XML DOM对象，此对象将创建一个XML字符串-其中包含要在客户端进行处理的指令。另外，该XML字符串必须有一个根元素。

out.println("＜catalogId＞valid＜/catalogId＞");

 

 

　　【注意】XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应；但是，一个响应也可能是另外一种类型，如果用户代理(UA)支持这种内容类型的话。

 

　　当请求状态改变时，XMLHttpRequest对象调用使用onreadystatechange注册的事件处理器。因此，在处理该响应之前，你的事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载（readyState值为4）并且响应已经完成（HTTP状态为"OK"）时，你就可以调用一个JavaScript函数来处理该响应内容。下列脚本负责在响应完成时检查相应的值并调用一个processResponse()方法。

function processRequest(){

　if(xmlHttpReq.readyState==4){

　　if(xmlHttpReq.status==200){

　　　processResponse();

　　}

　}

}

 

 

　　该processResponse()方法使用XMLHttpRequest对象的responseXML和responseText属性来检索HTTP响应。如上面所解释的，仅当在响应的媒体类型是text/xml，application/xml或以+xml结尾时，这个responseXML才可用。这个responseText属性将以普通文本形式返回响应。对于一个XML响应，你将按如下方式检索内容：

var msg=xmlHttpReq.responseXML;

 

 

　　借助于存储在msg变量中的XML，你可以使用DOM方法getElementsByTagName()来检索该元素的值：

var catalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue;

 

 

　　最后，通过更新Web页面的validationMessage div中的HTML内容并借助于innerHTML属性，你可以测试该元素值以创建一个要显示的消息：

if(catalogId=="valid"){

　var validationMessage = document.getElementById("validationMessage");

　validationMessage.innerHTML = "Catalog Id is Valid";

}

else

{

　var validationMessage = document.getElementById("validationMessage");

　validationMessage.innerHTML = "Catalog Id is not Valid";

}

 

 

　　六、 小结

 

　　上面就是XMLHttpRequest对象使用的所有细节实现。通过不必把Web页面寄送到服务器而实现数据传送，XMLHttpRequest对象为客户端与服务器之间提供了一种动态的交互能力。你可以使用JavaScript启动一个请求并处理相应的返回值，然后使用浏览器的DOM方法更新页面中的数据。

 

 

 

关注此文的读者还看过：