Полный аякс

Полный аякс грядет. Всемирный полный аякс.
В мире существует много разных 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) );
    };

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

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