XMLHttpRequest对象

写博客只是为了记录一下自己学习和工作中遇到的问题，很多内容都是在网上找的别人的。不用于商业

XHR——XMLHttpRequest对象

创建XMLHttpRequest对象

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

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

functionXHR(){

varxhr;

try{xhr=newXMLHttpRequest();}

catch(e){

varIEXHRVers=["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

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

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

catch(e){continue;}

}

}

returnxhr;

}

使用XHR

varxhr=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对象接收

varxhr=XHR();

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

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

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

xhr.send(null);

functoncallback(){

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

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

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

}

}

XHR对象参考

readyState属性返回当前请求的状态

0(未初始化)对象已建立，但是尚未初始化（尚未调用open方法）

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

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

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

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

varxhr=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状态码如下:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

400BadRequest请求出现语法错误。

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

403Forbidden资源不可用。

404NotFound无法找到指定位置的资源

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

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

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

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

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

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

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

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

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

414RequestURITooLongURI太长

416RequestedRangeNotSatisfiable服务器不能满足客户在请求中指定的Range头

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

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

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

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

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

505HTTPVersionNotSupported服务器不支持请求中所指明的HTTP版本

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

responseText与responseXML

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

responseXML将响应信息格式化为XmlDocument对象并返回.如果响应数据不是有效的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

varxhr=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

varxhr=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);

引用：http://www.cnblogs.com/gaojun/archive/2012/08/11/2633891.html