Вход

Просмотр полной версии : Fast-AJAX - быстрая библа для аякса


KosBeg
18.06.2015, 13:43
Всем привет!
Говорю сразу - мне пофиг нужна ли она кому-то или нет, я писал ее для себя :yes:
Кому нужно - тот возьмет :D
Я прошу вас проветить КАЧЕСТВО КОДА и исправить вожможные проблемы ;)
(function() {
'use strict';

var fast_ajax, xhr, setheader;

fast_ajax = function(opt) {

// Стандартные настройки
opt.url !== undefined ? opt.url = opt.url : opt.type = location.href;
opt.type !== undefined ? opt.type = opt.type.toUpperCase() : opt.type = 'GET';
opt.data = typeof opt.data === 'object' ? opt.data : null;
opt.timeout = typeof opt.timeout === 'number' ? opt.timeout : 0;
opt.async = opt.async !== false ? true : false;

// Настройки-Колбеки
opt.ontimeout = typeof opt.ontimeout === 'function' ? opt.ontimeout : function(data) { alert(data) };
opt.success = typeof opt.success === 'function' ? opt.success : function(data) { alert(data) };
opt.onerror = typeof opt.onerror === 'function' ? opt.onerror : function(data) { alert(data) };

xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

// Хедеры которые ставятся
setheader = function() {
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('AJAX-Engine', 'Fast-AJAX');
};

// В зависимости от запроса подставляем opt.data в get параметры (page.php?_param=data), или POST
switch (opt.type) {
case 'GET':
xhr.open('GET', opt.url + "?" + fast_ajax.toQueryString(opt.data), opt.async);
setheader();
xhr.send(null);
break;
default:
xhr.open(opt.type, opt.url, opt.async);
setheader();
xhr.send(fast_ajax.toQueryString(opt.data));
};

// если все хорошо =)
xhr.onreadystatechange = function() {
if(xhr.readyState != 4) return;
if (xhr.status >= 200 && xhr.status < 400) {
opt.success(xhr.responseText);
} else {
console.error( 'ERROR: ' + (xhr.status ? xhr.statusText : 'the request fails') );
return;
};
};

// ошибка =(
xhr.onerror = function(e) {
opt.onerror(e);
};
};

// здесь будут хранится все доп. методы, PS: сокращение pl = plugin
fast_ajax.pl = fast_ajax.prototype = {};

// превращение такого {_ajax: 'kosbeg', param: 'data'} в такое _ajax=kosbeger&param=data
fast_ajax.toQueryString = fast_ajax.pl.toQueryString = function(data) {
var query = '', i,
push = function (key, value) {
query += encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';
}, key, value;

for (key in data) {
if (!Object.hasOwnProperty.call(data, key)) {
continue;
}

value = data[key];

if ((typeof (data) === "object") && (data instanceof Array)) {
for (i = 0; i < value.length; i++) {
push(key, value[i]);
};
} else {
push(key, data[key]);
};
};

return query.replace(/&$/, '').replace(/%20/g, '+');
};

// кросраузерный парсинг JSON, по возможности используется нативный
fast_ajax.parseJSON = fast_ajax.pl.parseJSON = function(data) {
if (typeof (data) !== "string" || !data || data === '') {
return null;
}

data = data.replace(/^\s+/, '');
data = data.replace(/\s+$/, '');

if (window.JSON && window.JSON.parse) {
return window.JSON.parse(data);
}

var checkChars = /^[\],:{}\s]*$/,
checkEscape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
checkTokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
checkBraces = /(?:^|:|,)(?:\s*\[)+/g;

if (checkChars.test(data.replace(checkEscape, "@").replace(checkTokens, "]").replace(checkBraces, ""))) {
return (new Function( "return " + data ))();
}
};

// выносим переменную за границы замыкания
window.fast_ajax = window.$a = fast_ajax;
})();

// запрос на Fast-AJAX
$a({
url: 'ajax.php',
type: 'pOsT',
data: {_ajax: 'kosbeg', param: 'data'},
success: function(data){
data = $a.parseJSON(data);
document.querySelector('#content_pure').innerHTML = data.page;
}
});

// запрос на jQuery
$.ajax({
url: 'ajax.php',
type: 'pOsT',
data: {_ajax: 'kosbeg', param: 'data'},
success: function(data){
data = $.parseJSON(data);
$("#content_jq").text(data.page);
}
});

PS: это только заготовка кода =)
Я сюда еще добавлю кросдоменный аякс, кеширование при помощи Mozilla LocalForage, и нормальный таймаут 8)

nerv_
18.06.2015, 14:14
Я прошу вас проветить КАЧЕСТВО КОДА
Мои глаза :D

быстрая библа для аякса
чем быстрая то?)

рони
18.06.2015, 14:15
type: 'pOsT',
это специально для
opt.type.toUpperCase() ?
:)

kobezzza
18.06.2015, 14:15
fetch api

nerv_
18.06.2015, 14:16
fetch api
чё ты делаешь? Это кульминация была, до которой можно было 2-3 страницы срача написать :D

KosBeg
18.06.2015, 14:18
чем быстрая то?)
не спрашивай, главное что на чистом JS, а не на jQuery :write:
Мои глаза :D
Мои тоже :D
type: 'pOsT',
это специально для
opt.type.toUpperCase()
да! просто бывает что я пишу 'post' вместо 'POST'...
fetch api
мне не нрава!..
jQuery.AJAX API самое то для меня :yes:

KosBeg
18.06.2015, 14:20
Так, ребята, у Вас сразу шутки(как всегда :haha:)
А у меня конкретный вопрос ;)

nerv_
18.06.2015, 14:23
jQuery.AJAX API самое то для меня
знаешь ли ты что, твой код не реализует jQuery.AJAX API? :)

KosBeg
18.06.2015, 14:26
знаешь ли ты что, твой код не реализует jQuery.AJAX API? :)
а я и не знал :lol:
в jQuery.AJAX API есть Deferred/Promise
я в курсе, но для меня это самое то!
Вопрос - как его еще улучшить?)

nerv_
18.06.2015, 14:31
Вопрос - как его еше улучшить?)
еще? разве
Мои глаза :D
не достаточно?)

Научи json отправлять :)

KosBeg
18.06.2015, 14:34
Научи json отправлять :)
тоясть сам стиль кода нормальный?
// Стандартные настройки
opt.url !== undefined ? opt.url = opt.url : opt.type = location.href;
opt.type !== undefined ? opt.type = opt.type.toUpperCase() : opt.type = 'GET';
opt.data = typeof opt.data === 'object' ? opt.data : null;
opt.timeout = typeof opt.timeout === 'number' ? opt.timeout : 0;
opt.async = opt.async !== false ? true : false;

// Настройки-Колбеки
opt.ontimeout = typeof opt.ontimeout === 'function' ? opt.ontimeout : function(data) { alert(data) };
opt.success = typeof opt.success === 'function' ? opt.success : function(data) { alert(data) };
opt.onerror = typeof opt.onerror === 'function' ? opt.onerror : function(data) { alert(data) };

xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
эти строчки не выглядят очень глупо и нагружено?

nerv_
18.06.2015, 14:38
эти строчки не выглядят очень глупо и нагружено?
выглядят. Один из способов избежать этого - использовать дефолтный объект с опциями, который будет расширяеться переданным объектом

KosBeg
18.06.2015, 14:43
типа
$.extend(new_param, defolt_param) ?
Тут новые параметры дополняются дефолтными
Тольно надо будет написать extend на чистом JS, а не на jQuery =)

KosBeg
18.06.2015, 14:47
function extend() {
var a = arguments, target = a[0] || {}, i = 1, l = a.length, deep = false, options;

if (typeof target === 'boolean') {
deep = target;
target = a[1] || {};
i = 2;
}

if (typeof target !== 'object' && !isFunction(target)) target = {};

for (; i < l; ++i) {
if ((options = a[i]) != null) {
for (var name in options) {
var src = target[name], copy = options[name];

if (target === copy) continue;

if (deep && copy && typeof copy === 'object' && !copy.nodeType) {
target[name] = extend(deep, src || (copy.length != null ? [] : {}), copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}

return target;
}
выдергнул с ВК :lol:

Rise
19.06.2015, 05:55
выдергнул с ВК :lol:
Так по короче будет :)
function extend(a, b) {
for (var k in b) a[k] = b[k];
return a;
}
var defaultOpt = {
url: '',
type: 'GET'
};

(function(newOpt) {
newOpt = extend(extend({}, defaultOpt), newOpt || {});
console.log(newOpt);
})({url: 'new'});

KosBeg
19.06.2015, 10:06
Так по короче будет :)
спасибо, но в ВК выдергнул чисто для примера ;)
Я его уже переписал, но в Вас еще круче получилось :dance:

KosBeg
19.06.2015, 13:35
вот тебе документ, изучай :D
Ты/Вы дали ссылку на jQuery 1.11.3
а я изучаю jQuery 2.1.4.js ;)
кстати, там я тоже часто зависаю :D

kobezzza
20.06.2015, 07:27
Object.assign (https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

KosBeg
20.06.2015, 11:20
Object.assign
это вместо extend()? ;)

kobezzza
20.06.2015, 11:56
это вместо extend()? ;)

В твоём случае - да. Лучше юзать нативные функции STD и полифилить, чем велосипедить без необходимости.

KosBeg
20.06.2015, 15:06
Лучше юзать нативные функции и полифилить
намного лучше! :yes:
по этому Я НЕ ЛЮБЛЮ ФРЕЙВОРКИ!!!! :p

kobezzza
20.06.2015, 16:50
по этому Я НЕ ЛЮБЛЮ ФРЕЙВОРКИ!!!!

Просто ты ещё зелёный, попишешь лет 5-10 и осознание придёт, все через это проходят - это нормально.

KosBeg
20.06.2015, 21:32
Просто ты ещё зелёный
естественно! :victory:
1) с JavaScript работаю только 3 месяца
2) мне 14 лет...
UPD: но jQuery(и другие фреймворки) всеравно не люблю!