Основы AJAX и начало работы с Microsoft ASP.NET AJAX Framework
ОГЛАВЛЕНИЕ
Так как AJAX включает в себя несколько несравнимых технологий на различных уровнях сетевого стэка, реализация AJAX без использования AJAX Framework сложна и подвержена ошибкам. К счастью, Microsoft выпустил бесплатный AJAX Framework для разработчиков ASP.NET - Microsoft ASP.NET AJAX. Данная статья является первой в серии статей, которые исследуют ASP.NET AJAX Framework. Эта глава содержит общее представление о технологии AJAX и рассматривает начало работы с фрэймворком от Microsoft. Другие главы фокусируются на конкретных элементах управления и сценариях.
Краткая история Ajax
Модель клиент-сервер является архитектурой, которая подразумевает двух актеров: клиента и сервера. Сервер пассивно ждет запроса от клиента и, получив такой запрос, обрабатывает его и возвращает ответ. Клиент несет ответственность за инициацию запросов на сервер, после чего он ждет и затем обрабатывает информацию, возвращенную в ответ. Веб-приложения являются классическим примером модели клиент-сервер. Клиент, а это чаще всего веб-бразуер, посылает запрос о конкретном ресурсе на веб-сервер. Ресурс может быть статическим, как страница HTML или изображение, которое веб-сервер может просто-напросто вернуть, или это может быть динамическое значение, такое, как страница ASP.NET, которая должна быть обработана на сервере до того, как его сгенерированная разметка может быть послана обратно. Несмотря на это, интерактивность остается той же: клиент запрашивает конкретный ресурс, и сервер возвращает его, будь то бинарное значение, JPG изображение или HTML с визуализированной страницы ASP.NET.
Недостатком модели клиент-сервер является время ожидания. Клиенты должны периодически сообщаться с сервером, чтобы обновить сервер пользовательским вводом, либо чтобы получить новейшую информацию с сервера. Во время этих периодов, пользователь должен ждать какое-то время, пока цикл запрос\ответ завершится. Эта задержка наиболее заметна в приложениях ASP.NET, когда происходит постбэк. Представьте сайт по электронной коммерции (eCommerce), который создает листинг товаров в табличной сетке, где содержимое можно отсортировать и пролистать. Как бы то ни было, переход к следующей странице требует наличия постбэка на сервере, для того чтобы получить следующую страницу продуктов. Следовательно, переход к следующей странице создает задержку для пользователя, которая может длиться от одной до нескольких секунд, в зависимости от нескольких факторов (скорость интернет-соединения пользователя, перегрузка сети, загрузка сервера, длительность запроса к базе данных и так далее).
Главным "преступлением" здесь является то, что постбэк требует, чтобы все поля страницы были отосланы на сервер, и чтобы все содержимое страницы было возвращено браузеру. Такой объем обменной информации является излишеством, так как все, что на самом деле необходимо клиенту, это информация о следующей странице товаров. AJAX избегает таких задержек путем использования JavaScript, чтобы осуществить асинхронные постбэки на веб-сервер; эти постбэки передают и получают минимальное количество информации, необходимой для выполнения требуемой операции.
Существует несколько доступных AJAX структур. Большинство вендеров элементов управления ASP.NET предлагают коммерческие реализации AJAX, но существует также несколько бесплатных библиотек. В 2006 Microsoft выпустил свой собственный AJAX Framework - Microsoft ASP.NET AJAX, который является центральной темой данной серии статей.
Краткий обзор Microsoft ASP.NET AJAX
ASP.NET AJAX Framework был разработан для того, чтобы работать с ASP.NET 2.0, а также для будущих версий; он не работает с приложениями ASP.NET версии 1.x. ASP.NET AJAX Framework будет поставляться вместе с Visual Studio 2008 и ASP.NET версией 3.5. Разработчикам ASP.NET 2.0 приложений придется загружать и устанавливать фрэймворк с веб-сайта Microsoft; раздел "Начало Работы с Microsoft ASP.NET AJAX " в нашей статье включает в себя обзор инсталляции ASP.NET AJAX в среде 2.0.
ASP.NET AJAX Framework состоит из клиентской и серверной логики. Существует ряд библиотек JavaScript, которые упрощают инициацию асинхронного постбэка и обработку ответа, пришедшего с сервера. Клиентские библиотеки также включают в себя классы, схожие с классами и типами данных из .NET Framework. Серверные компоненты включают в себя элементы управления ASP.NET, которые, будучи добавленными на страницу, реализуют различные AJAX технологии. Одним из таких примеров является элемент управления ScriptManager, который добавляет ссылки к скрипту страницы для серверной части, так что браузер, который запрашивает страницу ASP.NET, также загружает правильные библиотеки JavaScript. Следовательно, вы будете использовать ScriptManager на тех страницах ASP.NET , где вы хотите применить ASP.NET AJAX Framework.
В дополнение к элементу управления ScriptManager, ASP.NET AJAX включает в себя группу других элементов управления серверной стороны, таких, как UpdatePanel, Timer и элементов управления UpdateProgress. Элемент управления UpdatePanel control позволяет вам определить часть страницы, которая будет обновлена асинхронным запросом. Вкратце, оно позволяет вам исполнять частичные постбэки вместо полностраничных постбэков. Это улучшает отзывчивость страницы по двум причинам: первая причина заключается в том, что когда частичный постбэк произведен, на сервер отправляется только та информация, которая непосредственно относится к UpdatePanel, а также только необходимая информация возвращается; вторая причина заключается в том, что частичный постбэк не заставляет браузер перерисовывать всю страницу, так что привычного мерцания, присущего полным постбэкам, вы не увидите.
UpdatePanel является одной из важнейших составляющих ASP.NET AJAX Framework, и в дальнейшем мы рассмотрим её более детально. Как только вы добавите UpdatePanel на вашу страницу, вы можете добавить стандартные элементы управления ASP.NET - TextBox (Текстовое поле), Button (Кнопка), GridView (Табличная сетка), DropDownList (Выпадающий Список) и т.д. - и они автоматически примут все преимущества методов AJAX. Например, если у вас имеется Button и TextBox в UpatePanel, и кнопка Button была нажата - частичный постбэк будет вызван. Обработчик события Click данного кнопки будет вызван на серверной стороне, как и ожидалось, и значение свойства Text TextBox будет доступно, как обычно. Более того, любые другие Веб-элементы управления внутри того же UpdatePanel могут иметь свойства, которые будут прочитаны или присвоены, а также они будут перерисован ы, и их результат будет обновлен в пользовательском браузере.
В дополнение к основным серверным элементам управления (ScriptManager, UpdatePanel, Timer, и т.д.), Microsoft предлагает дополнительный набор интерактивных элементов управления посредством инструментария AJAX Control Toolkit. Данный инструментарий включает в себя элементы управления по сбору рейтингов, ползунки, модальные всплывающие окна и тому подобное.
Начинаем работать с Microsoft ASP.NET AJAX
Для разработчиков приложений ASP.NET 2.0, первым шагом при работе с Microsoft ASP.NET AJAX является загрузка AJAX Extensions и, опционально, инструментарий AJAX Control Toolkit. (Разработчики приложений ASP.NET 3.5 уже обладают установленным ASP.NET AJAX Framework.)
Замечание: Статья рассматривает работу только с AJAX Extensions (ядром фрэймворка) и не исследует инструментарий Control Toolkit.
Для того, чтобы загрузить ASP.NET AJAX Framework 1.0, посетите данную страницу и нажмите кнопку. ASP.NET AJAX Framework упакован в файл MSI. Как только вы загрузите файл MSI на ваш компьютер, дважды щелкните по нему и установите фрэймворк. После того как загрузите и установите ASP.NET AJAX, запустите Visual Studio и выберите New Project. В диалоговом окне New Project вы должны увидеть новый тип проекта, названный "ASP.NET AJAX-Enabled Web Application."
Создавая ASP.NET AJAX-Enabled Web Application вы создаете новый проект веб-приложения, содержащий сборку System.Web.Extensions. System.Web.Extensions содержит ключевые клиентские и серверные части Microsoft ASP.NET AJAX Framework. Также, Toolbox включает категорию AJAX Extensions с ключевыми AJAX серверными элементами управления .
Первый пример ASP.NET AJAX: используем UpdatePanel
UpdatePanel пригоден в случаях, когда вы хотели бы отсылать только часть страницы, а не всю. Такой ограниченный постбэк называется частичным постбэком, и его очень легко реализовать, используя UpdatePanel. Вы, скорее всего, знаете, что многие элементы управления ASP.NET могут вызывать постбэки: когда нажимают элементы управления Button; DropDownLists (выпадающий список) и CheckBoxes (кнопка с независимой фиксацией), когда их свойство AutoPostBack установлено в "Истина" (True); и т.д. В нормальных условиях, когда данные элементы управления вызывают постбэк, на сервер посылается вся страница. Все значения полей формы посылаются из браузера на сервер. Сервер обрабатывает всю страницу и после возвращает цельный HTML код, который впоследствии отображен заново браузером.
Когда данные элементы управления появляются в UpdatePanel, вызывается частичный постбэк, но на сервер отсылаются только поля формы в UpdatePanel. Сервер обрабатывает эту страницу, но высылает обратно только разметку для тех элементов управления UpdatePanel, которые необходимо было обработать. Клиентский скрипт, начавший частичный постбэк принимает с сервера результат в виде частичной разметки и плавно обновляет информацию в браузерном окне, используя возвращенные значения. Следовательно, UpdatePanel улучшает быстроту реакции страницы уменьшая количество информации, которой обмениваются клиент и сервер, путем обработки только информации только определенной части экрана , которую выслал частичный постбэк.
Давайте посмотрим на действующий UpdatePanel. Представленный демо-код, который также предлагается загрузить в конце данной статьи, демонстрирует простой пример. UpdatePanel в данном коде включает в себя только два элемента управления: Label (лэйбл) и Button (кнопку). Веб-элемент управления Label отображает текст наугад выбранной шутки. Нажав на кнопку Button вы загружает новую наугад выбранную шутку в элемент Label. Если вы следуете за ходом данной статьи, начните работу с добавления новой страницы ASP.NET в ASP.NET AJAX Веб-приложение, которое мы создали в разделе "Начало Работы с Microsoft ASP.NET AJAX".
Всякий раз, когда мы используем ASP.NET AJAX Framework на странице, нам необходимо начать с добавления элемента управления ScriptManager, так что начните с добавления ScriptManager на страницу. Далее, добавьте UpdatePanel на страницу. В пределах данного UpdatePanel, добавьте элементы управления Label и Button. После того, как вы выполните данные шаги, декларативная разметка вашей веб-страницы должна быть похожа на данную:
| <asp:ScriptManager ID="myScriptManager" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="JokeUpdatePanel" runat="server"> <ContentTemplate> <asp:Label ID="JokeText" runat="server" Font-Italic="False" Font-Names="Comic Sans MS" Font-Size="Large"></asp:Label> <br /> <br /> <asp:Button ID="NewJokeButton" runat="server" Text="Покажите мне еще одну шутку !" /> </ContentTemplate> </asp:UpdatePanel> |
На данном этапе все, что нам осталось, это написать код для серверной стороны. Когда страница впервые загружена, мы хотим, чтобы свойство Text лэйбла JokeText имело значение наугад выбранной шутки; также, всякий раз, когда нажата кнопка NewJokeButton, мы хотим обновлять свойство Text лэйбла, заменяя содержимое текстом новой шутки.
| protected void Page_Load(object sender, EventArgs e) { JokeText.Text = GetRandomJoke(); } protected void NewJokeButton_Click(object sender, EventArgs e) { JokeText.Text = GetRandomJoke(); } private string GetRandomJoke() { // Получаем случайное число Random r = new Random(); switch (r.Next(5)) { case 0: return "Why did the chicken cross the road? To get to the other side!!"; case 1: return "How much do pirates pay for their earrings? A Buccaneer!"; case 2: return "Why did the computer squeak? Because someone stepped on it's mouse!"; case 3: return "What is a golfer's favorite letter? Tee!"; default: return "A child comes home from his first day at school. Mom asks, \"What did you learn today?\" \"Not enough,\" the kid replies, \"I have to go back tomorrow.\""; } } |
На данном этапе мы используем технологию AJAX для того, чтобы выполнить частичный постбэк, когда нажимают кнопку Button из UpdatePanel. Следовательно, при нажатии на кнопку "Покажите мне еще одну шутку!", новый текст сразу же отображается на странице без необходимости обновления всей страницы. При условии, что это довольно-таки простой пример, так как страница является достаточно легковесной, данный принцип может быть расширен до размеров реального приложения (и мы так и сделаем в последующих главах данной серии статей). Например, у вас может быть страница, на которой расположено несколько табличных сеток, показывающих некоторый объем информации. Вы можете расположить все сетки на отдельных UpdatePanel. Тем самым, когда пользователь отсортировывает одну из табличных сеток, частичный постбэк произойдет, и информация в конкретной табличной сетке будет отсортирована без необходимости выполнения полного постбэка.
Суть данной статьи в том, чтобы показать, как необычайно проста задача реализации технологии AJAX в приложениях ASP.NET используя ASP.NET AJAX Framework. Элементы управления ScriptManager и UpdatePanel автоматически обрабатывают все трудности при инициации асинхронного постбэка и выводе возвращаемой информации.
Взгляд в будущее...
Данная статья рассматривает простой пример UpdatePanel. В реальных приложениях, как бы то ни было, но задачи не всегда так легки. Например, вы можете захотеть создать событие, внешнее по отношению к UpdatePanel, которое вызывает частичный постбэк. Мы пока не рассмотрели библиотеки AJAX, которые работают непосредственно с клиентской стороной; также мы не исследовали ценность элементов управления из инструментария AJAX Control Toolkit. Эти и многие другие темы будут рассмотрены в следующих главах данной серии статей. А пока...
Веселого программирования!