VPF::весь ajax в одном флаконе - Форум программистов

ksnk

Дата 6.7.2015, 16:34 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Внезапно подумалось, что в приложении скапливается слишком много однотипного кода для обработки ajax - запросов. Код однотипный, но все таки разный smile

Придумался такая вот единая функция обработки ответа ajax.

Пусть наш ajax обработчик выдает что-то вроде такого

Код


[
'console|log'=>'some debug string',
'location|reload'=>1,
'location'=>'reload',
'location|assing'=>'http://google.com',

'.selector|removeAttr'=>'disabled',
'.selector|attr|disabled'=>'disabled',
'.selector|css|width'=>'125px',
'.selector|css|display'=>'none',
'.selector|css'=>['position'=>'absolute','top'=>0],
'.selector|slideDown'=>'1000',
'.selector|slideUp'=>'1000',
'.selector|addClass'=>'hello',
'.selector|removeClass'=>'hello',
'.selector|js'=>'$(this).stop(true,true ).slideUp(1000).slideDown(3000)',
]

php -образ перед json-кодированием. Тогда вполне можно уложить практически всю обработку в одну функцию.

Требуемые действия кодируются в имени параметра, через символ `|`. Первая позиция - либо элемент объекта window, либо document, либо селектор jQuery для поиска dom-элемента. Селектор ищется в 2 этапа, сначала в контексте элемента, вызвавшего запрос, затем, если не найдено, в глобальном контексте.
Вторая позиция - действие, которое нужно выполнить. Оно обязано совпадать с соответствующей функцией элемента. Если есть третий параметр - функция вызывается с 2-мя параметрами, если нет - с 1-м. Можно вызвать функцию без параметров, если значение совпадает с имеющейся у элемента функцией.

действие `js` позволяет выполнить кусок javascript'а.
действие `+` позволяет дописать в html селектора новое значение
действие `-` позволяет заменить элемент новым значением.

Код


$( document ).ajaxComplete(function( event, xhr, settings ) {
    //if ( settings.url === "ajax/test.html" ) // and so on
    var data = {};
    try {
        var $txt = (xhr.responseText || '""').toString();
        $txt = $txt.replace(/^[^{]*|[^}]*$/g, '');
        if ('' != $txt) {
            data = JSON.parse($txt);
            // data=(new Function('return '+$txt))();
        } else {
            console.log(xhr.responseText || '""');
        }
    } catch (e) {
        data = {};
    }
    for (var a in data) if(data.hasOwnProperty(a)) {
        var s = (a + '|||').split('|'),
            value= data[a];
        var l;
        if(window[s[0]]) {
            l=window[s[0]];
        } else if (document[s[0]]){
            l=document[s[0]];
        } else if(document.$form) {
            l = $(s[0], document.$form);
        }
        if (!l || l.length == 0) l = $(s[0]);
        if (!l || l.length == 0) continue;
        if(s[1]=='js'){
            try{
                (new Function(value)).call(l);
            } catch (e){
                console.log('can\'t execute ',value,e.message);
            }
        } else if(s[1] && l[s[1]] && typeof(l[s[1]]) === "function"){
            if(s[2]){
                l[s[1]](s[2],value);
            } else {
                l[s[1]](value);
            }
        } else if(value && l[value] && typeof(l[value]) === "function"){
            l[value]();
        } else if(l instanceof $) {
            if ('+' == s[1]) {
                l.append(value)
            } else if ('-' == s[1]) {
                $(value).insertBefore(l.hide());
                l.remove();
            }
        }
    }
});

Использование в коде

Код


$(document).on('click','a.ajax',function(){
    document.$form=this;
    $.post(a.attr('href'));
});
$(document).on('click','form.ajax',function(){
    document.$form=this;
    $.post(a.attr('action'),$(this).serialize());
});

Переменная document.$form содержит элемент, который вызвал ajax-запрос.

Это пока на уровне концепции smile

В живом проекте толком не использовалось.
Гляньте, pls, на свои проекты, есть ли какие-то возможности, которые принципиально не вписываются в эту схему?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

_zorn_

Дата 7.7.2015, 20:00 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1076
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

И почему мне это напоминает написание собственного велосипеда ?

ksnk

Дата 7.7.2015, 21:35 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(_zorn_ @ 7.7.2015, 20:00

)

И почему мне это напоминает написание собственного велосипеда ?

А что это должно напоминать? smile

Встречный вопрос, а приведи пример "не велосипеда", для javascript и ajax'а?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »