XMLHttpRequest的用法

上一篇介绍的是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);                }            }       }    }