Ajax函数的封装

Ajax 函数的封装

封装一个ajax 函数，每次调用ajax函数的时候只需要传递一个对象，对象中包含请求类型、请求地址、要传递的参数、content-type等等；当没有传递某些参数的时候，将使用某些默认值（函数中自定义默写默认值）。
具体的函数封装如下：

function Ajax(obj) {
    // 设置默认值
    var defaults = {
        type: 'get',
        url: '',
        data: {},
        contentType: 'application/x-www-form-urlencoded',
        success: function() {},
        error: function() {}
    };
    // Object.assign实现覆盖  将obj的属性覆盖defaults的属性
    // 第一个参数是被覆盖对象，第二个参数是要覆盖的对象
    Object.assign(defaults, obj); // Object会影响原对象无需接受返回值
    // 创建ajax对象
    var xhr = new XMLHttpRequest();
    // 对传递的参数数据进行遍历
    var param = '';
    for (var i in defaults.data) {
        param += i + '=' + defaults.data[i] + '&';
    }
    // 对参数进行处理（除掉最后一个 &）
    param = param.substr(0, param.length - 1);
    // 对请求类型进行判断
    if (defaults.type == 'get') {
        defaults.url = defaults.url + '?' + param;
    }
    // 配置ajax
    xhr.open(defaults.type, defaults.url);
    if (defaults.type == 'post') {
        // 设置请求头
        xhr.setRequestHeader('content-type', defaults.contentType);
        // 判断用户请求参数格式
        if (defaults.contentType == 'application/json') {
            xhr.send(JSON.stringify(defaults.data));
        } else {
            xhr.send(param);
        }
    } else {
        // 发送请求
        xhr.send();
    }
    // 监听onload事件
    xhr.onload = function() {
        // 获取响应头中的数据  参数为响应头中属性名称
        let responseText = xhr.responseText;
        let contenttype = xhr.getResponseHeader('content-type');
        if (contenttype.includes('application/json')) {
            // 将json字符串转化为json对象
            responseText = JSON.parse(responseText);
        }
        // console.log(xhr.responseText);
        // 判断http状态码
        if (xhr.status == 200) {
            defaults.success(responseText, xhr);
        } else {
            // 当错发发生时触发
            defaults.error(responseText, xhr);
        }
    }
}