Ajax ajax原生-xhr对象的属性和方法、xhr对象的创建-蒲公英云

Ajax ajax原生-xhr对象的属性和方法、xhr对象的创建

Ajax模块在处理网络请求时包括以下四个步骤
    创建Xhr对象
    构建Xhr对象的属性和方法
    发出HTTP请求
    通过Xhr对象的方法接收服务器回传的数据
创建xhr对象
    var xhr=new XMLHttpRequest();
xhr对象属性/方法
    onreadystatechange
        指向一个回调函数，当页面加载状态发生改变时调用
            xhr.onreadystatechange=function(){};
        作用:监听请求是否发送成功
    readyState
        用一个整数和对应常量来表示XMLHttpRequest请求当前所处状态，一般会在onreadystatechange的回调函数中，通过
        readyState属性的值来执行不同状态的函数
            具体值见下图
            0 UNSENT,表示请求未发送
            1 OPENED,请求准备发还未发
            2 HEADERS_RECEIVED,请求已发送，但后台未收到
            3 LOADING，后台正在接受，还未接收完成
            4 DONE，表示已接受或本次接收失败
    status
        表示后台接收到请求后，返回数据时，前端接收状态码
        200访问正常
            其他具体值见下图
    statusText
        表示后台接收到请求后，返回数据时，前端接收状态码对应的
        常量字符
         200对应OK
             其他具体值看下图
    responseText
        后台返回的json字符串数据,若要转成js类型对象，需要使用
        JSON.parse(数据);
    open()
        设置请求发往某处，只是设置，不是发送
            xhr.open('请求类型','url地址',true/false);
                true为异步
    setRequestHeader()

在这里插入图片描述

send()
    用于实际发出的HTTP请求
        xhr.send(info);
            get请求参数为null
    设置请求发送后等待响应的时间
        xhr.timeout=毫秒数;
         0则表示没有时间限制
    设置超时后的回调函数
        xhr.ontimeout=function(){};
            当超出timeout设置的时间后执行
    上传进度回调
    xhr.upload.progress=function(){};
    取消当前ajax发送:
    xhr.abort();  //使ajax请求到未初始化的状态

status和statusText属性值:

在这里插入图片描述

创建xhr对象监听代码示例:

<script>
        var btn=document.querySelector('button');
        btn.onclick=function()
        { 
            //创建xhr对象
            var xhr=new XMLHttpRequest();
            //监听请求是否成功
            xhr.onreadystatechange=function()
            { 
                //通过readyState属性的值，判断当前请求状态
                if(xhr.readyState==4)
                { 
                    console.log("已接受");
                    //通过status属性来判断前台接收状态
                    if(xhr.status==200)
                    { 
                        console.log(xhr.statusText);
                        //此时表明真正接收到了数据
                        console.log(xhr.responseText);
                        console.log(JSON.parse(xhr.responseText));
                    }
                }
            };
        }
    </script>