本文详细介绍了XMLHttpRequest对象的使用方法，包括创建对象、属性、方法等内容。并通过一个示例展示了如何利用XMLHttpRequest发起HTTP请求，接收服务器响应。
一XMLHttpRequest简介
XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
二创建XMLHttpRequest对象
在使用XMLHTTPRequest对象发送请求和处理响应之前，我们必须要用javascript创建一个XMLHTTPRequest对象。（IE把XMLHTTPRequest实现为一个ActiveX对象，其他的浏览器[如Firefox/Safari/Opear]则把它实现为一个本地的javascript对象）。下面我们就来看看具体怎么运用javascript具体创建它吧：
<script language="javascript" type="text/javascript">
<!--
var xmlhttp;
// 创建XMLHTTPRequest对象
function createXMLHTTPRequest(){
if(window.ActiveXObject){ // 判断是否支持ActiveX控件
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
}
else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例（本地javascript对象）
}
}
//-->
</script>
三属性：
1 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 事件句柄。
2 responseText
目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
3 responseXML
对请求的响应，解析为 XML 并作为 Document 对象返回。
4 statu
由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
5 statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。
每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
四方法
abort()
取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
getAllResponseHeaders()
把 HTTP 响应头部作为未解析的字符串返回。
getResponseHeader()
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
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 与包含脚本的文本具有相同的主机名和端口。
说明
这个方法初始化请求参数以供 send() 方法稍后使用。它把 readyState 设置为 1，删除之前指定的所有请求头部，以及之前接收的所有响应头部，并且把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。当 readyState 为 0 的时候（当 XMLHttpRequest 对象刚创建或者 abort() 方法调用后）以及当 readyState 为 4 时（已经接收响应时），调用这个方法是安全的。当针对任何其他状态调用的时候，open() 方法的行为是为指定的。
XMLHttpRequest.send()
发送一个 HTTP 请求
语法
send(body)如果通过调用 open() 指定的 HTTP 方法是 POST 或 GET，body 参数指定了请求体，作为一个字符串或者 Document 对象。如果请求体不是必须的话，这个参数就为 null。对于任何其他方法，这个参数是不可用的，应该为 null（有些实现不允许省略该参数）。
说明
这个方法导致一个 HTTP 请求发送。如果之前没有调用 open()，或者更具体地说，如果 readyState 不是 1，send() 抛出一个异常。否则，它发送一个 HTTP 请求，该请求由以下几部分组成：
如果之前调用的 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() 之前。
<html> <head> <title>XMLHTTPRequest对象的说明DEMO</title> <script language="javascript" type="text/javascript"> <!-- var xmlhttp; // 创建一个XMLHTTPRequest对象 function createXMLHTTPRequext(){ if(window.ActiveXObject) { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } else if(window.XMLHTTPRequest){ xmlhttp = new XMLHTTPRequest(); } } function PostOrder(xmldoc) { createXMLHTTPRequext(); // 方法：open // 创建一个新的http请求，并指定此请求的方法、URL以及验证信息 // 语法：oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); // 参数 // bstrMethod // http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 // bstrUrl // 请求的URL地址，可以为绝对地址也可以为相对地址。 // varAsync[可选] // 布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 // bstrUser[可选] // 如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。 // bstrPassword[可选] // 验证信息中的密码部分，如果用户名为空，则此值将被忽略。 // 备注：调用此方法后，可以调用send方法向服务器发送数据。 xmlhttp.Open("get", "http://localhost/example.htm", false); // var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']"); // alert(book.xml); // 属性：onreadystatechange // onreadystatechange：指定当readyState属性改变时的事件处理句柄 // 语法：oXMLHttpRequest.onreadystatechange = funcMyHandler; // 如下的例子演示当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange函数， // 当数据接收完毕后（readystate == 4）此页面上的一个按钮将被激活 // 备注：此属性只写，为W3C文档对象模型的扩展. xmlhttp.onreadystatechange= HandleStateChange; // 方法：send // 发送请求到http服务器并接收回应 // 语法：oXMLHttpRequest.send(varBody); // 参数：varBody （欲通过此请求发送的数据。） // 备注：此方法的同步或异步方式取决于open方法中的bAsync参数，如果bAsync == False，此方法将会等待请求完成或者超时时才会返回，如果bAsync == True，此方法将立即返回。 // This method takes one optional parameter, which is the requestBody to use. The acceptable VARIANT input types are BSTR, SAFEARRAY of UI1 (unsigned bytes), IDispatch to an XML Document Object Model (DOM) object, and IStream *. You can use only chunked encoding (for sending) when sending IStream * input types. The component automatically sets the Content-Length header for all but IStream * input types. // 如果发送的数据为BSTR，则回应被编码为utf-8, 必须在适当位置设置一个包含charset的文档类型头。 // If the input type is a SAFEARRAY of UI1, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type. // 如果发送的数据为XML DOM object，则回应将被编码为在xml文档中声明的编码，如果在xml文档中没有声明编码，则使用默认的UTF-8。 // If the input type is an IStream *, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type. xmlhttp.Send(xmldoc); // 方法：getAllResponseHeaders // 获取响应的所有http头 // 语法：strValue = oXMLHttpRequest.getAllResponseHeaders(); // 备注：每个http头名称和值用冒号分割，并以\r\n结束。当send方法完成后才可调用该方法。 alert(xmlhttp.getAllResponseHeaders()); // 方法：getResponseHeader // 从响应信息中获取指定的http头 // 语法：strValue = oXMLHttpRequest.getResponseHeader(bstrHeader); // 备注：当send方法成功后才可调用该方法。如果服务器返回的文档类型为"text/xml", 则这句话 // xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可以使用getAllResponseHeaders方法获取完整的http头信息。 alert(xmlhttp.getResponseHeader("Content-Type")); // 输出http头中的Content-Type列：当前web服务器的版本及名称。 document.frmTest.myButton.disabled = true; // 方法：abort // 取消当前请求 // 语法：oXMLHttpRequest.abort(); // 备注：调用此方法后，当前请求返回UNINITIALIZED 状态。 // xmlhttp.abort(); // 方法：setRequestHeader // 单独指定请求的某个http头 // 语法：oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue); // 参数：bstrHeader（字符串，头名称。） // bstrValue（字符串，值。） // 备注：如果已经存在已此名称命名的http头，则覆盖之。此方法必须在open方法后调用。 // xmlhttp.setRequestHeader(bstrHeader, bstrValue); } function HandleStateChange() { // 属性：readyState // 返回XMLHTTP请求的当前状态 // 语法：lValue = oXMLHttpRequest.readyState; // 备注：变量，此属性只读，状态用长度为4的整型表示.定义如下： // 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） // 1 (初始化) 对象已建立，尚未调用send方法 // 2 (发送数据) send方法已调用，但是当前的状态及http头未知 // 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， // 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 if (xmlhttp.readyState == 4){ document.frmTest.myButton.disabled = false; // 属性：responseBody // 返回某一格式的服务器响应数据 // 语法：strValue = oXMLHttpRequest.responseBody; // 备注：变量，此属性只读，以unsigned array格式表示直接从服务器返回的未经解码的二进制数据。 alert(xmlhttp.responseBody); // 属性：responseStream // 以Ado Stream对象的形式返回响应信息 // 语法：strValue = oXMLHttpRequest.responseStream; // 备注：变量，此属性只读，以Ado Stream对象的形式返回响应信息。 alert(xmlhttp.responseStream); // 属性：responseText // 将响应信息作为字符串返回 // 语法：strValue = oXMLHttpRequest.responseText; // 备注：变量，此属性只读，将响应信息作为字符串返回。XMLHTTP尝试将响应信息解码为Unicode字符串， // XMLHTTP默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-order mark)，XMLHTTP可 // 以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意，如果服务器返回的是xml文档，此属 // 性并不处理xml文档中的编码声明。你需要使用responseXML来处理。 alert(xmlhttp.responseText); // 属性：responseXML // 将响应信息格式化为Xml Document对象并返回 // 语法：var objDispatch = oXMLHttpRequest.responseXML; // 备注：变量，此属性只读，将响应信息格式化为Xml Document对象并返回。如果响应数据不是有效的XML文档， // 此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息。 alert("Result = " + xmlhttp.responseXML.xml); // 属性：status // 返回当前请求的http状态码 // 语法：lValue = oXMLHttpRequest.status; // 返回值：长整形标准http状态码，定义如下： // Number:Description // 100:Continue // 101:Switching protocols // 200:OK // 201:Created // 202:Accepted // 203:Non-Authoritative Information // 204:No Content // 205:Reset Content // 206:Partial Content // 300:Multiple Choices // 301:Moved Permanently // 302:Found // 303:See Other // 304:Not Modified // 305:Use Proxy // 307:Temporary Redirect // 400:Bad Request // 401:Unauthorized // 402:Payment Required // 403:Forbidden // 404:Not Found // 405:Method Not Allowed // 406:Not Acceptable // 407:Proxy Authentication Required // 408:Request Timeout // 409:Conflict // 410:Gone // 411:Length Required // 412:Precondition Failed // 413:Request Entity Too Large // 414:Request-URI Too Long // 415:Unsupported Media Type // 416:Requested Range Not Suitable // 417:Expectation Failed // 500:Internal Server Error // 501:Not Implemented // 502:Bad Gateway // 503:Service Unavailable // 504:Gateway Timeout // 505:HTTP Version Not Supported // 备注：长整形，此属性只读，返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。 alert(xmlhttp.status); // 属性：statusText // 返回当前请求的响应行状态 // 语法：strValue = oXMLHttpRequest.statusText; // 备注：字符串，此属性只读，以BSTR返回当前请求的响应行状态,此属性仅当数据发送并接收完毕后才可获取。 alert(xmlhttp.statusText); } } //--> </script> </head> <body> <form name="frmTest"> <input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');"> </form> </body> </html>
扫一扫
7003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
