XMLHttpRequest对象

来源：互联网发布：htc m9 v版网络设置编辑：程序博客网时间：2024/06/06 02:56

创建XMLHttpRequest对象

（部分内容参考：http://www.w3school.com.cn/xml/xml_http.asp）

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

· 在不重新加载页面的情况下更新网页

· 在页面已加载后从服务器请求数据

· 在页面已加载后从服务器接收数据

· 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

var xmlhttp;

function loadXMLDoc(url)

{

xmlhttp=null;

if (window.XMLHttpRequest)

{// code for all new browsers

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{// code for IE5 and IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change;

/*onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码*/

xmlhttp.open("GET",url,true);

/*第一个参数是请求方式,一般用get与post方法,与form标签的method类似

第二个参数是请求的URL

第三个参数是请求是同步进行还是异步进行,true表示异步

调用了open方法仅仅是传递了参数而已*/

为什么使用 Async=true ？

我们的实例在 open() 的第三个参数中使用了 "true"。

该参数规定请求是否异步处理。

True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。

xmlhttp.send(null);

}

else

{

alert("Your browser does not support XMLHTTP.");

}

function state_Change()

{

if (xmlhttp.readyState==4)

{// 4 = "loaded" 请求已完成，且响应已就绪

if (xmlhttp.status==200)

{// 200 = OK

// ...our code here...

document.getElementById('A1').innerHTML=xmlhttp.status;

//写入数字

document.getElementById('A2').innerHTML=xmlhttp.statusText;

//写入状态

document.getElementById('A3').innerHTML=xmlhttp.responseText;

//写入文本

}

else

{

alert("Problem retrieving XML data");

//alert("Problem retrieving XML data:" + xmlhttp.statusText);

}

</script>

<body>

<h2>Using the HttpRequest Object</h2>

<p><b>Status:</b>

</p>

<p><b>Status text:</b>

</p>

<p><b>Response:</b>

</p>

Using the HttpRequest Object

Status: 200

Status text: OK

Response:
George John Reminder Don't forget the meeting!

Get XML

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

· 0: 请求未初始化

· 1: 服务器连接已建立

· 2: 请求已接收

· 3: 请求处理中

4: 请求已完成，且响应已就绪

· 0 (未初始化) 对象已建立，

· 1 (初始化) 对象已建立，尚未调用send方法

· 2 (发送数据) send方法已调用，但是当前的状态及http头未知

· 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误

4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应

status

200: "OK"

404: 未找到页面

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

responseText

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

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

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

responseXML

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

status

由服务器返回的 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

与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest

不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP

function XHR() {

var xhr;

try {xhr = new XMLHttpRequest();}

catch(e) {

var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

for (var i=0,len=IEXHRVers.length;i< len;i++) {

try {xhr = new ActiveXObject(IEXHRVers[i]);}

catch(e) {continue;}

}

return xhr;

}

使用XHR

var xhr = XHR();

//open方法创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)

xhr.open("get","test.txt",true);

/*第一个参数是请求方式,一般用get与post方法,与form标签的method类似

第二个参数是请求的URL

第三个参数是请求是同步进行还是异步进行,true表示异步

调用了open方法仅仅是传递了参数而已*/

xhr.send(null);//调用了send方法后才会发出请求

//并且get方式发送请求时send参数是null

在服务器环境中执行上面的脚本,并且给一个php或asp脚本发送请求,会发现服务器端脚本其实会被执行

//PHP脚本

$fp =fopen("a.txt","wb");

fwrite($fp,"PHP文件在后台执行了");

fclose($fp);

echo "返回内容!";

上面PHP脚本的返回内容不会直接在页面上显示出来,必需要用JS通过XHR对象接收

var xhr = XHR();

xhr.open("get","test.php",true);

xhr.onreadystatechange = callback;//在readystatechange事件上绑定一个函数

//当接收到数据时,会调用readystatechange事件上的事件处理函数

xhr.send(null);

functon callback() {

//在这里面没有使用this.readyState这是因为IE下面ActiveXObject的特殊性

if (xhr.readyState == 4) {//readyState表示文档加载进度,4表示完毕

alert(xhr.reponseText);//responseText属性用来取得返回的文本

}

XHR对象参考

· 数据

var xhr =XHR();

alert(xhr.readyState);//0

xhr.open("get","test.htm",true);

alert(xhr.readyState);//1

xhr.send(null);

alert(xhr.readyState);//IE下会是4,而FF下会是2

//可以通过readystatechange事件监听

xhr = XHR();

xhr.onreadystatechange = function () {

alert(xhr.readyState);//FF下会依次是1,2,3,4但最后还会再来个1

//IE下则是1,1,3,4

};

xhr.open("get","test.txt",true);

xhr.send(null);

从上面可以看到,对于readyState这个属性,各个浏览器看法也不一样,但其实我们只需要知道当状态为4的时候可以获取response就行了!

status 返回当前请求的http状态码

status属性返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。完整的HTTP状态码如下:

· 100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分

· 101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议

· 200 OK 一切正常，对GET和POST请求的应答文档跟在后面。

· 201 Created 服务器已经创建了文档，Location头给出了它的URL。

· 202 Accepted 已经接受请求，但处理尚未完成。

· 203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝

· 204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的

· 205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容

· 206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它

· 300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

· 301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

· 302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。

· 303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取

· 304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

· 305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取

· 307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。

· 400 Bad Request 请求出现语法错误。

· 401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。

· 403 Forbidden 资源不可用。

· 404 Not Found 无法找到指定位置的资源

· 405 Method Not Allowed 请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。

· 406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容

· 407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。

· 408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。

· 409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。

· 410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。

· 411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头

· 412 Precondition Failed 请求头中指定的一些前提条件失败

· 413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头

· 414 Request URI Too Long URI太长

· 416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头

· 500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求

· 501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求

· 502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答

· 503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头

· 504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答

· 505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

事实上,我们只需要知道状态为200的时候(OK)才读取response就行了!

responseText与responseXML

responseText 将响应信息作为字符串返回 . XMLHTTP尝试将响应信息解码为Unicode字符串，XMLHTTP默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-order mark)，XMLHTTP可以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意，如果服务器返回的是xml文档，此属性并不处理xml文档中的编码声明。你需要使用responseXML来处理。

responseXML 将响应信息格式化为Xml Document对象并返回 . 如果响应数据不是有效的XML文档，此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息。

其它一些XHR对象的方法

abort 取消当前请求

getAllResponseHeaders 获取响应的所有http头每个http头名称和值用冒号分割，并以\r\n结束。当send方法完成后才可调用该方法。

getResponseHeader 从响应信息中获取指定的http头当send方法成功后才可调用该方法。如果服务器返回的文档类型为"text/xml", 则这句话xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可以使用getAllResponseHeaders方法获取完整的http头信息。

setRequestHeader 单独指定请求的某个http头如果已经存在已此名称命名的http头，则覆盖之。此方法必须在open方法后调用。

请求方式

GET 请求

//JS

var xhr = XHR();

xhr.open("get","test.php?qs=true&userName=abc&pwd=123456",true);

xhr.onreadystatechange = function () {

if (xhr.readyState==4 && xhr.status ==200) {

alert(xhr.responseText);

}

};

xhr.send(null);

//PHP

print_r($_GET);

POST 请求

//JS

var xhr = XHR();

xhr.open("post","test.php",true);

xhr.onreadystatechange = function () {

if (xhr.readyState==4 && xhr.status ==200) {

alert(xhr.responseText);

}

};

//比GET请求多了一步

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//另外,数据是通过send方法发送的

xhr.send("qs=true&userName=abc&pwd=123456");

//PHP

header("Cache-Control: no-cache, must-revalidate");//可以让浏览器不缓存结果

print_r($_POST);

2 0