在前端开发中，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请求的方法,基于ajax
function 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)
}
});
});
}