前端面试 手动实现Ajax

马上就要面试了，Ajax算是基本功了，以前只是粗略看过，现来手搓一波代码，虽然功能简单不过对Ajax也算有了初步的认识。

总共分为五步，其实都是对XMLHttpRequest的再一次封装。

Ajax的其他属性的封装也是类似的，就不深入了，如果想要深入学习可以针对每个属性去看源码的实现。

写的不好的地方希望大佬指点。

function ajax(method, url, async) {
            //1.申明XMLHttpRequest
            let xmlHttp;
            //2.创建XMLHttpRequest
            if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
            else {
                //IE5和IE6那群SB的Window对象没有XMLHttpRequest
                xmlHttp = ActiveXObject("Microsoft.XMLHTTP");
            }
            //3.设置请求的状态改变时执行的函数
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState === 4) {
                      //304 表示请求内容未发生改变，可直接从缓存中读取
                    if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304) {
                        console.log("请求已经完成，响应已经就绪")
                        console.log(xmlHttp.responseText);
                    }
                }
            }
            //4.初始化请求参数，但是还没没没发送请求
            xmlHttp.open(method, url, async);
            //5.biu发送请求，post
            xmlHttp.send(null);
        }
         //调用一波
        ajax("GET", "http://127.0.0.1:8080/user/show?name=ddd", true);

使用Promise实现Ajax：

let Ajax = function() {
    let promise = new Promise(function(resolve, reject) {
        //1.申明XMLHttpRequest
        let xmlHttp;
        //2.创建XMLHttpRequest
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        else {
            //IE5和IE6那群SB的Window对象没有XMLHttpRequest
            xmlHttp = ActiveXObject("Microsoft.XMLHTTP");
        }
        //3.设置请求的状态改变时执行的函数
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4) {
                //304 表示请求内容未发生改变，可直接从缓存中读取
                if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304) {
                    //成功回调
                    resolve(this.response);
                }
                else {
                    //失败回调
                    reject(new Error(this.statusText));
                }
            }
        }
        //4.初始化请求参数，但是还没没没发送请求
        xmlHttp.open(method, url, async);
        //5.biu发送请求，post
        xmlHttp.send(null);
    });
    return promise;
}