XHR的用法

来源:互联网 发布:淘宝联盟如何推广 编辑:程序博客网 时间:2024/06/06 00:25

使用XHR对象时,要调用的第一个方法是open()。方法接收3个参数:

  1. 发送请求的类型(“get”、”post”等)
  2. 请求的URL
  3. 是否发送异步请求的布尔值

    例:xhr.open(“get”,”example.php”,false);
    例子发送一个针对examp.php的GET请求(URL相对于执行代码的当前页面(当然也可以使用绝对路径),调用open()方法并不会真正发送请求,而是启动一个请求以备发送)。
    注意只能向同一个域中使用相同端口和协议的URL发送请求,不然会引发安全错误。

当要发送特定的请求,需要调用send()方法:
xhr.open(“get”,”example.php”,false);
xhr.send(null);

send()方法接受一个参数,即要作为请求主体发送的数据。
当收到服务器的响应之后,响应数据会自动填充XHR对象的属性:

  • responseText:作为响应主体被返回的文本
  • responseXML:如果相应的内容类型是”text/xml”或”application/xml”,这个属性中将会保存着响应数据的XML DOM文档
  • status:相应的HTTP状态
  • statusText:HTTP状态的说明

接受到响应之后,第一步检查status属性,为200则表明成功,此时responseText已经准备就绪;为304表明请求资源未被修改,可以直接使用浏览器中的缓存版本。

if((xhr.status>200&&xhr.status<300)||xhr.status == 304){    alert(xhr.responseText);}else{    alert("Request was unsuccessful : "+xhr.status);}

以上发送的是同步请求,而大多数时候我们发送的是异步请求,此时检查XHR对象的readyState属性,其值如下所示:

  • 0:未初始化。尚未调用open()方法
  • 1:启动。调用open()方法但是未调用send()方法
  • 2:发送。已经调用send()方法,但尚未收到响应
  • 3:接收。已经接收到部分响应数据
  • 4:完成。已经收到全部响应数据并且已经可以再客户端使用
    只要readyState属性由一个值变为另一个值,就会触发一次readystatechange事件。我们可以在调用open()之前指定onreadystatechange事件保证跨浏览器兼容性:
var xhr = createXHR();xhr.onreadystatechange = function(){    if(xhr.readyState == 4){        if((xhr.status>200&&xhr.status<300)||xhr.status == 304){            alert(xhr.responseText);        }else{            alert("Request was unsuccessful : "+xhr.status);        }    }};xhr.open("get","example.php",false);xhr.send(null);

在接收到响应之前还可以调用abort()方法取消异步请求:
xhr.abort();

0 0