在前端开发中，ajax的重要性不言而喻，所以我开始试着封装自己专属ajax
1.常规封装/* 封装ajax函数 * @param {string}opt.method http连接的方式，包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的 * @param {object}opt.data 发送的参数，格式为对象类型 * @param {function}opt.success ajax发送并接收成功调用的回调函数 *//*1常规封装*/function ajax(opt) { opt = opt || {}; opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式发送数据,只能256KB;POST：用"POST"方式发送数据,可以大到4MB opt.url = opt.url || ""; opt.async = opt.async || true; //同步异步 opt.dataType = opt.dataType || "text"; //所传的数的数据类型 opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默认表单格式 opt.dataType='json' opt.data = opt.data || null; var xmlHttp = getXmlHttp(); //获取XML 对象 var postData = getAjaxParama(opt.data); //data if (opt.contentType === "application/json;charset=utf-8" && opt.dataType === "json") { postData = JSON.stringify(opt.data); //转化为字符串 } if (opt.method === 'POST') { xmlHttp.open(opt.method, opt.url, opt.async); xmlHttp.setRequestHeader('Content-Type', opt.contentType); //而POST请求需要设置请求头，用来传递参数 } else if (opt.method === 'GET') { postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET请求，参数是拼接到url上面； xmlHttp.open(opt.method, opt.url + postData, opt.async); postData = null; //重置参数 } xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { var status = xmlHttp.status; if (status >= 200 && status < 300) { opt.success && opt.success(xmlHttp.responseText); } else { opt.error && opt.error(status); } } }; xmlHttp.send(postData); function getXmlHttp() { var obj = null; //非IE浏览器创建XmlHttpRequest对象 if (window.XMLHttpRequest) obj = new XMLHttpRequest(); //IE浏览器创建XmlHttpRequest对象 if (window.ActiveXObject) { try { obj = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { try { obj = new ActiveXObject("msxml2.XMLHTTP"); } catch (ex) {} } } return obj; } function getAjaxParama(data) { var params = []; for (var key in data) { params.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } return params.join('&'); //添加&字符串 }} 2.自定义封装
/** * [ajax封装ajax函数] * @Author Linada * @DateTime 2017-12-19T16:16:32+0800 * @param {string} opt.method [http连接的方式，包括POST和GET两种方式] * @param {string} opt.url [发送请求的url] * @param {boolean} opt.async [是否为异步请求，true为异步的，false为同步的] * @param {object} opt.data [发送的参数，格式为对象类型] * @param {function} opt.success [ajax发送并接收成功调用的回调函数] */;(function (undefined) { "use strict" var _global; var umeAjax = { ajax: function (opt) { opt = opt || {}; opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式发送数据,只能256KB;POST：用"POST"方式发送数据,可以大到4MB opt.url = opt.url || ""; opt.async = opt.async || true; //同步异步 opt.dataType = opt.dataType || "text"; //所传的数的数据类型 opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默认表单格式 opt.dataType='json' opt.data = opt.data || null; var xmlHttp = getXmlHttp(); //获取XML 对象 var postData = getAjaxParama(opt.data); //data if (opt.contentType === "application/json;charset=utf-8" && opt.dataType === "json") { postData = JSON.stringify(opt.data); //转化为字符串 } if (opt.method === 'POST') { xmlHttp.open(opt.method, opt.url, opt.async); xmlHttp.setRequestHeader('Content-Type', opt.contentType); //而POST请求需要设置请求头，用来传递参数 } else if (opt.method === 'GET') { postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET请求，参数是拼接到url上面； xmlHttp.open(opt.method, opt.url + postData, opt.async); postData = null; //重置参数 } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { var status = xmlHttp.status; if (status >= 200 && status < 300) { opt.success && opt.success(xmlHttp.responseText); } else { opt.error && opt.error(status); } } }; xmlHttp.send(postData); }, } function getXmlHttp() { var obj = null; //非IE浏览器创建XmlHttpRequest对象 if (window.XMLHttpRequest) obj = new XMLHttpRequest(); //IE浏览器创建XmlHttpRequest对象 if (window.ActiveXObject) { try { obj = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { try { obj = new ActiveXObject("msxml2.XMLHTTP"); } catch (ex) { } } } return obj; } function getAjaxParama(data) { var params = []; for (var key in data) { params.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } return params.join('&'); //添加&字符串 } // 最后将插件对象暴露给全局对象 _global = (function () { return this || (0, eval)('this'); }()); if (typeof module !== "undefined" && module.exports) { module.exports = umeAjax; } else if (typeof define === "function" && define.amd) { define(function () { return umeAjax; }); } else { !('umeAjax' in _global) && (_global.umeAjax = umeAjax); }}()); 3.使用
js测试
4.拓展
封装post方式的promise的ajax插件/**promise* 用Promise封装一个post请求的方法*/function postJSON(url, data) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader("Content-type", "application/json;charset=utf-8"); xhr.onreadystatechange = function() { if (this.readyState === 4) { if (this.status === 200) { resolve(JSON.parse(this.responseText), this); //debug_print("ajaxPromise(param) success: " +this.responseText); } else { var resJson = { code: this.status, response: this.response }; reject(resJson, this); } } }; xhr.send(JSON.stringify(data)); });}// 用Promise封装一个get请求的方法,基于ajaxfunction ajaxPromise(param) { return new Promise(function (resolve, reject) { $.ajax({ url: param.url, type: 'get', data: param.data || '', success: function (data) { //console.info(data); debug_print("ajaxPromise(param) success: " + JSON.stringify(data)); resolve(data); }, error: function (error) { //console.info(error); debug_print("ajaxPromise(param) error: " + JSON.stringify(error)); reject(error) } }); });}