原生javascript封装ajax，promise封装ajax

封装分为三部分，

首先封装状态码，url，type，data，datatype，async，success获取成功的后台数据，error获取失败的状态码

然后封装一个小方法，把调用时输入的对象格式的data转换为url格式的数据，例name=lily&age=20

然后封装xmlhttprequest对象

function myAjax(options) {
    var url = options.url;
    var type = "GET" || options.type.toUpperCase();
    var data = Boj(options.data) || {};
    var dataType = options.dataType;
    var async = options.async || true;

    function Boj(data) {
        var arr = [];
        for (var i in data) {
            arr.push(i + "=" + data[i])
        }
        return arr.join("&")
    }
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("microsoft.XMLHTTP");
    }
    if (type == "GET") {
        xmlhttp.open('GET', url + "?" + data, async);
        xmlhttp.send();
    } else {
        xmlhttp.open('POST', url, async);
        xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(data);
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                options.success(JSON.parse(xmlhttp.responseText))
            } else {
                options.error(xmlhttp.status)
            }
        }
    }
}

使用promise封装ajax、

 //promise封装ajax
        function ajax(type, url, async) {
            return new Promise((resolve, reject) => {
                // 创建Ajax对象
                let xml = new XMLHttpRequest();
                // 设置提交方式
                xml.open(type, url, async)
                    // 设置头部信心
                xml.setRequestHeader('content-type', "appliction/x-www-form-urlencoded");
                // 发送
                xml.send();
                // 响应处理函数
                xml.onreadystatechange = function() {
                    if (xml.readystate == 4) {
                        if (xml.status == 200) {
                            resolve(xml.responseText);
                        } else {
                            reject(new Error(xml.status))
                        }
                    }
                }
            })
        }
        ajax('get', "test.json", true).then(res => {
            console.log(res)
        }).catch(value => {
            console.log(value);
        })