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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Библиотека Microsoft ASP.NET AJAX

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

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

Библиотека ASP.NET AJAX включает набор программных компонент для создания AJAX-приложений. Эти компоненты являются элементами управления ASP.NET, которые включаются в состав страницы. К таким элементам управления относятся:

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

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

После размещения объекта ScriptManager на странице можно построить логику приложения. Основным элементом для создания AJAX-взаимодействия является объект UpdatePanel. Если этот элемент управления поместить на странице, а внутри него добавить ряд элементов управления, то при взаимодействии с этими элементами управления страница не будет перезагружаться полностью, а обновляться будет только часть страницы, которая содержится внутри элемента UpdatePanel.

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

Также необходимо задать обработчик для кнопки Button1. В нашем случае этот обработчик будет задавать поле Text элемента управления TextBox1.

После запуска этого приложения, при нажатии на кнопку Button1 не будет происходить перезагрузки страницы, а будет обновляться только часть страницы. Таким образом, мы уже создали AJAX-приложение. Аналогичным образом можно создать несколько элементов управления UpdatePanel, которые будут работать независимо друг от друга.

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

Для размещения элемента управления UpdateProgress используется следующий несложный код разметки.

Как видно из этой разметки, элемент управления UpdateProgress содержит данные, которые отображаются пользователю в момент взаимодействия с сервером. При этом, когда взаимодействие не происходит, эти данные скрываются со страницы. Также видно, что элемент управления UpdateProgress ассоциируется с элементом UpdatePanel. Это необходимо для того, чтобы библиотека ASP.NET AJAX могла понять в какой момент отображать информацию. В данном случае эта информация будет отображаться при обработке элемента управления UpdatePanel.

Наконец, если требуется обновлять информацию на странице периодически, можно воспользоваться элементом управления Timer. Для этого необходимо поместить элемент управления Timer внутри элемента UpdatePanel. Кроме того, нужно указать периодичность обращения элемента к серверу (свойство Interval), а также установить свойство Enabled в состояние "true". Кроме того, следует задать обработчик на сервере, который будет вызываться при срабатывании таймера.

В нашем примере, обработчик события срабатывания таймера на сервере будет устанавливать текст в поле ввода, равным текущему времени веб-сервера.

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

Аналогичным образом строятся приложения на базе ASP.NET AJAX, содержащие более сложную логику.

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

Реализация подхода в веб-приложениях требует от разработчика дополнительных усилий по созданию логики обработки запросов и клиентских сценариев JavaScript, которые будут обеспечивать работоспособность приложения. Для того, чтобы упростить создание AJAX-приложений, платформа ASP.NET содержит библиотеку ASP.NET AJAX. Эта библиотека содержит набор элементов управления для создания логики AJAX-приложения. Основным элементом управления, который позволяет создать AJAX-приложения является элемент UpdatePanel. Этот элемент автоматически генерирует асинхронные запросы к серверу и обрабатывает их на серверной стороне.

Использование сторонних клиентских библиотек

Для построения AJAX-приложений можно также использовать сторонние библиотеки. Одной из наиболее популярных библиотек, упрощающих создание клиентских сценариев JavaScript является библиотека jQuery (http://www.jquery.com), которая является бесплатной, свободно-распространяемой библиотекой с открытым исходным кодом. Несмотря на то, что эта библиотека является бесплатной, она является достаточно мощным и удобным инструментом для создания клиентских сценариев JavaScript.

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

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

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

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

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

Как видно из примера, после загрузки документа осуществляется поиск кнопки с идентификатором "button1", после чего для этой кнопки назначается обработчик события нажатия на кнопку. В этом случае при нажатии на кнопку пользователю будет показано соответствующее уведомление.

Одной из возможностей библиотеки jQuery является возможность построения AJAX-запросов к серверу и обработки их на клиентской стороне. Для этого используется конструкция "$.ajax". Например, можно генерировать AJAX-запрос к серверу по нажатии на кнопку.

В этом клиентском сценарии, при нажатии на кнопку "button1" генерируется AJAX-запрос к серверу по адресу "/ajax-request.ashx", при этом используется метод GET запроса HTTP. В данном примере будет выполнен простой AJAX-запрос, при этом мы не обрабатываем результат, который получен от сервера. Для того чтобы обрабатывать результат, полученный от сервера, необходимо назначить соответствующие обработчики. Для обработки результата существует два стандартных обработчика:

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

В этом примере после выполнения запроса отображается уведомление о том, успешно ли выполнен запрос. Однако, в данном случае при успешном выполнении запроса мы не получаем доступа к информации, которая получена от сервера. Для того, чтобы исправить этот недостаток следует определить параметр в обработчике успешного выполнения запроса.

Теперь при успешном выполнении запроса к серверу, пользователю отображаются данные, которые отправил сервер. Также с помощью библиотеки jQuery можно отобразить эти данные на странице, а не отображать уведомление. Для этого создадим элемент "div" с идентификатором "data" и после получения ответа от сервера будем отображать данные в этом элементе.

Таким образом, мы построили простое приложение, которое обращается к серверу с помощью AJAX-запроса и при получении ответа отображает его на странице.

Если известно, что обработка запроса может занимать длительное время, можно уведомить пользователя о том, что в данный момент осуществляется обращение к серверу. Для этого используется обработчик с именем "beforeSend", который можно определить аналогичным образом.

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

Кроме приведенных выше параметров AJAX-запроса могут использоваться также следующие параметры:

Таким образом, библиотека jQuery позволяет достаточно просто создавать клиентские сценарии для создания AJAX-запросов к серверу. На стороне сервера следует также определить логику обработки этих запросов. В качестве серверного обработчика может использоваться HTTP-обработчик, веб-форма, контроллер ASP.NET MVC Framework или другие механизмы, позволяющие генерировать результат для передачи клиенту.

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

Для построения AJAX-приложений, кроме использования стандартных инструментов ASP.NET, можно использовать сторонние библиотеки. Одной из наиболее популярных бесплатных библиотек для упрощения создания клиентских сценариев JavaScript является библиотека jQuery. Эта библиотека содержит ряд механизмов для управления содержимым страницы, а также объекты для выполнения и обработки AJAX-запросов.

Контрольные вопросы