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);
}
}
}
abort方法
在接收到响应之前还可以调用abort()方法来取消异步请求
调用这个方法后，xhr对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对xhr对象进行解引操作。由于内存原因，不建议重用xhr对象。
