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

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


Автор: Hank (не зарегистрирован), дата: 16 июня, 2020 - 20:51
#permalink

Very excellent resource, I agree with this. Thank you for the information! best impact driver


Автор: 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.
ハワイアンジュエリー


Автор: Verry (не зарегистрирован), дата: 13 апреля, 2020 - 11:41
#permalink

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


Автор: Гость (не зарегистрирован), дата: 10 июля, 2020 - 07:01
#permalink

One needs to be sheltered, one is free-shoulder
A person whom you accept to use your whole world to trade.

life the game love tester


Автор: john sbond (не зарегистрирован), дата: 10 августа, 2020 - 13:51
#permalink

Thanks for your post. I’ve been thinking about writing a very comparable post over the last couple of weeks, I’ll probably keep it short and sweet and link to this instead if thats cool. Thanks.


Автор: john bond (не зарегистрирован), дата: 10 августа, 2020 - 14:49
#permalink

I got what you mean , thanks for posting .Woh I am happy to find this website through google.
find here


Автор: osama shk (не зарегистрирован), дата: 26 декабря, 2020 - 17:02
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
Domotique


Автор: osama shk (не зарегистрирован), дата: 28 декабря, 2020 - 11:40
#permalink

Great post, you have pointed out some excellent points, I as well believe this is a very superb website.
デジタル ノマド


Автор: osama shk (не зарегистрирован), дата: 2 января, 2021 - 14:09
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
digital marketing


Автор: osama shk (не зарегистрирован), дата: 2 января, 2021 - 14:33
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
Abonnenten kaufen PayPal


Автор: osama shk (не зарегистрирован), дата: 3 января, 2021 - 13:10
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
Automação de Hotéis


Автор: osama shk (не зарегистрирован), дата: 10 января, 2021 - 14:45
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
hotel rio araguaia


Автор: osama shk (не зарегистрирован), дата: 14 января, 2021 - 16:17
#permalink

Very nice article, I enjoyed reading your post, very nice share, I want to twit this to my followers. Thanks!.
bridgend house clearance


Автор: osama shk (не зарегистрирован), дата: 16 января, 2021 - 11:12
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
alquiler carros barranquilla


Автор: osama shk (не зарегистрирован), дата: 16 января, 2021 - 16:11
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
céges ügyvéd Debrecen


Автор: osama shk (не зарегистрирован), дата: 16 января, 2021 - 17:32
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
Europa-Road


Автор: osama shk (не зарегистрирован), дата: 18 января, 2021 - 16:37
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
Heimautomatisierung


Автор: osama shk (не зарегистрирован), дата: 19 января, 2021 - 12:24
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
asbestos awareness


Автор: osama shk (не зарегистрирован), дата: 19 января, 2021 - 14:23
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
tree surgeon colchester


Автор: osama shk (не зарегистрирован), дата: 23 января, 2021 - 13:28
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
coronavirus cancun


Автор: osama shk (не зарегистрирован), дата: 24 января, 2021 - 15:58
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
Buy Gmail PVA Accounts


Автор: osama shk (не зарегистрирован), дата: 30 января, 2021 - 17:17
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
https://joo-petri.com/


Автор: osama shk (не зарегистрирован), дата: 31 января, 2021 - 16:54
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
best Cozumel restaurant


Автор: osama shk (не зарегистрирован), дата: 2 февраля, 2021 - 14:11
#permalink

This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog..
آموزش سیستم هوشمند


Автор: osama shk (не зарегистрирован), дата: 7 февраля, 2021 - 23:50
#permalink

I’ve been searching for some decent stuff on the subject and haven't had any luck up until this point, You just got a new biggest fan!..
coronavirus yucatan


Автор: osama shk (не зарегистрирован), дата: 9 февраля, 2021 - 12:16
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
lakes solihull


Автор: osama shk (не зарегистрирован), дата: 13 февраля, 2021 - 14:25
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
serralheria em brasilia


Автор: osama shk (не зарегистрирован), дата: 13 февраля, 2021 - 15:04
#permalink

I really enjoyed reading this post, big fan. Keep up the good work and please tell me when can you publish more articles or where can I read more on the subject?
reforma de sofá df


Автор: osama shk (не зарегистрирован), дата: 13 февраля, 2021 - 15:04
#permalink

Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.
reforma de sofá df


Автор: osama shk (не зарегистрирован), дата: 17 февраля, 2021 - 10:50
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
versenyképes belföldi fuvarozás


Автор: osama shk (не зарегистрирован), дата: 24 февраля, 2021 - 12:11
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
otomatisasi rumah


Автор: osama shk (не зарегистрирован), дата: 2 марта, 2021 - 10:11
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
legjobb pályázatírás Debrecen


Автор: Гостьsad (не зарегистрирован), дата: 2 марта, 2021 - 11:35
#permalink

Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place..
cancun mexico to tulum


Автор: farhan (не зарегистрирован), дата: 23 марта, 2021 - 08:21
#permalink

An fascinating discussion is value comment. I think that it is best to write extra on this matter, it won’t be a taboo topic however generally people are not enough to talk on such topics. To the next. Cheers
treatnheal


Автор: yirijis yirijis (не зарегистрирован), дата: 27 марта, 2021 - 11:00
#permalink

Great Article it its really informative and innovative keep us posted with new updates. its was really valuable. thanks a lot.
empresa de mudança df


Автор: osama shk (не зарегистрирован), дата: 4 апреля, 2021 - 12:48
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
bathroom vanity


Автор: osama shk (не зарегистрирован), дата: 14 апреля, 2021 - 15:30
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
taroko gorge


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

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

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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