古老的 Ajax

206 阅读1分钟

古老的Ajax

Ajax:
    1.创建一个对象:
        let xhr = new XMLHttpRequest();
    2.配置这个对象(调用open()的方法)
        //第一个参数为请求的类型、第二个参数为请求的URL,第三个参数为是否异步发送的布尔值
        xhr.open('GET',`/marvel/api/checkuser.php?username=${user}`,true)
    3.准备接受响应(readystate是对象xhr的一个属性,在这里我们利用事件监听这个属性的状态的改变)
    xhr.onreadystatechange = function() {
        //当readyState发生了变化,会触发该事件。
            xhr.readyState ===0 ===>xhr这个对象刚创建,但是没有调用
            xhr.readyState ===1 ===>对象调用了,但是没有send
            xhr.readyState ===2 ===> 对象调用了send,但是没有返回响应
            xhr.readyState ===3 ===>对象收到了部分响应
            xhr.readyState ===4 ===>收到了全部的响应
        //我们对数值进行判断,如果!=4,就return
        if(xhr.readyState !=4) {
            return;
        }
        //如果xhr这个对象的属性readyState ===4;服务器已经给出了全部的响应。但是我们还需要进一步去判断浏览器的相应结果,也就是响应的状态码。这个状态码放置在xhr.status中,当状态码在[200,300)之间,我们就可以认为其响应成功。
        if(xhr.status >=200 &&xhr.status < 300) {
            //响应成功,我们需要取得响应的数据,放在对象xhr的responseText中.
            alert(xhr.responseText);    //responseText是满足json格式的字符串
        }else{
            //响应失败
        }
    }
    //4.发送请求
    xhr.send(); //调用xhr的send()方法。在括号中不必写入确切值。
    change
【另需要注意的是ajax是不支持后端请求重定向的】