封装一个ajax
April 21, 2018 by jaifire
/* 请求配置说明 { //是否异步 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); } };
发表评论