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

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

< Лекция 11 || Лекция 12: 123

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

Для построения 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-запрос, при этом мы не обрабатываем результат, который получен от сервера. Для того чтобы обрабатывать результат, полученный от сервера, необходимо назначить соответствующие обработчики. Для обработки результата существует два стандартных обработчика:

success запускается в случае успешной обработки AJAX-запроса;
error запускается, если в процессе обработки AJAX-запроса произошла ошибка.

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


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


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


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

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


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

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

type метод HTTP-запроса;
url адрес для обращения к серверу;
data данные, которые будут передаваться серверу;
cache флаг, который устанавливает поведение – следует ли кэшировать результат выполнения запроса или нет;
dataType тип данных, получаемых от сервера (текст, json, xml).

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

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

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

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

  • В чем заключается проблема "классических" веб-приложений при построении пользовательского интерфейса?
  • В чем заключается основная идея подхода AJAX?
  • Какие механизмы обязательно используются для построения AJAX-приложений?
  • Как работает AJAX-приложения (какие этапы проходит AJAX-приложения)?
  • Какими преимуществами обладают приложения, построенные на основе подхода AJAX?
  • Какие недостатки содержит в себе подход AJAX?
  • Из каких компонент состоит библиотека ASP.NET AJAX?
  • Для чего используется объект ScriptManager библиотеки ASP.NET AJAX?
  • Какие функции выполняет объект UpdatePanel библиотеки ASP.NET AJAX?
  • Для чего необходим объект Timer библиотеки ASP.NET AJAX?
  • Для чего необходим объект UpdateProgress библиотеки ASP.NET AJAX?
  • Для чего используется библиотека jQuery?
  • Каким образом осуществляются AJAX-запросы в рамках библиотеки jQuery?
  • Каким образом можно обрабатывать результаты выполнения AJAX-запроса в рамках библиотеки jQuery?
  • Каким образом можно обрабатывать ошибки выполнения AJAX-запроса в рамках библиотеки jQuery?
< Лекция 11 || Лекция 12: 123
Марина Воробьева
Марина Воробьева
Виктория Ткаченко
Виктория Ткаченко

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