10.5.3. День 3: включаем Ajax

420 Часть IV. Ajax в примерах

Во внутреннем представлении запросы отправляются следующим образом; Щ aj axEngine.sendRequest{

'fieldl^request',lparaml=vall1, 'param2=val2', . . .

);

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

Предлагаемый текст — отправка запроса Ajax

Разумеется, до отправки запроса придется сделать кое-что еще. Текстовый ввод должен сгенерировать событие onchange, которое мы будем ждать, и при выполнении определенных условий отправлять запрос о предполагаемых вариантах. Пока что написанные нами фрагменты кода находятся не на своих местах, но мы это поправим. Мы по-прежнему можем оперировать терминами контрактов и ответственности метода, которые желательно независимо реализовать в конечном продукте. Поэтому предположим, что некоторый фрагмент кода (который мы еще напишем) решает, что необходимо отправить запрос и получить ряд предполагаемых вариантов. Назовем эту функцию

this.callRicoAjaxEngine();

Ь

Единственное, что делает приведенный код, — это вызывает th.is.callRicoAj axEngine () при условии, что запрос не обработан. Этот простой механизм присваивает внутреннему булеву свойству this.handlingRequest значение true после создания запроса Ajax и false (рассмотрено ниже) — после обработки запроса. Если метод вызывается в момент обработки запроса, булеву свойству this.pendingRequest присваивается значение true. Это состояние сообщает обработчику, что, возможно, ему придется отправить еще один запрос после обработки текущего. Далее мы рассмотрим метод callRicoAj axEngine {), приведенный в листинге 10.23.

Листинг 10.23. Использование a j axEngine (Rico)

callRicoAjaxEngine: function() { // Построить массив параметров

var callParms = [];

callParms.push( this.id + '^request1); callParms.push{ T id= < + this.id); callParms.push( 'count=' + this.options.count);

callParms-push( 'query=' + this.lastRequestString); callParms.push( 'match_anywhere=l + this.options.matchAnywhere); callParms.push( 'ignore_case=' + this.options.ignoreCase);

var additionalParms = this.options.requestParameters t{ []; for( var i=0 ; i < additionalParms.length ; i++ )

callParms.push{additionalParms[i]);

Чтобы понять, что же делает данный метод, вначале необходимо рассмотреть механизм JavaScript, используемый в последней строке метода.

ajaxEngine.sendRequest.apply( ajaxEngine, callParms);

Здесь применяется метод applyO, доступный для всех функциональных объектов (подробности — в приложении Б). Проиллюстрируем его использование на простом примере.

Greeter,prototype.greetPeople = function(strl, str2)

{

alert('hello ' + strl + 'and ' + str2)

};

Предположим, что имеется экземпляр Greeter, именуемый friendlyperson, и в качестве аргумента ему нужно передать метод greetPeople{). Однако у нас нет параметров удобного для передачи вида, а имеется массив элементов people. В подобном случае выгодно использовать метод apply. Соответствующий код можно записать следующим образом:

var people = [ "Joe", "Sally" ]; friendlyPerson.greetPeople.apply( friendlyPerson, people);

Метод apply () преобразовывает массив, переданный как второй аргумент, в параметры метода первого класса и вызывает метод на объекте, переданном как первый параметр. Таким образом, приведенный код эквивалентен строчке

friendlyPerson.greetPeople( people[0], people[1));

Вернемся к нашей задаче. Нам требуется вызвать метод sendRequest () процессора ajaxEngine, принимающий в качестве первого параметра логическое имя запроса плюс переменное число строковых параметров вида key=value, представляющих параметры запроса. Здесь нужно быть очень аккуратными, поскольку мы запрашиваем параметры из различных источников и не знаем, сколько этих параметров. Рассмотрим код еще раз.

// О

v a r c a l l P a r m s - [ ] ;

c a l l P a r m s . p u s h ( t h i s . i d + ' ^ r e q u e s t ' ) ;

c a l l P a r m s . p u s h ( ' i g n o r e _ c a s e = ' + t h i s . o p t i o n s . i g n o r e C a s e ) ; // ©

v a r a d d i t i o n a l P a r m s = t h i s . o p t i o n s . r e q u e s t P a r a m e t e r s | | [ ] ; f o r ( v a r i=0 ; i < a d d i t i o n a l P a r m s . l e n g t h ; i++ )

c a l l P a r m s . p u s h ( a d d i t i o n a l P a r m s [ i ] ) ;

Массив параметров, отправляемый методу sendRequest () посредством apply, заселяется смешанной информацией: внутренним состоянием объекта, такими элементами, как идентификаторы и lastRequeststring, а также определенными свойствами объекта options (например, count, matchAnywhere, ignoreCase) О.

Тем не менее необходимо еще обеспечить механизм, позволяющий польза вателю компонента передавать помимо указанной информации внешние параметры ©. Для этого мы проверяем существование свойства объекта ор^ tions, именуемого requestParameters. Если его значение не равно null, оно предполагается равным массиву строк вида key=value. Этот массив последовательно проходится и добавляется к массиву callParms, уже заполненному параметрами компонента. Наконец, запрос отправляется.

ajaxEngine.sendRequest.apply{ ajaxEngine, callParms);

Все! С отправкой запроса мы разобрались. Теперь будем надеяться, что сервер находится в рабочем состоянии, получим ответный документ. Давайте разбираться, как мы будем обрабатывать ответ, когда он к нам поступит.

Предлагаемый текст — обработка ответа Ajax

Если мы собираемся обеспечить надежную отправку запросов, нам придется много поработать, поэтому лучше убедиться в надлежащей обработке ответного документа, иначе весь тяжкий труд будет напрасным. Напомним, что механизм ajaxEngine (Rico) направляет запрос к отправившему его методу ajaxUpdatet), передавая содержимое элемента <response>. Следовательно, необходимо написать метод a j axUpdate (), который будет точкой входа в процедуру обработки запроса. Метод ajaxUpdateO показан в листинге 10.24 вместе со своими вспомогательными методами разбора createSuggestionsO и getElementContent().

Листинг 10.24. Обработка ответа Ajax jMHHBHHHHHHBH^I

ajaxUpdate: function( ajaxResponse ) {

//Создать предположительные варианты this.createSuggestions( ajaxResponse ); if ( this.suggestions.length == 0 ) {

this.hideSuggestions{);

S( this.id + "_hidden").value = "";

}

//Создать и показать пользовательский интерфейс else {

this.updateSuggestionsDiv{);

this.showSuggestions();

this.updateSelection(0);

}

//Завершить обработку ответа this.handlingRequest = false; if ( this.pendingRequest ) {

this.pendingRequest = false;

this-lastRequestString = this.textlnput.value; // Отправить другой запрос

this.sendRequestForSuggestions();

}

},

createSuggestions: function(ajaxResponse) { this.suggestions * [];

var entries ~ ajaxResponse.getElementsByTagNamef'entry'); for ( var i = 0 ; i < entries.length ; i++ ) {