簡單 Ajax 函式庫,不需要 jQuery
// 這個簡易的函式庫並沒有 jQuery 特有的完善 Promiss Chain | |
// 但是,這個函式庫可以讓你在不引入龐大的 jQuery 函式庫情況下, | |
// 有一種類似於 jQuery 的方便的網絡操作輔助。 | |
// 提交數據 | |
$post('/json/update_user', { | |
user: 'Jixun' | |
}, function (r){ | |
console.info('Reply From Server:', r); | |
})); | |
// 抓取資源 | |
$get('/json/get_user', function (r){ | |
console.info('Reply From Server:', r); | |
})); | |
// 通用方法 | |
$ajax({ | |
type: 'POST', | |
url: '/get_lucky', | |
done: function (r) { | |
console.info('done!'); | |
}, | |
fail: function () { | |
console.info('ball!'); | |
}, | |
always: function () { | |
console.info('get next lucky number ..'); | |
}, | |
data: { auth: '1$Jixun' }, | |
headers: { | |
'X-Forwarded-For': '1.2.3.4', | |
'X-Real-IP': '4.3.2.1' | |
} | |
}); |
// 简易 Ajax 函数 | |
// MIT License, Jixun.Moe | |
(function (global) { | |
var _export = { | |
ajax: $ajax, | |
post: $post, | |
get: $get | |
}; | |
function foreach (obj, callback) { | |
if (obj) { | |
for (var x in obj) { | |
if (obj.hasOwnProperty(x)) { | |
callback(x, obj[x], obj); | |
} | |
} | |
} | |
} | |
foreach(_export, function (x, _item) { | |
global['$' + x] = _item; | |
}); | |
function isFunction (fn) { | |
return 'function' == typeof fn; | |
} | |
function $ajax (opts) { | |
var xhr = new XMLHttpRequest(); | |
if (!opts.type && opts.data) | |
opts.type = 'POST'; | |
xhr.responseType = opts.dataType || ''; | |
xhr.open(opts.type || 'GET', opts.url); | |
if (opts.type == 'POST' && !(opts.headers && opts.headers.hasOwnProperty('Content-type'))) { | |
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); | |
} | |
foreach(opts.headers, function (headerName, headerValue) { | |
xhr.setRequestHeader(headerName, headerValue); | |
}); | |
var postData; | |
switch(typeof opts.data) { | |
case 'string': | |
postData = [opts.data]; | |
break; | |
case 'object': | |
if (opts.data instanceof Array) { | |
postData = opts.data; | |
} else { | |
postData = []; | |
foreach(opts.data, function (name, value) { | |
postData.push(encodeURIComponent(name) + '=' + encodeURIComponent(value)); | |
}); | |
} | |
break; | |
} | |
if (!isFunction(opts.always)) | |
opts.always = emptyFunction; | |
xhr.onload = function () { | |
var data = tryParseJson(xhr.responseText); | |
if (isFunction(opts.done)) { | |
opts.done(data, xhr); | |
} | |
opts.always(xhr.status, xhr); | |
}; | |
if (opts.hasOwnProperty('timeout')) { | |
xhr.timeout = parseInt(opts.timeout); | |
} | |
xhr.onerror = xhr.ontimeout = function () { | |
if (isFunction(opts.fail)) { | |
opts.fail(xhr.status, xhr); | |
} | |
opts.always(xhr.status, xhr); | |
}; | |
if (isFunction(opts.preSend)) | |
opts.preSend(xhr); | |
xhr.send(postData ? postData.join('&') : ''); | |
} | |
function $post (url, data, success, fail) { | |
$ajax({ | |
url: url, | |
data: data, | |
done: success, | |
fail: fail | |
}); | |
} | |
function $get (url, success, fail) { | |
$ajax({ | |
url: url, | |
done: success, | |
fail: fail | |
}); | |
} | |
function tryParseJson (str) { | |
if ('string' == typeof str && str[0] != '{') { | |
// If there's an error, | |
// roll back to origional string. | |
try { return JSON.parse(str); } | |
catch (err) { } | |
} | |
return str; | |
} | |
function emptyFunction (){} | |
})(window); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment