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

Если вы когда-либо покупали рубашку в интерактивном магазине, то мог-Я ли столкнуться со следующей проблемой. Вы выбираете размер рубашки из раскрывающегося списка, а из следующего списка выбираете ее цвет. Затем вы отправляете заполненную форму и получаете сообщение 'Товара нет на складе", написанное гигантскими буквами. С чувством глубокого разочарования вы щелкаете на кнопке Назад или на предложенной ссылке, а затем выбираете новый цвет.

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

9.1. Сценарий двойной комбинации

В двойных связных списках содержимое одного списка зависит от варианта, выбранного в другом списке. Когда пользователь выбирает значение из первого списка, все элементы второго динамически обновляются. Обычно подобная схема называется сценарием двойной комбинации (double-combo script). \ Существуют два традиционных решения проблемы динамического заполнения второго списка: одно реализуется на стороне клиента, второе — на сервере. Напомним их, чтобы понять принцип их действия и вопросы, свя-

занные с ними.

9.1,1. Недостатки клиентского решения

Традиционно первое, о чем думают разработчики, — это использовать решение, переносящее всю работу на сторону клиента. В подобном решении, основанном на JavaScript, значения списка жестко кодируются на Web-странице в массивах JavaScript. После того как вы выбрали размер рубашки, сценарий заполняет следующий список, выбирая значения из массива. Данное решение показано на рис. 9.1.

С данным клиентским методом связана одна проблема: поскольку пользователь не связывается с сервером, на момент первого выбора массив может оказаться устаревшим. Другую проблему составляет время загрузки исходной страницы, на которое очень сильно влияет количество позиций в обоих списках. Представьте себе магазин с тысячей предметов; в массив JavaScript необходимо поместить цену каждой вещи. Поскольку код, представляющий данный массив, будет частью страницы, пользователю придется довольно долго ждать первой загрузки сайта (пользователь никак не может заблаговременно получить данную информацию). С другой стороны, метод JavaScript имеет и одно преимущество: после первой загрузки все происхо-

рис. 9.1. Клиентское решение

Рис. 9.2. Метод дообработки на сервере

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

9.1.2. Недостатки клиентского решения

Следующее традиционное решение заключается в возврате формы на сервер Для дообработки. В данном методе обработчик событий onchange в первом списке инициирует возврат страницы на сервер с помощью метода submit (), введенного в JavaScript-представление формы. В результате страница отправляется на сервер, донося выбранный пользователем элемент первого списка. Сервер, в свою очередь, запрашивает базу данных согласно значению, которое выбрал пользователь, и динамически заполняет второй список новыми значениями, вызывая повторное отображение страницы. Действия данного серверного метода представлены на рис. 9.2.

Недостатком описанного серверного метода является число обращений к серверу; при каждой перезагрузке страницы наблюдается задержка, вызванная необходимостью копирования по сети всей страницы. Визуально данная структура выглядит так, как показано на рис. 9.2. Кроме того, на стороне сервера необходимо реализовать дополнительный код, отвечающий за

Рис. 9.3. Решение, предлагаемое Ajax