Javascript.RU

Ajax и клиент-серверная архитектура.

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/ajax.

Использование AJAX и Rich Client серьезно отражается не только на серверной и клиентской части приложения, но и на их взаимодействии.

В статье описывается расширенная странично-сервисная модель приложения, MVC на клиенте и несколько принципов реализации сложных AJAX-приложений.

В классической модели MVC работа с сайтом выглядит следующим образом.

На рисунке изображен один из частых вариантов MVC. Это - странично-ориентированная архитектура.

С другой стороны, AJAX приводит нас к сервисно-ориентированной архитектуре:

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

Например, для формы голосования

...
<form action="/module/vote.html" method="post" onsubmit="send_vote(); return false">
... <input type="submit" value="Голосовать"> ... 
</form>

Если javascript выключен - форма просто запостит данные на /module/vote.html и выведет эту HTML-страницу. Для пользователей с включенным javascript запустится
функция send_vote(), которая отправит точно такой же POST-запрос, но дополнительно поставит заголовок 'AJAX'.

//... в коде функции send_vote ...
request.setRequestHeader('AJAX',1)

Получив запрос с таким заголовком, сервер поймет, что результат надо
выводить не в виде обычной страницы, а в формате ответа на AJAX-запрос, например JSON.

При этом для обработки обоих видов запроса используется одна и та же модель и контроллер, который в зависимости от наличия заголовка переключается
между режимами "генерация страницы" и "вызов сервиса".

На клиенте естественным образом возникает паттерн MVC, только вместо серверных языков используются скрипты и объекты браузера.

Модель
Содержит внутреннее представление данных в браузере. Например, "корзина" в онлайн-магазине, ее свойства и товары в ней, как правило, реализуются через JavaScript-объекты.
Представление (Вид)
Отображение на экран происходит при помощи DOM. Различные эффекты и элементы интерфейса организуются через манипуляцию их свойствами.
Контроллер
Код, который связывает модель с представлением и обрабатывает события.

Почти все web-приложения, перешагнувшие некоторый порог функционала, соблюдают ряд архитектурных решений.

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

Однако, занесение товара в корзину покупателя вряд ли изменит список категорий и продуктов. Поэтому можно при помощи AJAX отправить информацию о добавленном продукте на сервер. Например, через XML-сообщение:

<action>addToCart</action>
<productId>151</productId>

Если такой товар может быть добавлен, то сервер ответит

<status>OK</status>

и браузер (а, точнее, наше JavaScript-приложение) самостоятельно обновит корзину на экране.

Информация о текущем состоянии корзины может, вообще, отсутствовать на сервере и храниться только на клиенте.

Таким образом, виден побочный эффект - уменьшение нагрузки на сервер, т.к часть ее берет на себя "умный" клиент, приложение на стороне браузера.

Как видно из примера выше, браузер получает с сервера совсем не HTML документ.

Со своей стороны он отправляет специальный запрос, а со стороны сервера получает стандартный ответ, который использует для обновления информации.

Вообще говоря, AJAX может использоваться и для пересылки готового HTML. Такой подход, как правило, применяется либо для облегчения клиентской части, либо для небольшого внедрения AJAX в классическое приложение.

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

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

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

Паузы в работе приложения отвлекают мысли пользователя, особенно начиная с некоторой границы, которую разные исследователи ставят от 0.1 до 3 сек.
Их отсутствие открывает новый уровень интерактивности в работе с веб-приложениями.

Роль JavaScript в классических веб-приложениях невелика. Как правило, она сводится к созданию различных эффектов и оригинальных меню.

Такое программирование, как правило, не требует ни глубоких знаний, ни ООП и в свое время принесло JavaScript незаслуженную репутацию непонятного и сложного для освоения языка.

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


Автор: xNetDev, дата: 24 июня, 2008 - 17:16
#permalink

отличный ресурс


Автор: Falcon, дата: 26 октября, 2009 - 02:54
#permalink

"Информация о текущем состоянии корзины может, вообще, отсутствовать на сервере и храниться только на клиенте."
ну это получается только если страница не обновляется, и даже форма платежа грузится асинхронно? или я что-то не знаю?


Автор: Илья Кантор, дата: 26 октября, 2009 - 13:57
#permalink

Да, есьт даже движки - целиком на ajax. Конечно, в этом случае предусматривается возможность просмотра сайта без AJAX анонимным посетителем. Для поисковиков.


Автор: iphone4g (не зарегистрирован), дата: 2 октября, 2010 - 07:50
#permalink

познавательная статья! спасибо!


Автор: ferbolg (не зарегистрирован), дата: 16 ноября, 2010 - 15:48
#permalink

Спасибо за статью. Хотелось бы уточнить один момент: как именно в следующем коде произойдет выбор дествия в зависимости от выкл/вкл javascript, что из кода выполниться и когда?

<code> Например, для формы голосования
<form action="/module/vote.html" method="post" onsubmit="send_vote(); return false">
... <input type="submit" value="Голосовать"> ...
</form>  </code>

Sorry, но только начал осваивать, наверное нехватает знаний синтаксиса.


Автор: B@rmaley.e><e, дата: 16 ноября, 2010 - 16:33
#permalink

Если JS включен, то выполнится обработчик события onsubmit у формы и перехода на action не произойдет. Если же JS выключен, то обработчик выполнен не будет, и браузер отправит post запрос по адресу /module/vote.html.


Автор: DarkLordis (не зарегистрирован), дата: 5 мая, 2011 - 23:30
#permalink

ну это врядли... стандартно html файл не принимает post. умный IE будет протестовать...


Автор: Гость (не зарегистрирован), дата: 19 июля, 2011 - 19:49
#permalink

request.setRequestHeader('AJAX',1)


Получив запрос с таким заголовком, сервер поймет, что результат надо
выводить не в виде обычной страницы, а в формате ответа на AJAX-запрос, например JSON.

Как считывать такой заголовок в серверном скрипте (PHP)?


Автор: Фёдор Геращенко (не зарегистрирован), дата: 29 марта, 2013 - 06:52
#permalink

Все заголовки, отправленные браузером, лежат в массиве $_SERVER и начинаются с префикса HTTP_.
В нашем случае $_SERVER['HTTP_AJAX'] будет равно 1.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
15 + 4 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum