js原生ajax封装(第一版)
说明: ajax代码封装不知道这是第几次亲手写了,但那个时候还在为IE7,IE8做恶心的兼容处理,现在前端快速发展,浏览器更新迭代也是很快,所以我个人觉得没有必要再去写那些恶心的代码,怎么简单怎么写,就是我想要的写代码方式,所以下面是我觉得比较满意的一次简单的封装了ajax请求方法(参数部分没有做太多的逻辑判断)。后续打算再完善
(function(win){
var myajax = function(opts) {
opts = opts || {};
// 默认参数设置
var settings = {
url: 'test.txt1',
type: 'GET',
async: true,
data: null
};
// 简单的对象属性扩展
function extend(source, target) {
if (!source) return;
if (arguments.length === 1) return source;
for (var attr in target) {
source[attr] = target[attr];
}
return source;
}
extend(settings, opts);
// 创建xhr对象(IE已死不做兼容性处理)
var xhr = new XMLHttpRequest();
// ajax请求成功后的回调方法
var fnSucc = function(obj) {
console.log('obj.status:' + obj.status);
};
// ajax请求失败后的回调方法
var fnError = function(obj) {
console.log('obj.status:' + obj.status);
};
// 注册事件监听
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
fnSucc(xhr);
} else {
fnError(xhr);
}
}
};
// 建立请求连接
xhr.open(settings.type, settings.url, settings.async);
// 请求发送
xhr.send(settings.data);
return {
// 请求成功后的回调方法
done: function(f) {
fnSucc = f || fnSucc;
},
// 请求成功和请求失败执行的方法
then: function(f1, f2) {
fnSucc = f1 || fnSucc;
fnError = f2 || fnError;
}
};
};
win.myajax = myajax;
})(window);
// 调用方式说明:
1.当执行myajax方法时,如果只调用done方法那么执行的是成功后的回调,如果
调用then方法时,当只传人一个方法时默认执行的也是成功的回调,如果传人两个参数
则第一个参数是成功时的回调,第二个参数是失败时的回调*/
/*myajax().done(function(obj){
console.log('成功执行到我....');
console.dir(obj);
});*/
myajax().then(function(obj){
console.log('成功执行到我....');
console.dir(obj);
}, function(obj){
console.log('进入到错误的方法...');
console.dir(obj);
});

浙公网安备 33010602011771号