Skip to content

Instantly share code, notes, and snippets.

@JixunMoe JixunMoe/Simple Ajax.js
Last active Sep 4, 2015

Embed
What would you like to do?
簡單 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
You can’t perform that action at this time.