200 Часть II. Основные подходы к разработке приложений

Типичный документ, например данная книга, состоит из абзацев, заголов-: ков, таблиц и рисунков. Аналогично, документ, содержащийся в обращении к службе, может содержать различные элементы, например, запросы, данные для обновления и оповещения. Образ разработки Command, который обсуждался в главе 3, позволяет представлять структуру документа в виде последовательности действий (которые при необходимости можно отменять), передаваемых между клиентом и сервером. Реализация подобной структуры будет рассмотрена далее в этой главе.

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

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

5.4. Частные решения: обмен данными

Впредыдущем разделе мы рассматривали глобальные архитектурные решения и обсуждали вопрос о том, насколько они подходят для создания Ajaxприложений. Мы постоянно подчеркиваем важность обмена данными между клиентскими программами и моделью предметной области, поддерживаемой на сервере. Прочитав материал, изложенный выше, можно сделать вывод, что, правильно выбрав базовые средства, мы автоматически решим последующие задачи. Увы, это совсем не так. И вы в этом убедитесь, прочитав остальную часть главы. Если мы внимательно рассмотрим вопрос обмена данными, то увидим, что для данной задачи существует множество решений. В последующих разделах мы кратко опишем их и попытаемся выяснить, какой язык наилучшим образом подходит для обмена данными в рамках приложения Ajax. Имея такую информацию, мы сможем принимать более обоснованные решения об использовании конкретных средств.

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

Глава 5. Роль сервера в работе Ajax-приложения 201

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

зере подробно рассмотрим остальные три категории.

5.4.1. Взаимодействие, затрагивающее только клиентскую программу

Данный тип взаимодействия характеризуется тем, что действия пользователя обрабатываются сценарием, который выполняется в среде браузера. Обращаться к ресурсам на стороне сервера (в частности, к уровню представления) нет необходимости, а это позволяет обеспечить быстрый отклик программы и снижает нагрузку на сервер. Подобное взаимодействие подходит для несложных вычислений, например, для подсчета общей суммы товаров, заказанных пользователем. Для того чтобы такой подход дал желаемые результаты, программы, расположенные на стороне клиента и поддерживающие взаимодействие, не должны меняться в течение сеанса работы пользователя и объем их должен быть небольшим. Для приложения, предназначенного для поддержки интерактивного магазина, эти требования выполняются автоматически. Число изделий, предлагаемых пользователю, относительно невелико (по крайней мере, не тысячи пунктов, как в случае библиотеки), и цены на товары не меняются каждую минуту (в отличие, например, от котировок акций на бирже). Данный тип взаимодействия уже обсуждался в главе 4 при рассмотрении контроллера, расположенного на стороне клиента, поэтому мы больше не будем уделять ему внимание.

Остальные три категории предполагают обращение к серверу и отличаются в основном передаваемыми данными. Главные различия между этими типами взаимодействия описаны в следующих разделах; там же рассмотрены преимущества и недостатки каждого из них.

5.4.2. Пример отображения информации о планетах

Перед тем как заняться изучением различных механизмов обмена данными, представим себе простой пример, на котором будем проверять то или иное решение. Наше приложение будет представлять информацию о планетах Солнечной системы. В главном окне представлено изображение Солнечной системы с пиктограммой для каждой планеты. На сервере хранятся сведения о планетах; щелчком на пиктограмме, соответствующей планете, надо отобразить эти сведения в окне (рис. 5.6). Сейчас мы не будем использовать объект Objectviewer, который рассматривался в главе 4, но еще вернемся к нему.

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

202 Часть II. Основные подходы к разработке приложений

I

Рис. 5.6. После щелчка на пиктограмме, соответствующей планете, информация о ней выводится в окне

Листинг 5.1. Содержимое файла popups .html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> <html> <head> <title>Planet Browser</title>

<link rel=stylesheet type="text/css" href="main.css"/>

<link rel=stylesheet type="text/css" href="windows.ess"/>

<link rel=stylesheet type="text/css" href="planets.css"/>

// О Включение библиотек JavaScript <script type="text/javascript"

src="x/x_core. j s"x/script> <script type="text/javascript" src="x/x_event. j s"x/script> <script type="text/javascript"

src="x/x_drag.j s"></script> <script type="text/javascript" src="windows. js"X/script> <script type="text/javascript"

src="net.j s"></script> <script type="text/javascript"> window.onload=function(){

var pbar=document.getElementByld("planets"); var children=pbar.getElementsByTagName("div"); for(var i=O;i<children.length;i++){

Глава 5. Роль сервера в работе Ajax-приложения 203

// © Связывание с пиктограммами обработчиков событий

children[i].onclick=showlnfo;

J }

</script> </head> <body>

// 0 Включение пиктограмм, соответствующих планетам <div class="planetbar" id="planets">

<div class="planetbutton" id="mercury"> <img src="img/ball-mercury.gif"

alt="mercury"/> </div> <div class="planetbutton" id="venus"> <img src="img/ball-venus.gif" alt="venus"/>

</div> <div class="planetbutton" id="earth"> <img src="img/ball-earth.gif" alt="earth"/> </div> <div class="planetbutton" id="mars"> <img src="img/ball-mars.gif" alt="mars"/> </div> <div class="planetbutton" id="jupiter"> <img src="img/ball-jupiter.gif"

alt="jupiter"/> </div> <div class="planetbutton" id="saturn"> <img src="img/ball-saturn.gif" alt="saturn"/>

</div> <div class="planetbutton" id="uranus"> <img src="img/ball-uranus.gif" alt="uranus"/> </div> <div class="planetbutton" id="neptune"> <img src="img/ball-neptune.gif"

alt="neptune"/> </div> <div class="planetbutton" id="pluto"> <img src="img/ball-pluto.gif" alt="pluto"/>

</div> </div> </body> </html>

В состав нашего файла мы включили несколько JavaScript-библиотек О. Средства, предоставляемые net . js, обеспечивают поддержку низкоуровневых HTTP-запросов, используя для этой цели объект XMLHttpRequest, который обсуждался в главе 2. В файле windows, js определен объект окна, допускающего перетаскивание. Это окно мы используем для отображения информации. Детали реализации окна в данном случае не имеют значения; нас интересует только порядок вызова конструктора.

var MyWindow=new Window(bodyDiv,title,x,y, w,h);

где bodyDiv — это элемент DOM, который выводится в окне; t i t l e — строка, отображаемая в заголовке окна, а параметры х, у, w и h определяют начальные размеры окна. Задавая элемент DOM в качестве параметра, мы обеспечиваем достаточную гибкость при отображении данных к окне. Полностью код объекта Window можно скопировать с Web-узла, посвященного данной книге. Посредством HTML-кода, содержащегося в файле, мы определяем элемент div для каждой планеты ©, а в функции window.onload © связываем с пиктограммами планет обработчики onclick. В качестве обработчиков используются функции showlnf о (), которые в данном листинге не определены. В этой главе мы обсудим несколько вариантов их реализации. Рассмотрим Действия, которые мы можем предпринять тогда, когда нам требуется загрузка данных.