Глава 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){

К объекту окна мы добавили обработчик события onload, который выполнит функцию при загрузке страницы. Проверим, содержится ли значение строки запроса в URL; если да, то мы получаем значение. Значение строки запроса помещается в текстовом окне, а затем автоматически выполняется функция GrabNumber (), формирующая таблицу результатов. Добавление указанного кода позволяет создавать закладки на страницы поиска и получать результаты поиска на странице без ввода условий поиска вручную. Благодаря этому наш проект Ajax становится еще более дружественным к пользователю.

Пришло время вывести "живой" поиск 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:

Первое, что делает метод 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();