2.6. Отличия Ajax от классических технологий

Несмотря на то что CSS, DOM, асинхронные запросы и JavaScript являются неотъемлемыми компонентами Ajax, эти технологии можно использовать независимо.

В главе 1 мы уже обсуждали различия между классическими Webприложениями и приложениями, выполняющими те же функции, но созданными средствами Ajax. Сейчас необходимо снова затронуть эту тему. В классических Web-приложениях возможности, предоставляемые пользователю, определяются кодом, расположенным на стороне сервера. При переходе от одного документа к другому происходит загрузка целой страницы. Во время загрузки очередной страницы пользователь не может продолжать работу. В приложениях Ajax последовательность действий пользователя по крайней мере частично определяется программой, выполняющейся на стороне клиента. Взаимодействие клиента с сервером происходит в фоновом режиме, незаметно для пользователя.

Однако, помимо этих крайних случаев, существует множество промежуточных вариантов. Web-приложение может предоставлять ряд отдельных страниц в рамках классического подхода, причем на каждой из этих страниц допустимо использование CSS, DOM, JavaScript и асинхронных запросов. JavaScript-приложение может отображать окна, похожие на классические Web-страницы. Браузер реализует гибкую среду, допускающую использование в рамках одного приложение классического подхода и средств Ajax.

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

Очевидны два уровня, на которых целесообразно применять Ajax и ряд ситуаций, в которых есть смысл обращаться к классическому подходу, основанному на использовании Web-страниц. Проще всего создавать на базе Ajax отдельные компоненты и включать их в состав Web-страницы посредством фрагментов сценариев. В качестве примеров подобных компонентов можно привести обновляемые данные о котировках акций, интерактивный календарь, окно для обмена сообщениями в реальном времени. Таким образом, на классических Web-страницах могут располагаться "островки", реализующие поведение, подобное интерфейсу обычных приложений для настольных систем (рис. 2.6). Большинство попыток обратиться к Ajax при разработке средств Google вполне укладываются в эту модель. Заполнение поля в Google Suggest и карта в Google Maps — хорошие примеры интерактивных элементов в составе статического документа.

96 Часть I. Новый взгляд на Web-приложение

Рис. 2.6. Простое Ajax-приложение, которое представляет собой Web-страницу с "островками", реализующими интерактивные функции

Дальнейшим продвижением применения Ajax может стать создание системы, в которой фрагменты, ориентированные на приложение и документ, присутствуют на равных правах (рис. 2.7). Продукт, полученный в результате следования такому подходу, можно сравнить с приложением для настольной системы или даже с диспетчером окон. Этой модели соответствует Google GMail, где отдельные сообщения воспроизводятся как документы в составе интерактивной структуры.

Изучение новых технологий — приятное занятие. Несмотря на то что составные части Ajax уже известны разработчикам, интересно попробовать, как они будут работать совместно. Мы привыкли считать Web-приложение чем-то вроде повествования, в ходе которого мы ведем пользователя от одной странице к другой по предопределенному сценарию. Следуя новому подходу, мы предоставляем пользователю возможность лучше контролировать те вопросы, для решения которых и создавалось приложение.

Чтобы получить выгоду от дополнительной степени гибкости, которую обеспечивает новый инструмент, мы должны пересмотреть многие из стереотипов мышления, сложившихся за многие годы. Действительно ли HTML — единственное средство для ввода информации пользователем? Следует ли реализовывать все части пользовательского интерфейса в виде HTML-документов? Можно ли обращаться к серверу в ответ на такие действия пользователя, как нажатие клавиши и перемещение мыши, или надо по-прежнему щелкать мышью? Мир информационных технологий изменяет-

Рис. 2.7. Более сложное Ajax-приложение, представляющее собой интерактивную систему, в которой присутствуют элементы содержимого, ориентированного на документ. Эти элементы могут быть загружены или определены из программы

ся очень быстро, и все мы придаем большое значение приобретению новых навыков. Однако избавление от старых привычек не менее важно.

2.7. Резюме

В данной главе мы рассмотрели четыре составные части Ajax.

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

CSS и DOM дополняют друг друга при формировании пользовательского интерфейса, причем позволяют разделять структуру и визуальное представление. Строгая структура документа упрощает работу программы с ним, а разделение функций важно для создания больших Ajax-приложений (этот вопрос будет подробнее рассмотрен в главах 3 и 4).

Вы узнали, как работать с объектом XMLHttpRequest и более старыми средствами: XmlDocument и IFrame. В настоящее время можно услышать мно-

98 Часть I. Новый взгляд на Web-приложение

го хвалебных отзывов об объекте XMLHttpRequest, позволяющем организовать взаимодействие с сервером. Однако I Frame также предоставляет подобные возможности, и в некоторых случаях удобно воспользоваться именно этим элементом. Зная, как работать с ними обоими, вы несомненно повысите свою квалификацию Web-разработчика. В главе 5 мы подробно обсудим взаимодействие клиента и сервера.

Инаконец, мы рассмотрели объединение основных составляющих Ajax,

врезультате которого удалось получить нечто большее, чем сумму составных частей. Ajax подходит не только для решения частных задач, например, реализации компонентов, включаемых на Web-страницу, которая при отсутствии их была бы статической. Данный подход можно смело применять как основу для создания интерактивного пользовательского интерфейса, в котором содержались бы лишь отдельные "островки" статических данных. Для того чтобы средства Ajax перешли с второстепенных на основные роли, надо создать большой объем JavaScript-кода, который мог бы надежно работать

втечение длительного периода времени. Чтобы успешно решить такую задачу, надо изменить привычный подход к созданию кода и применять приемы, обеспечивающие надежность, гибкость кода и пригодность его к сопровождению. В следующей главе мы рассмотрим способы упорядочения кода большого Ajax-приложения.

2.8. Ресурсы

Для тех, кто стремится глубже изучить каскадные таблицы стилей, мы рекомендуем узел CSS Zen Garden (http://www.csszengarden.com/), стили которого могут изменяться множеством способов, причем для получения результата не используются никакие другие средства, кроме CSS.

Эрик Мейер (Eric Meyer) интенсивно использует CSS. Посетите его Webузел по адресу http://www.meyerweb.com/eric/css/. Blooberry (http:// www.blooberry.com) — еще один превосходный ресурс для тех, кому необходима информация по CSS.

С первыми решениями Ajax, использующими элементы IFrame, можно ознакомиться по адресу http://developer.apple.com/internet/webcontent /iframe.html.

Расширение Mozilla LiveHttpHeaders можно найти по адресу h t t p : / / livehttpheaders.mozdev.org/.

В книгах Денни Гудмена (Danny Goodman) Dynamic HTML: The Definitive Reference (O'Reilly, 2002) и JavaScript Bible (John Wiley, 2004) содержится обширный материал по работе с D0M. Кроме того, в них подробно описывается среда браузера.

На Web-узле W3Schools (http://www.w3schools.com/js/js_examples_3. asp) представлены интерактивные руководства по JavaScript.