Использование XSLT

Альтернативой написанию программ для обработки дерева DOM и создания flTML-данных (этот подход был описан в разделе 5.7.3) является использование XSLT-преобразования для автоматического конвертирования XMLинформации в формат XHTML. Этот подход представляет собой нечто среднее между взаимодействием, ориентированным на данные, и взаимодействием ориентированным на содержимое. С точки зрения сервера эта архитектура ориентирована на данные, а с точки зрения клиента — на содержимое. Такой подход позволяет быстрее и проще получить требуемый результат, но для него характерны те же ограничения, что и для взаимодействия, ориентированного на содержимое, а именно, данные ответа затрагивают лишь прямоугольную область в окне. XSLT-преобразование будет подрой гее обсуждаться в главе 11.

Проблемы и ограничения

Главный недостаток подхода, ориентированного на данные, состоит в том, что основная нагрузка, связанная с разбором информации, ложится на клиентскую программу. Это неизбежно ведет к усложнению кода на уровне клиента. Однако если данный подход получит широкое распространение, затраты на создание кода могут быть компенсированы за счет его повторного использования или оформления некоторых функций в виде библиотеки.

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

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

5.5. Передача данных серверу

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

Рассмотрим сначала обновление с учетом изменений, которые мы вносим сами. Существуют два механизма передачи данных на сервер: HTML-формы и объект XMLHttpRequest. Рассмотрим кратко каждый из них.

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

5.5.1. Использование HTML-форм

В классическом Web-приложении элементы HTML-форм реализуют стандартный механизм ввода данных пользователем. Элементы формы объявляются с помощью средств разметки HTML.

<form method="POST" action="myFormHandlerURL.php">

<input type="text" name="username"/> <input type="password" name="password"/> <input type="submit" value="login"/>

</form>

Врезультате обработки данного фрагмента кода отображаются два пустых поля редактирования. Если пользователь введет в полях значения dave

иletmein и активизирует кнопку submit, будет сформирован HTTP-запрос POST и передан ресурсу myFormHandlerURL.php. В теле запроса будет содержаться текст username=dave&password=letmein. В большинстве систем Webпрограммирования разработчику непосредственно не доступны закодированные данные формы. Вместо этого ему предоставляются пары имя-значения в виде ассоциативного массива или специальных переменных.

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

<form id="myForm" method="POST" action="" onsubmit="validateForm(); return false;">

<input type="text" name="username"/> <input type="password" name="password"/> <input type="submit" value="login"/>

</form>

В этом случае функция, выполняющая проверку, будет иметь следующий вид:

function validateForm(){

var form=document.getElementById('myForm') ; var user=form.elements[0].value;

var pwd=form.elements[1].value;

if (user && user.length>0 && pwd && pwd.length>0){ form.action='myFormHandlerURL.php'; form.submit();

}

else

{

a l e r t ( " p l e a s e f i l l in your credentials before logging i n " ) ;

}

}

Первоначально форма определяется без атрибута action. Обращение по реальному URL будет произведено только в случае положительного результата проверки. С помощью JavaScript-кода можно также модифицировать форму, организовав блокирование кнопки submit для предотвращения повторной передачиданных, кодирование пароля перед формированием запроса и т.д. Эти и многие другие приемы многократно описаны в литературе, поэтому

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

^ibi не будем рассматривать их здесь. В главах 9 и 10 приведены примеры расширения возможностей HTML-форм.

Элемент формы можно также сформировать программно и реализовать передачу данных так, чтобы она не прерывала работу пользователя. Если мы сделаем форму невидимой, то сможем передавать данные незаметно для пользователя. Этот подход реализован в листинге 5.11.

Листинг 5.11. Функция submitData() function addParam(form,key,value)

{

var input=document.createElement("input"); input.name=key;

input.value=value;

form.appendChild(input);

}

function submitData(url,data)

{

var form=document.createElement("form"); form.action=ur1;

form.method="POST"; for (var i in data){

addParam(form,i,data[i]);

}

form.style.display="none";

document.body.appendChild(form);

form.submit();

_}

Функция submitData () создает форму и в цикле включает в нее данные, используя для этого функцию addParam (). Обращение к функции submitData () имеет следующий вид:

submitData(

"myFormHandlerURL.php",

{username:"dave",password:"letmein"}

);

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

5.5.2. Использование объекта XMLHttpRequest

Объект XMLHttpRequest уже рассматривался нами в этой главе, а также в главе 2. С точки зрения клиентского кода разница между чтением и обновлением незначительна. Нам надо лишь указать метод POST и передать параметРы формы.

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

Влистинге 5.12 показан код объекта ContentLoader, который мы раз-Я работали в разделе 3.1. Мы несколько изменили его для того, чтобы можнпИ было включать в запрос параметры и указывать произвольный HTTP-метод

Листинг 5.12. Объект ContentLoader

/ / О Для конструктора предусмотрены дополнительные параметры net.ContentLoader=function

(url,onload,onerror, method,params,contentType)

this.onload=onload; this.onerror=(onerror) ? onerror : this.defaultError;

this.loadXMLDoc(url,method,params,contentType); } net.ContentLoader.prototype.loadXMLDoc

=function(ur1,method,params,contentType){ if (!method){

method="GET";

if (icontentType && method=="POST"){ contentType="application/x-www-form-urlencoded";

if (window.XMLHttpRequest){ this.req=new XMLHttpRequest();

else

if (window.ActiveXObject){

this.req=new ActiveXObject("Microsoft.XMLHTTP");

if (this.req){ try{

this.req.onreadystatechange=net.ContentLoader.onReadyState;

// НТТР-метод

this.req.open( method,url,true);

// Тип содержимого if (contentType){

this.req.setRequestHeader("Content-Type", contentType);

// Параметры запроса this.req.send( params);

}catch (err){ this.onerror.call(this) ;

}