Ajax в действии
.pdfГлава 12. "Живой" поиск с использованием XSLT 501
о прокрутке до нужного места, заполнении полей формы и т.д. Поскольку мы к тому же сумели решить проблему поддержки Opera и Safari, в вопросе целесообразности использования XSLT-преобр азов алия у нас стало меньше еще одним аргументом против.
12.5.3. Использовать ли XSLT
В процессе работы над проектом вполне может возникнуть ситуация, когда вам придется отстаивать перед руководством или членами команды желание использовать XSLT. Возможно, вам зададут такой вопрос: "Вы динамически генерируете на сервере файл XML, так почему же нельзя точно так же сгенерировать таблицу результатов?"
По сути, мнение наших коллег-разработчиков заключается в том, что для отображения результатов пользователю мы делаем,больше работы, чем требуется. Действительно, когда браузер визуализирует таблицу результатов, на Web-странице должна быть выполнена дополнительная обработка. Вместо одного файла, код Ajax загружает два, которые впоследствии необходимо объединить.
Мы без проблем могли бы сгенерировать таблицу на сервере. Таблица результатов отображалась бы с использованием свойства responseText объекта XMLHttpRequest и возвращенного значения к HTML-элементу. Данный метод нормальный и жизнеспособный, причем содержит на один этап меньше, чем предложенный выше.
Однако при построении HTML-таблицы на стороне сервера следует подумать еще и о тех усилиях, которые придется приложить, если потребуется изменить что-то. Как обсуждалось ранее в данной главе, при построении таблицы разработчики сталкиваются с множеством проблем. Нужно подумать о кавычках, синтаксисе дескрипторов, атрибутах, обработчиках событий и о многом другом. Если пользователю потребуется изменить порядок столбцов в таблице результатов, нам придется перекодировать очень много фрагментов приложения.
Используя XSLT, мы выносим построение таблицы из кода серверной части приложения. Сервер может построить упрощенную версию таблицы результатов в формате XML. Этот формат достаточно понятен и позволяет легко выявлять ошибки. Кроме того, XSLT-файл выглядит подобно HTMLстранице. Нам не придется подсчитывать кавычки или выполнять поиск в строке, чтобы определить, имеется ли в ней дескриптор. Используя XSLT, мы можем просто посмотреть и сказать, что все правильно.
Кроме того, мы можем воспользоваться созданным Web-дизайнером шаблоном таблицы и поместить его в файл XSLT. Если нам когда-либо придется что-то изменить (например, переставить столбцы), все наши действия сведутся к операциям "вырезать-вставить''. Нам не придется морочить себе голову и проверять, нормально ли расставлены дескрипторы после модификации. Используя XSLT, мы убираем из динамического кода обработку HTMLстраницы. Благодаря этому внешний вид таблицы результатов можно будет изменить без особых проблем.
502 Часть IV. Ajax в примерах
Наконец, использование JavaScript позволяет очень легко сделать то, что при выполнении преобразования на сервере было бы просто невозможным.
•Извлекать различные документы XSL, основываясь на теме, размерах экрана, языке и т.д.
•Извлекать документы XML и XSL без помощи сервера.
•Изучать журнал (log file) XML на локальном компьютере, не имея контроля над структурой документа XML.
Наверное, вы уже поняли, что Ajax может существенно облегчить выполнение ваших повседневных задач.
Тем не менее мы не рассмотрели еще один вопрос, связанный с "живым" поиском Ajax: как позволить пользователю сформировать закладку на страницу результатов.
12.5.4. Решение проблемы закладок
При поиске с использованием Ajax мы сталкиваемся с проблемой: создать закладку на страницу традиционным способом не получается. (Та же проблема возникает при использовании фреймов и всплывающих окон.) Закладки позволяют возвращаться в дальнейшем к результатам поиска без ввода запроса; кроме того, закладки удобно отправлять друзьям и коллегам с помощью электронной почты или приложений обмена мгновенными сообщениями. Поскольку поиск Ajax не требует дообработки на сервере, в процессе поиска мы не изменяем URL страницы, следовательно, сделав закладку на этот URL, мы просто отметим отправной пункт приложения, а не результаты, которые предполагалось сохранить.
Легким решением данной проблемы является добавление линии поведения, позволяющей запоминать результаты поиска. Мы можем создать динамическую строку, которая будет использоваться для создания динамической закладки. Эта динамическая строка будет содержать прямую ссылку на ту страницу, на которой она находится , и включать параметр строки запроса с искомым значением. Таким образом, записывая данную строку на страницу для формирования ссылки, пользователь может либо создать на нее закладку (щелкнув правой кнопкой мыши на ссылке), либо скопировать ссылку (при этом будут автоматически записаны условия поиска). Возможность считывания значения строки запроса мы опишем после того, как разберемся с созданием ссылки.
Ссылку можно создать при выполнении функции GrabNumber (). В наш документ добавляется еще один элемент span, в который мы поместим ссылку. В данном случае элемент span имеет идентификатор spanSave, как показано в листинге 12.11 (вызов метода getElementByld). Отметим, что элемент span можно разместить в любом месте страницы (что достаточно удобно Для пользователя).
Глава 12. "Живой" поиск с использованием XSLT 503
Листинг 12.11. Функция GrabNumber, содержащая ссылку-закладку
function GrabNumber(){
var strLink = "<a href= 1 " + location.href.split("?")[0] + "?q=" + document-Forml.user.value + '">Save Search</a>";
document.getElementById("spanSave").innerHTML = strLink;
Код, приведенный в листинге 12.11, генерирует динамическую ссылку на текущую страницу поиска и добавляет параметр строки запроса q со значением, указанным в текстовом окне. Именно параметр строки запроса позволит нам в будущем "вспомнить" произведенный поиск. Далее эта новая ссылка добавляется в элемент span на странице, чтобы пользователь мог выбрать ссылку и отправить ее другим пользователям или создать закладку на нее, щелкнув правой кнопкой мыши на ссылке и добавив ее в папку Избранное. В листинге 12.12 мы получаем значение строки запроса из URL во время загрузки страницы, а затем выполняем поиск автоматически, чтобы отобразить результаты.
Листинг 12.12. Получение значения строки запроса и выполнение поиска
window.onload = function(){
var strQS = window.location.search; var intQS = strQS.indexOf("q="); if(intQS != -1){
|
document.Forml.user.value = strQS.substring(intQS+2); |
|
|
GrabNumber(); |
|
|
} |
|
} |
щ |
|
|
|
|
К объекту окна мы добавили обработчик события onload, который выполнит функцию при загрузке страницы. Проверим, содержится ли значение строки запроса в URL; если да, то мы получаем значение. Значение строки запроса помещается в текстовом окне, а затем автоматически выполняется функция GrabNumber (), формирующая таблицу результатов. Добавление указанного кода позволяет создавать закладки на страницы поиска и получать результаты поиска на странице без ввода условий поиска вручную. Благодаря этому наш проект Ajax становится еще более дружественным к пользователю.
12.6. Реструктуризация |
_ |
Пришло время вывести "живой" поиск XSLT на следующий уровень, используя (вы догадались!) компонентное представление. Мы должны взять полученный стильный сценарий и реструктуризировать в объектноориентированный повторно используемый компонент. Начнем с XSLTобработки на стороне клиента. Отметим, что данный пример отличается от
Глава 12. "Живой" поиск с использованием XSLT 505
var helper = new XSLTHelper( 'phoneBook.xml', 1 transformation.xsl' ) ;
var canDoThis = helper.isXSLTSupported();
Для этого предоставим нашим пользователям статический метод, который выражается таким образом:
XSLTHelper.isXSLTSupported = function() {
return (window.XMLHttpRequest && window.XSLTProcessor) || XSLTHelper.isIEXmlSupported();
}
XSLTHelper.isIEXmlSupported = function() { if ( ! window.ActiveXObject )
return false;
try { new ActiveXObj ect("Microsoft.XMLDOM"); return true; }
c a t c h ( e r r ) { r e t u r n f a l s e ; }
>
Здесь мы не использовали ничего нового. Логика идентична определенной ранее; мы просто инкапсулировали информацию о наличии поддержки XSLT. Наверняка кто-то нас за это поблагодарит. Теперь же мы можем конкретизировать оставшуюся часть API XSLTHelper.
Не будем все усложнять. Как вы относитесь к тому, чтобы выполнение XSLT-обработки требовало от клиентов нашего класса вызова единственного метода? Для этого мы включим во вспомогательный объект дополнительные методы, разделяющие ответственности всей внутренней логики, но для клиентов мы реализуем один общий API. Семантика данного объекта будет следующей:
var helper = new XSLTHelper ( 'phoneBook.xml1, 'transformation.xsl1 ) ;
helper.loadView{ 'someContainerld1 );
В данном примере документ phoneBook. xml нужно преобразовать в HTML с помощью документа transformation.xsl, а полученный в результате HTML-код следует поместить в элемент с идентификатором someContainerld. Кроме того, зададим, что функция loadview() может принимать в качестве параметров либо строку, представляющую идентификатор элемента, либо сам элемент. Внутренний код функции сам определит, с чем он имеет дело, и отреагирует соответствующим образом. Да, кстати, если клиент не собирается повторно использовать экземпляр нашего вспомогательного объекта, все сказанное можно выразить в одной строке кода:
new XSLTHelper('phoneBook.xml1,
'transformation.xsl1 ).loadView('someContainerld1 ); Определив API и его семантику, мы можем реализовать его, как показано
в листинге 12.13.
506 Часть IV. Ajax в примерах
Листинг 12.13. Метод loadview loadView: function ( container ) { / / О Проверить поддержку XSLT
if ( ! XSLTHelper.isXSLTSupportedO ) return;
//© Заново инициализировать состояние вспомогательного объекта this.xmlDocument = null;
this.xslStyleSheet = null; this.container = $(container);
//© Запросить документы
new Ajax.Requestt this.xmlURL,
{onComplete: this.setXMLDocument.bind(this)J ); new Ajax.Request( this.xslURL,
{method:"GET", onComplete:
|
this.setXSLDocument.bind(this)} ) ; |
Ь |
m |
Первое, что делает метод loadView(), — это убеждается в том, что используемый браузер поддерживает XSLT О. Вообще-то, клиент уже должен был это сделать (как в нашем предыдущем примере), но если нам попался безответственный пользователь, лучше лишний раз все перепроверить. Затем метод присваивает значение null переменным состояния, которые будут хранить документы XML и XSL, и устанавливает ссылку на обновляемый контейнер ©. Наконец, метод отправляет запросы Ajax для извлечения документов XML и XSL ©, Когда сервер пришлет затребованный документ XML, будет вызван метод setXMLDocument (). Аналогично, когда сервер вернет документ XSL, вызывается метод setXSLDocument (). Реализация данных функций показана в листинге 12.14.
Листинг 12.14. Настройка документов XML и XSL
setXMLDocument: function(request) { this.xmlDocument = request.responseXML; this.updateViewIfDocumentsLoaded();
},
setXSLDocument: function(request) {
this . xslStyleSheet = request.responseXML; this.updateViewIfDocumentsLoaded();
Указанные методы сопоставляют с переменными состояния объекта XSLTHelper документы XML и XSL. Затем они вызывают метод updateViewifDocumentsLoaded(), который проверяет, инициализированы ли оба документа, и в случае положительного ответа обновляет представление. Метод updateViewIfDocumentsLoaded() реализован следующим образом:
updateViewIfDocumentsLoaded: function() {
if ( this.xmlDocument == null |I this.xslStyleSheet == null ) return;
Ьthis.updateView();
Глава 12. "Живой" поиск с использованием XSLT 509
ции компонента. Аргумент options передается методу setQptions(), который обеспечивает значения по умолчанию для всех настраиваемых данных О. Рассмотрим кратко этот метод.
setOptions: function(options) { this.options — options;
if ( !this.options.loadinglmage ) this.options.loadinglmage = 'images/loading.gif';
if ( !this.options.bookmarkContainerld ) this.options.bookmarkContainerld = 'bookmark1;
if { !this.options.resultsContainerld ) this.options.resultsContainerld - 'results';
if { !this.options.bookmarkText ) this.options-bookmarkText = 'Bookmark Search';
>'
В данном примере метод setOptions {) не настолько лаконичен, как в компоненте TextSuggest (см. главу 10), когда с помощью метода extend() библиотеки Prototype мы получили аккуратное и компактное выражение. Тем не менее сейчас метод выполняет те же действия и предоставляет значения по умолчанию для изображения, отображаемого в процессе загрузки, идентификатора элемента, содержащего закладку, идентификатора элемента, содержащего результаты, и, наконец, текста сгенерированной закладки. Как и в прошлый раз, если в объекте options были переданы значения этих свойств,* они заменяют указанные значения по умолчанию. Полученный в результате объект options представляет собой смешанный набор значений по умолчанию и значений, заданных пользователем. Затем данные опции используются в соответствующих местах сценария для настройки конфигурации компонента.
Разобравшись с настройкой конфигурации и значениями по умолчанию, вернемся к конструктору и напомним две ненавязчивые строки кода:
var oThis = this; lookupField.form.onsubmit = function(){
oThis.doSearch{); return false; };
Напомним, что в первоначальном варианте сценарий модифицировал HTML-страницу, помещая в форму поиска обработчик событий onsubmit.
<form name="Forml" onsubmit="GrabNumber();return false;">
Поскольку мы пытаемся сделать компоненты максимально ненавязчивыми (по крайней мере, с точки зрения того, сколько HTML-кода нужно изменить для использования компонента), две приведенные выше строки кода конструктора предлагают те же функциональные возможности, что и упомянутая модификация HTML-страницы. С точки зрения именования отличие заключается в переименовании GrabNumberO в более универсальный вариант doSearch(), причем doSearch() — это метод нашего компонента, а не глобальная функция. Кстати, посмотрим, как реализован метод doSearcht):
doSearch: |
function{) { |
if ( |
XSLTHelper.isXSLTSupported() ) |
|
this.doAjaxSearch(); |
else |
this.submitTheFormt); |
}, |
|
510 Часть IV. Ajax в примерах
Наш "разумный" компонент знает, что он должен убедиться в поддержке XSLT, а лишь затем пытаться выполнить XSLT-обработку, поэтому метод поиска использует написанный ранее API xsLTHelper и определяет, использовать ли XSLT-обработку или активизировать стандартную отправку формы. Действительно, довольно разумно. Клиент может просто вызывать метод doSearch(), не задумываясь о тонкостях использования XSLT. Обо всем позаботимся мы. Поэтому сейчас подробно рассмотрим два варианта поиска. Поскольку отправка формы проще, начнем именно с нее.
submitTheForm: function() {
var sesrchForm = this.lookupField.form; searchForm.onsubrait « function() { return true; }; searchForm.submit(); t
Ь
Указанный метод находит с помощью поля поиска ссылку на соответствующую форму и изменяет ее обработчик событий onsubmit на функцию, возвращающую значения true. Это позволяет явно возвращать запрос поиска на сервер. Затем метод вызывает метод submit () "родной" формы HTML, который инициирует традиционную отправку формы. В данном сценарии компонент предполагает наличие в форме соответствующего атрибута действия; также считается, что результат действия возвращает соответствующую страницу с результатами поиска.
Далее рассмотрим реализацию поиска средствами Ajax.
doAj axSearch: |
function() |
{ |
|
// |
О Показать |
изображение в процессе загрузки |
|
|
t h i s . s h o w L o a d i n g l m a g e ( ) ; |
||
|
v a r s e a r c h U r l = |
t h i s . a p p e n d T o U r l ( this.xmlURL, ' q 1 , |
|
// |
© Сформировать URL операции поиска |
||
|
|
|
t h i s . l o o k u p F i e l d . v a l u e ) ; |
// © Выполнить XSLT-обработку |
|||
|
new XSLTHelpertsearchUrl, t h i s . x s l t U R L ) . l o a d V i e w ( |
||
|
|
t h i s . o p t i o n s . r e s u l t s C o n t a i n e r l d ) ; |
|
// |
О Обновить |
закладку |
|
|
t h i s . u p d a t e B o o k m a r k ( ) ; |
||
Ь
Метод doAj axSearch () выполняет те же действия, что и первоначальный вариант нашего сценария, однако теперь каждый этап обработки помещен в отдельный метод, отвечающий за свою часть работы. Вы можете возразить и сказать, что данный метод имеет четыре ответственности. Но на самом деле ответственность одна: поиск. Однако она состоит из четырех частей, каждая из которых формулируется как ответственность. Рассмотрим их.
О Показать изображение в процессе загрузки. Поиск начинается с вызова метода, демонстрирующего изображение "идет загрузка". Используемое изображение определяется объектом опций.