XMLHttpRequest对象

更新于 2016.04.10

XHR的用法

open方法

第一个调用的方法是open()

xhr.open("get", "example.php", false);

第一个参数－请求的类型，get，post等
第二个参数－请求等url
第三个参数－是否异步发送请求

只能向同一个域中使用相同端口和协议的url发送请求，否则会引发跨域问题

这行代码会请求。但是并不会发送这个请求。发送请求要用到第二个方法send()

send方法

第二个调用的方法是send()

xhr.send(null);

这个方法会发送参数里的数据，如果不需要发送数据，一定要填上null，因为有些浏览器必须要求传入这个参数

XHR响应的相关属性

当服务器接到正确请求后会返回响应，响应的数据会自动填充XHR对象的属性，下面是一些响应的相关属性

responseText －返回的文本
responseXML －返回的XML DOM文档
status －响应的状态
statusText － HTTP状态说明

收到响应后，会检查status属性，如果是200，则表示响应成功，responseText属性内容已就绪。如果status属性是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 －完成，已经接收到全部响应数据，而且已经可以在客户端使用了。

处理异步请求

在调用open()之前指定onreadystatechange事件处理程序

var xhr = XMLHttpRequest();
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);
    }
    }
}