Разработка клиентских приложений Web-сайтов

Знакомство с AJAX-технологией

Показывать лекцию целиком

Учебную базу данных Microsoft Northwind можно скачать по ссылке: http://www.microsoft.com/downloads/details.aspx?FamilyID=06616212-0356-46A0-8DA2-EEBC53A68034displaylang=en. Презентацию к данной лекции Вы можете скачать здесь.

Технология AJAX (Асинхронный JAVASCRIPT+XML) - это набор приемов, обеспечивающих динамическое обновление содержимого Web-страниц без полной их перезагрузки, а также организацию взаимодействия с сервером, при которой можно рационально распределить вычислительные ресурсы между клиентом и сервером.

В рамках данного занятия мы создадим asp.net-сайт с поддержкой технологии AJAX. Затем, добавим web-страничку, содержащую элемент управления Update Panel. Этот элемент управления является неким "окном", асинхронно связанным с web-сервером. Содержимое этого окна обновляется независимо от остальной web-странички. В UpdatePanel мы разместим элемент управления GridView, с помощью которого можно отображать и редактировать табличные данные. В нашем случае мы воспользуемся учебной базой данных Northwind, разработанной Microsoft для обучения работе с MS SQL-Server.

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

http://www.microsoft.com/downloads/details.aspx?FamilyID=06616212-0356-46A0-8DA2-EEBC53A68034displaylang=en

там мы увидим сообщение Northwind and pubs Sample Databases for SQL Server 2000, нажмите на кнопку Download. После скачивания файла SQL2000SampleDb.msi запустите его. Базы данных сохранятся в папке C:\SQL Server 2000 Sample Databases.

Далее, запустим программу MS Visual Web Developer 2008 Express Edition и создайте проект ASP.NET Web Application. Назовите проект AJAX.

(рис 22.1)

Затем добавим ASP.NET -страницу с помощью следующей последовательности действий: Правая кнопка мыши на названии проекта $$\to$$ Add $$\to$$ New Item $$\to$$ Web Form $$\to$$ Products.aspx.

(рис 22.2)

Перейдем в режим Design и из панели инструментов перетащим на страницу элемент управления Script Manager.

(рис 22.3)

После этого под ScriptManager разместим элемент управления UpdatePanel.

(рис 22.4)

Далее, разместим внутри UpdatePanel элемент управления GridView.

(рис 22.5)

Активизируем элемент управления GridView. Нажмите на пункт GridView Tasks $$\to$$ Autoformat $$\to$$ Colorful $$\to$$ OK.

(рис 22.6)

Выберем пункт Choose Data Source. В качестве источника данных укажите Database (База данных).

(рис 22.7)

Далее, нажмем на кнопку New Connection…. Укажите, что источником данных является файл базы данных Northwind.mdf, расположенный в каталоге C:\SQL Server 2000 Sample Databases.

(рис 22.8)

Укажем путь к файлу базы данных, нажав на кнопку Browse.

(рис 22.9)

Нажмем кнопку OK.

(рис 22.10)

Нажмем кнопку Next.

(рис 22.11)

Выберем пункт Specify a custom SQL statement or store procedure и нажмем кнопку Next.

(рис 22.12)

Введем запрос SELECT TOP (5) ProductName, UnitPrice FROM Products ORDER BY UnitPrice DESC. С помощью этого запроса мы отберем пять самых дорогих товаров. Нажмем кнопку Next.

(рис 22.13)

C помощью кнопки Test Query можно убедиться, что запрос работает.

(рис 22.14)

Нажмем кнопку Finish. Запустите проект, выбрав пункт Modify the Web.config file to enable debugging.

(рис 22.15)

Убедимся, что пример работает.

(рис 22.16)

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

Мы освоили процесс создания ASP.NET -страниц с поддержкой технологии AJAX. В процессе работы мы использовали такие AJAX -расширения, как ScriptManager и UpdatePanel. Из элементов управления, предназначенных для доступа к данным мы использовали GridView. Мы скачали и установили учебную базу данных Northwind. Затем мы установили соединение с базой данных и настроили SQL-запрос, вычисляющий пять самых дорогих товаров. Результаты вычислений мы отобразили с помощью GridView, расположенного в UpdatePanel.

Набор для практики

Вопросы:

  • Приведите примеры использования технологии AJAX
  • Какие преимущества дает использование AJAX?
    •

    Упражнения:

    Создайте web-страничку publishing.aspx. Выберите классическую тему оформления ( Autoformat $$\to$$ Classic ). В качестве файла базы данных выберите pubs.mdf. В качестве запроса используете следующее выражение:

    SELECT     au_lname, au_fname, city
FROM         authors
WHERE     (au_lname LIKE 'G%')
ORDER BY city

    (Отобрать фамилии, имена и города проживания авторов, фамилии, которых начинаются на букву 'G', отсортированные по городу.). Вы должны получить такой результат:

    (рис 22.17)
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^