封装一个ajax

/*
请求配置说明
{
    //是否异步
    async: true,
    //提交的数据
    data:null,
    //#############################Content_Type说明#############################
    //发送数据的方式
    //text/plain:默认是text/plain 服务器通过获取原始数据流的方式来进行解析,即请求数据以request payload的形式来解析
    //application/x-www-form-urlencoded:以form data来解析
    //multipart/form-data:文件上传
    ContentType: 'application/x-www-form-urlencoded',
    //接收数据的方式 "text" or "json"
    responseType: 'text',
    //请求成功的回调
    success: null,
    //请求失败的回调
    fail: null
}
*/
let config = {
    //是否异步
    async: true,
    //提交的数据
    data: null,
    //#############################Content_Type说明#############################
    //发送数据的方式
    //text/plain:默认是text/plain 服务器通过获取原始数据流的方式来进行解析,即请求数据以request payload的形式来解析
    //application/x-www-form-urlencoded:以form data来解析
    //multipart/form-data:文件上传
    ContentType: 'application/x-www-form-urlencoded',
    //接收数据的方式 "text" or "json"
    responseType: 'text',
    //请求成功的回调
    success: null,
    //请求失败的回调
    fail: null
};

let AjaxRequest = {
    //get请求
    get: function (url, params) {
        params = Object.assign(config, params);
        let query_data = AjaxRequest.build_http_query(params.data);
        if (query_data) {
            let join = -1 === url.search(/\?/) ? '?' : '&';
            url += join + query_data;
        }
        let xhr = AjaxRequest.getXhr('GET', url, params);
        AjaxRequest.xhrBindCallBack(xhr, params.success, params.fail);
        xhr.send();
    },

    //post请求
    post: function (url, params) {
        params = Object.assign(config, params);
        let xhr = AjaxRequest.getXhr('POST', url, params);
        AjaxRequest.xhrBindCallBack(xhr, params.success, params.fail);
        console.log(params.data);
        xhr.send(AjaxRequest.build_http_query(params.data));
    },

    //回调函数绑定
    xhrBindCallBack: function (xhr, success, fail) {
        xhr.onreadystatechange = function () {
            if (4 === this.readyState) {
                if ('function' === typeof success) {
                    success(this.response);
                }
            } else {
                if ('function' === typeof fail) {
                    fail(this.response);
                }
            }
        };
    },

    //取得一个ajax实例
    getXhr: function (type, url, params) {
        let xhr = new XMLHttpRequest();
        xhr.open(type, url, params.async);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");  //告诉服务器这是ajax请求
        xhr.setRequestHeader("Content-Type", params.ContentType);
        xhr.responseType = params.responseType;
        return xhr;
    },

    //对象转成request字符串
    build_http_query: function (obj) {
        if (typeof obj !== 'object') {
            return null;
        }
        let query = '';
        for (let key in obj) {
            if (undefined === obj[key]) {
                obj[key] = '';
            }
            query += key + '=' + obj[key] + '&';
        }
        return query.substr(0, query.length - 1);
    }
};


发表评论

我不怕遇到练习过10000种腿法的对手,但害怕遇到只将一种腿法练习10000次的强敌。 —李小龙