上一篇介绍的是XHR的创建,这一篇接着讲XHR的使用。
在使用XHR对象之前,我们首先需要熟悉XHR对象的属性和方法。
查看XHR属性知道XHR一共有5种状态,在使用XHR对象时,要调用的第一个方法是open()。函数主要接收的是三个参数,要发送的请求的类型,请求的url和表示是否异步发送请求的布尔值。
需要说明的是调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。(只能向同一个域中使用相同端口和协议的URL发送请求。如果URL和启动请求的页面有任何差别,都会引发安全错误。)
在收到响应后,响应的数据会自动填充XHR对象的属性,包括responseText,responseXML,Status,statusText.
在接收到响应后,第一步是检查status属性,以确定响应已经成功返回(一般来说。可以将HTTP状态码为200作为成功的标志)。此时 responseText属性的内容已经就绪,而且在内容类型正确的情况下,responseXML也应该可以访问了。此外,状态码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;当然,也意味着响应是有效的。为确保接收到适当的响应,应该像下面这样检查上述两种状态代码:
if((xhr.status >= 200 && xhr.status <300) || xhr.status ==400){
alert(xhr.responseText);
}else{
alert("Resquest was unsuccessful: "+xhr.status);
}
下面这段代码就是一次完整的XHR使用过程。注意方法的顺序:
1:必须在调用open()前指定onreadystatechange事件处理程序才能确保 跨浏览器兼容性。
2:必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()
var iCount = window.setInterval("qrc()",1000);
function qrc(){
//创建ajax引擎.
if(window.ActiveXObject){
// window.alert("ie");
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}else{
//别的浏览器
http_request=new XMLHttpRequest();
}
//如果ajax引擎创建ok
if(http_request){
var url = "http://127.0.0.1/shangcheng/admin.php/Admin/Login/weiBind";
http_request.onreadystatechange=qrcLog;
http_request.open("POST",url,true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(null);
}
}
function qrcLog(){
//成功返回
if(http_request.readyState==4){
if(http_request.status==200){
var res=eval("("+http_request.responseText+")");
//alert(res['src']);
if(res['flag']==0){
//alert('尚未绑定');
$("#qrcimg").attr("src",res['src']);
document.getElementById('bind').style.display='';
}else {
document.getElementById('bindok').innerText = res['src'];
document.getElementById('bind').style.display='none';
clearInterval(iCount);
}
}
}
}