среду, мы также должны проверить возможность атаки через внедрение S Q e кода. Это защитит базу данных от злоумышленных запросов.

Получив значение выбранной области, необходимо сгенерировать строку SQL, чтобы мы могли извлечь из базы данных соответствующие территории ©. Нас интересуют два столбца: TerritoryDescription и TerritorylD из таблицы Territories базы данных. Значение области мы вводим в условие WHERE выражения SQL. Чтобы гарантировать, что в создаваемом списке результаты будут идти в алфавитном порядке, мы дополнительно устанавливаем, условие ORDER BY равным TerritoryDescription. Далее следует выполнить выражение SQL О. В данном случае мы вызываем функцию FillDataTable() создающую соединение с сервером базы данных, выполняющую запрос и возвращающую результаты в таблицу данных.

Итак, мы получили результаты запроса SQL, теперь требуется создать первую часть документа XML ©, который обсуждался в листинге 9.2. Мы начинаем документ и добавляем объект selectElement, содержащий значения параметров formName и formElem, полученные из параметров запроса.

В этом месте нужна проверка: вернул ли запрос SQL какие-либо результаты ©. Если результаты есть, мы добавляем к XML-документу вводную опцию "Select A Territory" ©.

Далее мы циклически проходим по результатам, представленным в DataTable ©, заполняя значением столбца TerritoryDescription дескриптор орtionText. а значением столбца TerritorylD — дескриптор optionValue. Вложив пары "описание-идентификатор" в дескриптор позиции, мы получаем легкий способ циклического прохода значений на стороне клиента с помощью методов DOM XML (реализованных на JavaScript). Заполнив полученными результатами документ XML, нужно закрыть корневой элемент selectChoice и записать ответ на выходной странице 0. Клиенту возвращается ответный документ XML, а объекту ContentLoader сообщается, что обработка на стороне сервера завершена. Далее объект ContentLoader вызывает на стороне клиента функцию FillDropDown(), которая обработает созданный нами XML-документ.

Подытожим, что мы сделали на стороне сервера. Мы взяли значение из выбранного элемента списка и организовали запрос к базе данных, не отправляя на дообработку на сервере всю страницу. Затем мы сгенерировали документ XML и вернули его клиенту. Следующий этап обработки снова будет происходить на стороне клиента, где мы должны преобразовать элементы XML в опции второго списка.

9.4. Представление результатов

Итак, теперь в документе XML у нас есть результаты запроса базы данных, и мы собираемся пройти по его элементам, используя программный интерфейс приложения DOM JavaScript. С помощью функции getElementsByTag^' Name {) мы можем легко "перепрыгивать" на любой элемент документа. Эта Функция с помощью имени элемента находит его в DOM (немного похоже иа то, как выдвигались алфавитные закладки в старомодном Rolodex). По-

Глава 9. Динамические связанные комбинации

дольку многие элементы в документе XML могут иметь одинаковые име- а функция getElementsByTagName () в действительности возвращает массив цементов, выстроенных по порядку их появления в документе.

д.4.1. Навигация в документе XML

Наконец-то мы можем завершить клиентскую часть сценария, добавляющую опции во второй список. Имена формы и элемента select, которые мы должны заполнить, задаются в документе XML вместе со всеми доступными опциями списка. Чтобы выделить эти опции и вставить их в элемент select, нам необходимо пройти по всем элементам документа.

Как только объект ContentLoader получит с сервера документ XML, он вызывает функцию FillDropDown(), приведенную в листинге 9.2. В функции FillDropDown() мы проходим по элементам entry документа XML и создаем для каждого из них новый объект Option. Данные объекты представляют пары "текст-значение"', которые будут добавлены во второй список. В листинге 9.5 функция FillDropDown() показана полностью.

Листинг 9.5. Обновление страницы с использованием данных из XML-ответа

/ / О Получить ответный XML-документ function FillDropDown(){

// © Получить имя формы и элемента select

var xmlDoc = this.req.responseXML.documentElement; var xSel = xmlDoc.

getElementsByTagName('selectElement1)[01; var strFName = xSel.

childNodes[0],firstChild.nodeValue; var strEName = xSel.

childNodes[1].firstChild.nodeValue; // © Получить ссылку на элемент select

var objDDL = document.forms[strFName]. elements[strEName];

objDDL.options.length = 0;

// О Последовательно пройти по XML-документу, добавляя опции var xRows = xmlDoc.

getElementsByTagName('entry1 ); for{i=0;i<xRows.length;i++){

var theText = xRows[i]. childNodes[0].firstChild.nodeValue;

var theValue = xRowsfi]. childNodes[l].firstChild.nodeValue;

var option - new Option(theText, theValue); try{ objDDL.add(option,null);

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

Функция FillDropDown() вызывается объектом ContentLoader. как толь. ко он получит и разберет XML-ответ. Объект ContentLoader вызывается в функции FillDropDown() посредством ссылки this, и с его помощью у», получаем ответный документ responseXML Как только у нас будет ссылка на объект documentElement отклика О, мы можем использовать функции DOM JavaScript для навигации по его узлам. Первая информация, которую нам нужно получить, — целевой список select, к которому мы добавим новые опции. Мы ищем элемент, именуемый selectElement, используя функцию getElementsByTagName () и выбирая первый элемент из возвращенного этой функцией массива. После этого мы можем переходить к дочерним узлам @. Первый дочерний узел содержит имя формы, а второй — имя списка select.

Используя два указанных значения, мы обращаемся собственно к самому целевому списку © и очищаем все существующие опции, устанавливая длину массива его опций равной 0. Теперь мы можем добавлять новые опции к списку. Нам требуется доступ к элементам entry документа XML, поэтому мы еще раз вызываем функцию getElementsByTagName(). На этот раз требуется циклически пройти по массиву элементов, который возвращает эта функция, и получить пары "текст-значение" из каждого элемента О. Первый узел-потомок каждого элемента entry представляет собой текст опции, который будет показан пользователю, второй — значение. Получив два этих значения, мы создаем новый объект Option, передающий текст опции как первый параметр конструктора и значение опции — как второй. Затем к целевому элементу target добавляется новая опция, и процесс повторяется, пока не будут добавлены все новые опции. Сигнатура метода для select.add() зависит от браузера, поэтому мы используем оператор try .. . catch, пока не получим искомые сведения. Это все, что нужно-было сделать для завершения нашей структуры связанных списков. Теперь можно загружать HTMLстраницу, выбирать регион и наблюдать, как второй раскрывающийся список заполняется прямо из базы данных. На рис. 9.7 показано, как это выглядит. В данном примере из первого списка выбран регион Eastern, затем из базы данных извлекаются и отображаются во втором списке соответствующие территории. Далее из первого списка выбирается регион Southern, после чего второй список заполняется соответствующими территориями.

Как видно на рис. 9.7, нам осталось сделать еще одно: изменить внешний вид списка, сделав его более привлекательным. Размер второго списка увеличивается при заполнении опциями. Данное смещение размера можно исправить, применив к элементу правило CSS (Cascading Style Sheet — каскадная таблица стилей).

9.4.2. Применение каскадных таблиц стилей

Каскадные таблицы стилей позволяют менять визуальные свойства элемента. Мы можем изменить цвет и семейство шрифта, ширину элемента и т.д. На рис. 9.7 видно, что второй элемент select изначально имеет ширину всего несколько пикселей, поскольку не содержит ни одной опции. При выборе из первого списка региона Eastern второй элемент select расширяется Это

Рис. 9,7. Зависимые списки в действии

Рис. 9.8. В различных браузерах элемент s e l e c t визуализируется по-разному

изменение размера режет глаза и может раздражать пользователя. Чтобы решить эту проблему, можно задать ширину списка.

<select name="ddlTerritory" style="width:200px"x/select>

Однако так мы не снимем всех проблем, если, например, одно из отображенных значений больше установленной нами ширины. В Firefox, если элемент находится в фокусе, опции раскрывающегося списка показываются так, чтобы был виден весь их текст. Однако в Microsoft Internet Explorer текст усекается и не виден пользователю, как показано на рис 9.8.

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