1、XHRXMLHttpRequest 对象创建 XMLHttpRequest 对象与之前众多 DOM 操作一样,创建 XHR 对象也具有兼容性问题:IE6 及之前的版本使用 ActiveXObject,IE7 之后及其它浏览器使用 XMLHttpRequest不但 IE6 及其之前的版本将 XHR 作为一个 ActiveXObject 运行,而且还存在众多版本:一开始是 Microsoft.XMLHTTP 之后变成 Msxml2.XMLHTTP 及更新版的Msxml3.XMLHTTP function XHR() var xhr;try xhr = new XMLHttpRequest();ca
2、tch(e) var IEXHRVers =“Msxml3.XMLHTTP“,“Msxml2.XMLHTTP“,“Microsoft.XMLHTTP“;for (var i=0,len=IEXHRVers.length;i len;i+) try xhr = new ActiveXObject(IEXHRVersi);catch(e) continue;return xhr;使用 XHRvar xhr = XHR();/open 方法 创建一个新的 http 请求，并指定此请求的方法、URL 以及验证信息( 用户名 /密码)xhr.open(“get“,“test.txt“,true);/*第
3、一个参数是请求方式, 一般用 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
4、);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 的特殊性i
5、f (xhr.readyState = 4) /readyState 表示文档加载进度,4 表示完毕alert(xhr.reponseText);/responseText 属性用来取得返回的文本XHR 对象参考readyState 属性 返回当前请求的状态 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用 open 方法） 1 (初始化) 对象已建立，尚未调用 send 方法 2 (发送数据) send 方法已调用，但是当前的状态及 http 头未知 3 (数据传送中) 已接收部分数据，因为响应及 http 头不全，这时通过responseBody 和 responseText 获取部
6、分数据会出现错误 4 (完成) 数据接收完毕,此时可以通过通过 responseBody 和responseText 获取完整的回应数据 var xhr =XHR();alert(xhr.readyState);/0xhr.open(“get“,“test.htm“,true);alert(xhr.readyState);/1xhr.send(null);alert(xhr.readyState);/IE 下会是 4,而 FF 下会是 2/可以通过 readystatechange 事件监听xhr = XHR();xhr.onreadystatechange = function () ale
7、rt(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 初始的请求已经接受，客户应当继
8、续发送请求的其余部分 101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议 200 OK 一切正常，对 GET 和 POST 请求的应答文档跟在后面。 201 Created 服务器已经创建了文档，Location 头给出了它的 URL。 202 Accepted 已经接受请求，但处理尚未完成。 203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝 204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而 Servlet 可以确定用户文
9、档足够新，这个状态代码是很有用的 205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容 206 Partial Content 客户发送了一个带有 Range 头的 GET 请求，服务器完成了它 300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location 应答头指明。 301 Moved Permanently 客户请求的文档在其他地方，新的 URL 在Location 头中给出，浏览器应该自动地访问新的 URL。 302 Found
10、类似于 301，但新的 URL 应该被视为临时性的替代，而不是永久性的。 303 See Other 类似于 301/302，不同之处在于，如果原来的请求是POST，Location 头指定的重定向目标文档应该通过 GET 提取 304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供 If-Modified-Since 头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 305 Use Proxy 客户请求的文档应该通过 Location 头所指明的代理服务器提取 307 Temporary Redirect 和 302（Fo
11、und）相同。许多浏览器会错误地响应 302 应答进行重定向，即使原来的请求是 POST，即使它实际上只能在 POST 请求的应答是 303 时才能重定向。由于这个原因，HTTP 1.1 新增了 307，以便更加清除地区分几个状态代码：当出现 303 应答时，浏览器可以跟随重定向的 GET 和 POST 请求；如果是 307 应答，则浏览器只能跟随对 GET 请求的重定向。 400 Bad Request 请求出现语法错误。 401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个 WWW-Authenticate 头，浏览器据此显示用户名字/密码对话框，然后在
12、填写合适的 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 在服务器许可的等待
13、时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。 409 Conflict 通常和 PUT 请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。 410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和 404 的不同在于，返回 407 表示文档永久地离开了指定的位置，而 404 表示由于未知的原因文档不可用。 411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length 头 412 Precondition Failed 请求头中指定的一些前提条件失败 413 Request Entity To
14、o 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 服务器作为网关
15、或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答 503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet 可能在数据库连接池已满的情况下返回 503。服务器返回503 时可以提供一个 Retry-After 头 504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答 505 HTTP Version Not Supported 服务器不支持请求中所指明的 HTTP版本 事实上,我们只需要知道状态为 200 的时候(OK)才读取 response 就行了!responseTex
16、t 与 responseXMLresponseText 将响应信息作为字符串返回 . XMLHTTP 尝试将响应信息解码为 Unicode 字符串，XMLHTTP 默认将响应数据的编码定为 UTF-8，如果服务器返回的数据带 BOM(byte-order mark)，XMLHTTP 可以解码任何 UCS-2 (big or little endian)或者 UCS-4 数据。注意，如果服务器返回的是 xml 文档，此属性并不处理 xml 文档中的编码声明。你需要使用 responseXML 来处理。responseXML 将响应信息格式化为 Xml Document 对象并返回 . 如果响应数
17、据不是有效的 XML 文档，此属性本身不返回 XMLDOMParseError，可以通过处理过的 DOMDocument 对象获取错误信息。 其它一些 XHR 对象的方法abort 取消当前请求 getAllResponseHeaders 获取响应的所有 http 头 每个 http 头名称和值用冒号分割，并以rn 结束。当 send 方法完成后才可调用该方法。 getResponseHeader 从响应信息中获取指定的 http 头 当 send 方法成功后才可调用该方法。如果服务器返回的文档类型为“text/xml“, 则这句话xmlhttp.getResponseHeader(“Cont
18、ent-Type“);将返回字符串“text/xml“。可以使用 getAllResponseHeaders 方法获取完整的 http 头信息。 setRequestHeader 单独指定请求的某个 http 头 如果已经存在已此名称命名的 http 头，则覆盖之。此方法必须在 open 方法后调用。请求方式GET 请求/JSvar xhr = XHR();xhr.open(“get“,“test.php?qs=truexhr.onreadystatechange = function () if (xhr.readyState=4 ;xhr.send(null);/PHPprint_r($_
19、GET);POST 请求/JSvar xhr = XHR();xhr.open(“post“,“test.php“,true);xhr.onreadystatechange = function () if (xhr.readyState=4 ;/比 GET 请求多了一步xhr.setRequestHeader(“Content-Type“,“application/x-www-form-urlencoded“);/另外 ,数据是通过 send 方法发送的xhr.send(“qs=true/PHPheader(“Cache-Control: no-cache, must-revalidate“);/可以让浏览器不缓存结果print_r($_POST);
