欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

XMLHttpRequest的用法

程序员文章站 2022-06-10 19:14:31
...
上一篇介绍的是XHR的创建,这一篇接着讲XHR的使用。
在使用XHR对象之前,我们首先需要熟悉XHR对象的属性和方法。

XMLHttpRequest的用法

XMLHttpRequest的用法

查看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);
                }
            }
       }
    }
相关标签: xmlhttprequest