Спонсор: Microsoft
Опубликован: 30.01.2013 | Доступ: свободный | Студентов: 1198 / 140 | Длительность: 17:23:00
Теги: .net, ajax, asp, www, интранет
Лекция 12:

Создание интерактивных приложений на основе AJAX

< Лекция 11 || Лекция 12: 123
Аннотация: Эта лекция содержит информацию о создании интерактивных веб-приложений на основе клиентских сценариев и концепции AJAX.

Общие сведения о приложениях AJAX

Все веб-приложения работают на основе протокола HTTP. Этот протокол предполагает взаимодействие клиента и сервера в режиме "запрос-ответ". Когда клиент хочет обратиться к ресурсам веб-приложения, он вводит нужный ему адрес веб-приложения в браузере, браузер генерирует HTTP-запрос к серверу, на который веб-сервер генерирует HTTP-ответ и передает его клиенту. Если пользователь выполняет какое-либо действие на странице (нажимает на ссылку на странице, взаимодействует с элементами управления и т.д.), то браузер генерирует еще один HTTP-запрос к серверу, в ответ на который веб-сервер выдает HTTP-ответ. Этот процесс повторяется периодически при работе клиента в рамках веб-приложения.

Схематически процесс взаимодействия клиента и сервера можно представить следующим образом.


Недостаток такого подхода очевиден – после очередного действия пользователя происходит запрос к серверу и повторное отображение результата. С точки зрения пользователя это означает, что при очередном действии происходит обновление страницы, т.е. полная ее перезагрузка. Если приложение обрабатывает запросы быстро, размер страницы небольшой, а канал связи способен передавать информацию с большой скоростью, то полная перезагрузка страницы не является серьезной проблемой. Однако, подобные условия возможны далеко не всегда: приложение может содержать сложную логику, работать с большим объемом данных, содержать сложную разметку, а пользователь может иметь низкоскоростное подключение к сети Интернет. Поэтому подобные перезагрузки страницы могут негативно сказываться на удобстве использования приложений.

Для решения этой проблемы в 2005 году был предложен альтернативный подход к процессу функционирования веб-приложений. Этот подход предполагает использование клиентских сценариев JavaScript в рамках браузера, внутри которых производятся асинхронные запросы к веб-серверу в рамках уже загруженной страницы. При этом веб-сервер в ответ на такой запрос отправляет не всю страницу целиком, а только ее часть. Исторически в результате обработки подобных запросов между клиентом и сервером данные передавались в формате XML. Поэтому этот подход был назван AJAXAsynchronous Javascript and XML. Общий процесс работы при использовании подхода AJAX можно схематически представить следующим образом.

Как видно, в случае использовании подхода AJAX, страница загружается целиком только при первом обращении к серверу. Все последующие операции взаимодействия производятся асинхронно, посредством обращения к веб-серверу из клиентских сценариев JavaScript. Это позволяет не перезагружать всю страницу целиком при взаимодействии пользователя и приложения. Благодаря этому у пользователя создается ощущение более интерактивного и удобного пользовательского интерфейса.

Работа приложений на базе подхода AJAX стала возможной благодаря появлению объекта XMLHttpRequest в составе программных интерфейсов JavaScript в большинстве популярных браузеров. Именно благодаря наличию этого объекта клиентский код JavaScript способен выполнять асинхронные запросы из клиентского кода.

Для отображения результатов AJAX-взаимодействия в рамках клиентских сценариев JavaScript содержится логика, позволяющая изменять структуру HTML-документа. Это означает, что после получения ответа от сервера, клиентский код JavaScript динамически изменяет содержимое разметки HTML с целью отображения результата.

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

  • сервер передает клиенту фрагмент HTML-кода, который должен быть отображен на странице. В этом случае клиентские сценарии JavaScript после завершения процесса взаимодействия с сервером просто вставляют в существующую структуру документа тот HTML-код, который получен от сервера в результате взаимодействия;
  • сервер передает клиенту данные в формате XML. В этом случае клиентский код JavaScript должен содержать логику, позволяющую преобразовать эти данные в разметку HTML, которая будет вставлена в существующую структуру документа;
  • сервер передает данные в формате JSON. JSON – это представление данных, с которым удобно работать в сценариях JavaScript. В общем случае этот подход аналогичен предыдущему, за исключением того, что отличаются форматы передачи данных.

Способ, при котором передаются только данные, а не HTML-разметка более эффективен с точки зрения скорости передачи информации, однако, его реализация требует разработки некоторого клиентского кода на языке JavaScript.

В целом при использовании подхода AJAX достигаются следующие преимущества:

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

Однако при использовании подхода AJAX существуют также и недостатки:

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

В целом подход на основе AJAX – достаточно перспективное направление на сегодняшний день, которое используется уже большим количеством веб-приложений. Для построения AJAX-приложений уже существует большое количество готовых библиотек, которые можно использовать при разработке приложения. ASP.NET также содержит ряд программных компонент для построения AJAX-приложений.

Краткие итоги

Поскольку все веб-приложения работают на основе протокола HTTP, то взаимодействие клиента и сервера осуществляется на основе процесса "запрос-ответ". При этом содержимое страницы полностью перезагружается в браузере всякий раз, когда происходит подобный процесс. Это может создать дополнительные неудобства, если пользователь работает по медленному каналу передачи данных. Для решения этой проблемы можно использовать подход AJAX. В этом случае перезагружается не вся страница, а только ее часть. Этот подход работает на основе клиентских сценариев JavaScript.

< Лекция 11 || Лекция 12: 123
Марина Воробьева
Марина Воробьева
Виктория Ткаченко
Виктория Ткаченко

Проигрыватель не работает. После нажатия кнопки Play ничего не происходит.

Андрей Коробейников
Андрей Коробейников
Россия, Новосибирск, Сибирский государственный университет телекоммуникаций и информатики, 1999
Вадим Трунов
Вадим Трунов
Россия