XMLHttpRequest的用法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wyallen/article/details/78034985

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