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.


Автор: Гость (не зарегистрирован), дата: 3 марта, 2018 - 19:12
#permalink
[js]
[html]
[css]
<code><ul>
 <li><ol>
 <li><em><strong><a></a></strong></em></li>
</ol></li>
</ul></code>[/css][/html][/js]

Автор: OSAMA KHI (не зарегистрирован), дата: 1 февраля, 2020 - 16:54
#permalink

I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.
noticias de america


Автор: toko (не зарегистрирован), дата: 17 марта, 2020 - 12:33
#permalink

It is wonderful to be here with everyone, I have a lot of knowledge from what you share, to say thank you, the information and knowledge here helps me a lot basketball legends


Автор: fqwdf (не зарегистрирован), дата: 21 марта, 2020 - 11:21
#permalink

I think that thanks for the valuabe information and insights you have so provided here.
temp-mail


Автор: farhan (не зарегистрирован), дата: 21 марта, 2020 - 11:31
#permalink

Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post.
cyprus company information


Автор: osama shk (не зарегистрирован), дата: 26 марта, 2020 - 22:03
#permalink

This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.
ハワイアンジュエリー


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
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
Антиспам
4 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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