$ cat ~/articles/79 _

封装一个ajax

作者:jaifire 2018-04-21 16:03 1102 阅读
/*
请求配置说明
{
    //是否异步
    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);     } };