Полный аякс

Полный аякс грядет. Всемирный полный аякс.
В мире существует много разных Javascript расширений, фреймворков, способных удобно работать с динамическим содержанием, Англяры, reactJS, но мы будем говорить не о них.
Мы уже ознакомились с простой реализацией аякса, теперь можем расширить это взаимодействие.
Как мы уже поняли — у нас есть одинаковый формат передачи сложных структур, преобразованных в строку через JSON. То, что мы передаем из PHP – в таком же виде получается на стороне Javascript. В качестве расширения перехода на полный аякс предлагаю разделить полностью контент от данных, что и подразумевает под собой полный аякс. Клиент уже содержит все действия и компоненты в скрытых шаблонах, сервер лишь управляет парадом и дергает за ниточки всю логику клиента, но не дополняет конкретный контент.

Другими словами - разница такого подхода от классического - сервер содержит всю логику влаимодействия на стороне клиента, в сравнении с действием, где на стороне клиента заложено поведение после определенного действия сервера. То есть запрашивая данные с клиента - с сорвера может поступить совершенно другая команда ребутнуть страницу или запросить авторизацию. Сам клиент не мог бы догадаться, что у пользователя может кончится авторизация, но т.к. он позволяет собой управлять - он вовремя узнает обо всех действиях. То есть клиент - лишь отражение пожеланий пользователя.


Чтобы позволить параду маршировать — нужно договориться о формате взаимодействия событий. Пусть это будет формат вида
array(
 array('type'=>'действие','var1'=>'переменная 1','var2'=>'переменная 2', …),
 array(...)
)
То есть последовательность действий с обязательным атрибутом type. Кто-то может сказать, что тип достаточно общая переменная и ее хорошо бы либо вынести в отдельный массив, либо замаскировать в виде, например _type, пожалуйста. Здесь лишь общее описание полного аякса
Хорошо. Остается только поймать наши действия на стороне клиента правильно. Предлагаю обрамить действия таким образом
function core_feedback(input){
    try{
        var data=JSON.parse(input);
    }
    catch(e){
        alert('Ошибка получения ответа от системы. Действие не выполнено');
        return;
    }
    for (var key in data){
        var item=data[key];
        if (typeof(item)=='undefined')continue;
        if (typeof(core_feedbacks[item.type])!='undefined')core_feedbacks[item.type](item);
    }
}
Тут все должно быть понятно, за исключением некой переменной core_feedbacks, где и собственно таится вся магия
var core_data={},core_feedbacks={
    message:function(item){
        alert(item.message);
    },
    redirect:function(item){
        location.href=item.redirect;
    },
    'var':function(item){
        core_data[item.name]=item.value;
    }
};
Вот и вся разгадка. Эта колбек переменная, которая содержит реакции на все типы событий. Реализация построена в виде анонимных лямбда функций и обладает рядом преимуществ. Конечно же мы можем регистрировать новые типы колбеков в своих проектах
core_feedbacks['draw']=function(item){
    $('#main-block').html(draw());
}
Мы предусмотрели 3 вида событий — показать пользователю сообщение, произвести редирект и записать переменную с ограничением, что переменная пристроится в виде ключа в core_data, но это неизбежно, т. к. место под нее можно резервировать заранее, а также вы ее не спутаете с пользовательскими переменными в проекте.
Все. Вешаем события, ставим реакцию на стороне сервера. Передаем только данные без содержания. Вот вам и полный аякс. Что по поводу шаблонов — можете их хранить прямо в Javascript, либо же рендерить при помощь шаблонизаторов. Рекомендую ознакомится с шаблонизатором Mustache
Функция обрамления бы могла выглядеть следующим образом
core_feedbacks['template']=function(item){
        $(item.destination).html(Mustache.render($('#template_'+item.template).html(),item.data) );
    };

Осталось развешать ниточки и дергать их со стороны сервера.

Самая главная мысль - клиент - лишь инструмент и содержит набор команд, которые позволят ему играть. Сервер - управляет оркестром.

Больше материалов выкладываю на своем Дзен канале

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 920
  • Комментариев: 0
  • Создан: 31.03.2015 19:04

Комментарии (0)

Ваши предложения и пожелания пишите на pro@kosmom.ru

Теги

ajax axios backup bootstrap core framework eloquent excel home project html ios javascript keep-alive kpi laravel legacy mvp orm php rip scroll solid timestamp undefined vue vuetify watch безопасность биометрический паспорт ваша любаша для путешествий загран на 10 лет загран паспорт загранпаспорт нового образца зимние книги как заполнить анкеты кеширование книги на новый год логирование мцф недвижимость новогодние книги образец заполнения антеты паспорт для путешествий паспорт нового поколения печать продукт проектирование прокси разработка ремонт ремонт в апартаментах ремонт нежилого помещения самокат сдача сколько стоил ремонт апартаментов спорт стандарты таблица финансы хостинг цена ремонта что почитать зимой юзабилити

Случайный пост

15.08.2016 10:41
Просмотренные фильмы №16