XMLHttpRequest对象
IE7+,FireFox,Chrome,Opera,Safari创建XHR对象
|
1 |
var xhr=new XMLHttpRequest(); |
创建XHR对象的兼容性写法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function createXHR(){ if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject!="undefined"){ if(typeof arguments.callee.activeXString!="string"){ var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i,len; for(i=0,len=versions.length;i<len;i++){ try{ new ActiveXObject(versions[i]); arguments.callee.activeXString=versions[i]; break; }catch(ex){ } } } return new ActiveXObject(arguments.callee.activeXString); }else{ throw new Error("NO XHR object available"); } } var xhr=new createXHR(); |
XHR用法
发送同步请求
使用 XHR 时，首先要调用 open() 方法，传递三个参数：
- 要发送的请求类型（ get , post 等）
- 请求的 url
- 是否异步发送
要发送特定的请求，必需像下面这样调用 send() 方法
|
1 2 |
xhr.open("get","example.php",false); xhr.send(null); |
这里 send() 方法接收一个参数，作为请求主体发送的数据。如果不需要通过请求主体发送数据，这里必须传入 null ，因为这个参数对有些浏览器来说是必需的。调用 send() 之后，请求就会被分派到服务器。
由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应之后，相应的数据会自动填充XHR对象的属性，相关的属性简介如下：
- responseText: 作为响应主体被返回的文本。
- responseXML: 如果响应的内容类型是 “text/xml”或”application/xml”，这个属性中将保存包含着相应数据的XML DOM文档。
- status: 响应的HTTP状态。
- statusText: HTTP状态的说明。
接受响应之后，第一步是检查 status 属性，以确定响应已经成功返回。状态码：
- 200 表示成功
- 304 表示请求的资源并没有修改，可以直接使用浏览器中缓存的版本，响应也是有效的
像下面这样检查上述这两种状态码的状态：
|
1 2 3 4 5 6 7 8 |
xhr.open("get","example.txt",false); xhr.send(null); if((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){ alert(xhr.responseText); }else{ alert("Request was unsuccessful: " + xhr.status); } |
注意：无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中；而对于非 XML 数据而言， responseXML 属性的值将为 null。
发送异步请求
向前面这样发送同步请求当然没问题，但多数情况下，我们还是要发送异步请求，才能让 JavaScript 继续执行而不必等待响应。此时，可以检测 XHR 对象的 readyState 属性，该属性表示请求/响应过程中的当前活动阶段。这个属性可取的值如下：
- 0：未初始化。尚未调用 open() 方法。
- 1：启动。已经调用 open() 方法，但尚未调用 send() 方法。
- 2：发送。已经调用 send() 方法，但尚未接收响应。
- 3：接收。已经接收到部分响应数据。
- 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
只要 readyState 属性的值由一个值变为另一个值，都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后的 readyState 的值，通常，我们只对 readyState 值为 4 的阶段感兴趣，因为这时所有的数据都已经就绪。不过，必须在调用 open() 之前指定 onreadyState 事件处理程序才能确保跨浏览器兼容性。例子如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var xhr = createXHR(); xhr.onreadyStatechange = function(){ if(xhr.readyState == 4){ ifcrayon-sy">.readyState == 4){ if1.1 -->
创建XHR对象的兼容性写法
XHR用法发送同步请求使用 XHR 时，首先要调用 open() 方法，传递三个参数：
要发送特定的请求，必需像下面这样调用 send() 方法
这里 send() 方法接收一个参数，作为请求主体发送的数据。如果不需要通过请求主体发送数据，这里必须传入 null ，因为这个参数对有些浏览器来说是必需的。调用 send() 之后，请求就会被分派到服务器。
接受响应之后，第一步是检查 status 属性，以确定响应已经成功返回。状态码：
像下面这样检查上述这两种状态码的状态：
注意：无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中；而对于非 XML 数据而言， responseXML 属性的值将为 null。 发送异步请求向前面这样发送同步请求当然没问题，但多数情况下，我们还是要发送异步请求，才能让 JavaScript 继续执行而不必等待响应。此时，可以检测 XHR 对象的 readyState 属性，该属性表示请求/响应过程中的当前活动阶段。这个属性可取的值如下：
只要 readyState 属性的值由一个值变为另一个值，都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后的 readyState 的值，通常，我们只对 readyState 值为 4 的阶段感兴趣，因为这时所有的数据都已经就绪。不过，必须在调用 open() 之前指定 onreadyState 事件处理程序才能确保跨浏览器兼容性。例子如下：
|
