封装完成后,我已吐三升血,在也不用以后一遍一遍的写了!
原生js封装ajax的类库,模仿jQuery,但是没有jQuery那么完善。
首先是执行的格式和参数
ajax({ url: 'data.json',// 请求的路径 data: {a: 1, b: 2, node: JSON.stringify({name: '你好'})}, // 发送的参数 a=1&b=2 dataType: 'json',// 按照指定格式格式化服务器返回的数据 headers: { 'content-type': 'application/x-www-form-urlencoded', zidingyishoubu: 'hello' },// 自定义请求首部 method: 'post',//是指定http method 请求 success: function (data) { console.log('打倒土豪劣绅:', data); },// ajax成功时执行的函数 error: function (err) { console.error(err); },// ajax失败时执行的函数 async: true,//是否为异步请求 cache: false// 是否缓存该请求 });
ajax封装代码
(function () {
var ajax = function (options) {
//先判断一下参数格式类型
if (!tools.getType(options, 'Object')) {
console.log(typeof options)
throw new TypeError('参数类型错误')
};
var xhr = new tools.getXHR();
var isGET = /^(get|head|delete)/ig.test(options.method);
//判断是否有参数,有的话就的格式化参数
if (options.data) {
options.data = tools.encodeToURIString(options.data, isGET)
};
//判断是否是get请求,是的话就将data拼接到url的后面
if (isGET) {
options.url = tools.padStringToURL(options.url, options.data)
};
//判断是否需要缓存
if (options.cache === false) {
var random = Math.random();
options.url = tools.padStringToURL(options.url, '_=' + random);
};
xhr.open(options.method, options.url, options.async);
//设置请求首部
if (xhr.setRequestHeader && tools.getType(options.headers, 'Object')) {
for (var cur in options.headers) {
if (!options.headers.hasOwnProperty(cur))continue;
xhr.setRequestHeader(cur, options.headers[cur]);
}
};
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (/^2\d{2}/.test(xhr.status)) {
var responseText = xhr.responseText;
if (responseText && /json/ig.test(options.dataType)) {
try {
responseText = tools.JSONParse(responseText);
} catch (e) {
options.error(e);
return;
}
}
options.success(responseText);
} else if (/^(4|5)\d{2}$/g.test(xhr.status)) {
options.error(xhr.status);
}
}
}
xhr.send(options.data);
return xhr;
};
/*专业打辅助的工具*/
var tools = {
/**
*
* @param data 检测的数据
* @param type 检测的类型
* @returns {boolean}
*/
getType: function (data, type) {
return Object.prototype.toString.call(data) === '[object ' + type + ']';
},
/**
* 创建ajax对象
* @returns {*}
*/
getXHR: function () {
var list = [function () {
return new XMLHttpRequest()
}, function () {
return new ActiveXObject('Microsoft.XMLHTTP');
}];
var xhr = null;
while (xhr = list.shift()) {
try {
xhr();
break;
} catch (e) {
xhr = null;
continue;
}
}
if (xhr === null) {
throw new Error('当前浏览器不支持ajax功能')
}
return xhr();
},
/**
* 把一个对象格式化为URIString格式
* @param data 需要格式化的参数
* @param encodeZH 请求的类型
* @returns {string} 格式化完毕得到的字符串
*/
encodeToURIString: function (data, encodeZH) {
if (!data) {
return '';
}
;
if (tools.getType(data, 'String')) {
return data;
}
var arr = [];
for (var cur in data) {
if (!data.hasOwnProperty(cur))continue;
if (encodeZH) {
arr.push(encodeURIComponent(cur) + '=' + encodeURIComponent(data[cur]));
} else {
arr.push(cur + '=' + data[cur]);
}
}
return arr.join('&');
},
/**
*
* @param url 地址
* @param param 需要拼接的参数
* @returns {string} 拼接后的字符串
*/
padStringToURL: function (url, param) {
if (!param) {
return url;
}
var data = tools.encodeToURIString(param);
var reg = /\?/g;
return reg.test(url) ? (url + '&' + data) : (url + '?' + data)
},
/**
* json字符串转json对象
* @param jsonString
* @returns {*}
* @constructor
*/
JSONParse: function (jsonString) {
if (tools.getType(jsonString, 'Object')) {
return jsonString;
}
if (window.JSON) {
return JSON.parse(jsonString)
}
return eval('(' + jsonString + ')');
}
};
this.ajax = ajax;//因为自执行函数中this相当于window,所以可以写成window.ajax= ajax
})()
需要沉淀:
1、编程思想。
2、封装格式,代码封装的很清晰
3、考虑的很全面,每一个参数的不同情况的处理和逻辑判断
文章评论