Возможен и другой вариант: добавить к серверному коду оператор £jfl else или switch-case. Чтобы использовать структуру if-else, нужно опр^ делить, какой запрос следует выполнять для возврата соответствующих зн&.

чений. Простейшая проверка: решить, какой запрос SQL использовать, ос. новываясь на имени заполняемого элемента select. Таким образом, пр> реализации тройной комбинации мы можем проверять значение переменной strElem. При этом нам не потребуется изменять обработчики событий onchange в клиентской части кода.

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

Как вы думаете, чего не хватает в изложенном материале? Обобщения! Мы описали отличную модную технику реализации двойных списков, которая, однако, требует небольшой доводки, чтобы ее можно было обобщить. Мы перейдем к этому, так что держитесь! Но вначале давайте рассмотрим кое-что еще более фундаментальное: инкапсуляцию некоторых элементов внутренней "кухни" Ajax. Для начала можно взять объект net.ContentLoader, кратко представленный в главе 3 и более подробно рассмотренный в главе 5. Давайте создадим этот объект, чтобы еще лучше понять Ajax. В идеальном случае данный элемент должен стать нашим объектом-'тгомощником" Ajax, который формирует всю инфраструктуру Ajax. Это позволит сосредоточиться на разработке вопросов, связанных только с зависимыми списками, а также сократить код, требуемый всеми остальными компонентами. Наш улучшенный объект net.ContentLoader в идеальном случае должен инкапсулировать состояние и поведение, требуемые для выполнения перечисленных ниже задач.

• Создание объекта XMLHttpRequest, который был бы понятен всем браузерам и не зависел от отправки запросов. Это позволит вызывающей стороне использовать метод создания независимо от остальной части объекта. Данная возможность полезна, если вызывающая сторона использует другую идиому, каркас или механизм для действия запроса/отклика.

• Предложить более удобный API для обработки параметров запроса. В идеальном случае вызывающая сторона должна просто передавать от приложения состояние и разрешать "помощнику" net. ContentLoader решать все вопросы, связанные с созданием строк запроса.

• Маршрутизация отклика обратно к компоненту, который знает, как его обработать, и выполнение соответствующей обработки ошибок.

Ну что ж, начнем сборку объекта net .ContentLoader, а затем переформулируем наш сценарий двойного списка как компонент.

9.6.1. Новый и улучшенный объект netContentLoader

Рассмотрим вначале, как следует изменить конструктор.

net.ContentLoader = function! component, url, method, requestParams ) {

// Состояние net.ContentLoader this.component = component; this.url = url;

this.requestParams = requestParams; this.method = method;

}

Данный конструктор вызывается с четырьмя аргументами. Первый, component, обозначает объект, пользующийся услугами данного "помощника". Вспомогательный объект будет предполагать, что component имеет метод aj axUpdate () для обработки откликов и метод handleError () для обработки состояний ошибки. Подробнее этот вопрос мы рассмотрим позже. Второй аргумент, url, обозначает URL, вызываемый данным "помощником" для асинхронного получения данных с сервера. Параметр method обозначает метод HTTP-запроса. Допускаются значения GET и POST. Наконец, аргумент геquestParameters представляет собой массив строк вида key=value, которые обозначают параметры запроса, передаваемые запросу. Это позволяет вызывающей стороне задавать набор параметров запроса, которые не меняются между запросами. Эти параметры будут присоединены к дополнительным параметрам запроса, передаваемым в рассмотренный ниже метод sendRequest Таким образом, наш объект-'помощник" может следующим образом созда ваться клиентом:

var str = "Eastern";

var aComp - new SomeCoolComponent(...);

var ajaxHelper = new net.ContentLoader( aComp, "getRefreshData.aspx", "POST",

[ "query=" + str, "ignore_case=true" ]

);

Рассмотрим теперь оставшуюся часть API. Здесь следует обратить в: ше внимание на стилистическую природу примера кода. Область действ» методов этого объекта распространяется на объект-прототип, прикрепле; ный к функции конструктора. Данная технология является стандартной п\ написании объектно-ориентированного кода JavaScript, поскольку примен

ет определения метода ко всем экземплярам объекта. Тем не менее сущ^. ствует несколько способов, позволяющих задать такое поведение синтаксически. Одним из наших любимых (его структура позаимствована из библиотеки prototype.js, внедренной в Ruby On Rails) является буквальное создание объекта-прототипа.

net.ContentLoader.prototype = {

// Первый метод, прикрепленный к прототипу m e t h o d l : f u n c t i o n ( a , b, с) {

ь

// Второй метод

method2: function() { }, method3: function(a) { }

};

С точки зрения синтаксиса достоинством данного подхода является лаконичность. Как читать данный фрагмент? Внешние скобки представляют литерал объекта, а содержимое — это разделенный запятыми список пар "свойство-значение" в объекте. В данном случае наши свойства являются методами. Пары "свойство-значение" задаются как имя свойства, затем следует двоеточие, а после него ~ значение свойства. В этом случае значения (или определения, если вам угодно) являются литералами функций. Все просто, правда? Достаточно помнить, что методы, которые будут использоваться начиная с этого момента, предполагаются содержащимися внутри литеэала объекта-прототипа (как показано выше). Кроме того, обратите внимание на то, что последнее свойство не требует (а следовательно, может не №геть) после себя запятой. Теперь давайте вернемся к рассматриваемой задаче: сборке API.

API должен удовлетворять упомянутым выше требованиям, поэтому рас- :мотрим их последовательно. Первое, что нам требуется, — обработка содания объекта XMLHttpRequest независимо от браузера. Звучит, как метод! С счастью, мы уже реализовывали его несколько раз. Все, что требуется сейгас, — создать его как метод нашего "помощника" (листинг 9.6), чтобы нам ольше никогда не приходилось его писать.

Листинг 9.6. Метод getTransport

r e t u r n t r a n s p o r t ;

},

Данный код не требует очень подробных объяснений, поскольку данную тему мы рассматривали неоднократно, однако на этот раз мы привели аккуратно упакованный метод, обеспечивающий работающий во всех браузерах объект Ajax транспорта данных для обработки нашей асинхронной связи. Второе упомянутое нами требование касалось обеспечения более удобного API для обработки параметров запроса. Чтобы его можно было использовать во множестве приложений, очевидно, что отправляемый запрос будет требовать в качестве параметров значения времени выполнения. Мы уже записали некоторое исходное состояние, представляющее параметры запроса, постоянные для различных запросов, но кроме этого нам требуются значения времени выполнения. Рассмотрим поддержку приведенного ниже кода.

//Предполагается инициализация со значениями времени выполнения

var a,b,c;

var ajaxHelper = new net . ContentLoader( ... ); ajaxHelper.sendRequest( "paraml=" + a, "param2=" + b,

"param3=" + с );

Итак, при данном требовании к использованию определяется sendRequest, как показано в листинге 9.7.

sendRequest: function() {

/ / О Записываем аргументы в массив var requestParams = ( ] ;

for ( var i = 0 ; i < arguments.length ; i++ ) { requestParams.push(arguments[i]);

}

// © Создаем запрос

var request = this.getTransport(); request.open( this.method, this.url, true ); request.setRequestHeader( 'Content-Type',

'application/x-www-form-urlencoded'); // © Задается обратный вызов

Данный метод расщепляет процесс отправки запроса на четыре этапа. Рассмотрим эти этапы подробнее.

ОДанный этап использует тот факт, что JavaScript создает псевдомассив arguments, область действия которого распространяется на функцию. Как можно догадаться по имени, агдитег^эсодержит аргументы, переданные функции. В данном случае ожидается, что аргументы - это строки вида key=value. Пока что мы просто копируем их в массив первого класса. Кроме того, обратите внимание, что все переменные, созданные в этом методе, начинаются с ключевого слова var. Хотя компилятору

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

JavaScript сильно бы понравилось, если бы мы оставили ключевое слово varB покое, то, что мы так не поступили, очень важно Почему? Если мы опустим это ключевое слово, переменная создается с глобальной областью действия — т.е. видимой для всего кода в вашей вселенной JavaScript! Это может вызвать нежелательное взаимодействие с остальным кодом {например, в использованном вами чьем-либо сценарии переменная названа точно так же, как и у вас). Короче говоря, подобная ситуация гарантирует кошмар отладки. Позаботьтесь о себе сами — приучитесь использовать переменные с локальной областью действия везде, где это возможно.

©Здесь наш метод использует метод getTransport, определенный в листинге 9.6, для создания экземпляра объекта XMLHttpRequest. Затем обрабатывается запрос, и его заголовок Content-Type инициализируется, как в предыдущих примерах. Ссылка на объект хранится в локальной переменной request.

©На данном этапе решается задача обработки отклика. Вы наверняка пытаетесь догадаться, зачем была создана переменная oThis. Обратите внимание на следующую строку, где фигурирует анонимная функция, реагирующая на изменение статуса готовности (onreadystatechange) нашего объекта запроса и ссылающаяся на oThis. Данный прием называется замыканием. В силу того что внутренняя функция обращается к локальной переменной, создается неявный контекст выполнения (или область действия), позволяющий поддерживать ссылку после выхода из замыкающей функции. (Подробнее о замыкании речь пойдет в приложении Б.) Это позволяет реализовать обработку отклика Ajax посредством вызова метода первого класса на нашем объекте ajaxHelper.

ОНаконец мы отправляем запрос Ajax. Обратите внимание на то, что массив, созданный нами на этапе 1, передается методу queryString, который преобразовывает его в одну строку. Эта строка становится телом запроса Ajax. В действительности метод queryStringHe является частью открытого контракта, который мы обсуждали ранее, но относится к вспомогательным методам, облегчающим чтение и понимание кода. Рассмотрим его подробнее в листинге 9.8.

queryString += requestParams[i] + •&';

}

queryString • queryString.substring{0, queryString.length-1);

}

return queryString;

Данный метод принимает параметры запроса, с которыми был создан объект net.ContentLoader, а также дополнительные параметры времени выполнения, переданные в метод sendRequest и помещенные им в общий массив. Затем массив обрабатывается и превращается в строку запроса. Результат описанных действий представлен ниже.

var helper = new net.ContentLoader{ someObj, someUrl, "POST",

["a-one", -b-twon]

);

var str = ajaxHelper.queryString(

["c-three", "d-four"]

);

str -> "a*=one&b=two&c=three&d=four"

Последнее, что нам требуется сделать для получения полнофункционального вспомогательного объекта, — это реализовать сотрудничество с компонентом с целью обработки отклика, поступающего от Ajax. Если вы были внимательны, то, возможно, уже знаете имя данного метода. Действительно, наш метод sendRequest уже задал, как он будет обрабатывать отклик свойства onreadystatechange запроса.

r e q u e s t . o n r e a d y s t a t e c h a n g e • f u n c t i o n ( ) { o T h i s . h a n d l e A j a x R e s p o n s e ( r e q u e s t )

}

Все правильно, осталось всего лишь реализовать метод handleAj axResponse. Реализация этого метода приведена в листинге 9.9.

handleAjaxResponse: function(request) {