Рассмотрев вкратце технику работы со скрытыми фреймами, присту¬пим к более подробному ее изучению. Лучший способ изучения новой методики - рассмотреть принцип ее действия на примерах. Мы созда¬дим простую страницу поиска, в которой сотрудник отдела обслужи¬вания клиентов сможет отыскивать информацию о клиенте. Посколь¬ку это первый пример в книге, он очень прост: пользователь вводит идентификационный номер клиента и по нему получает информацию о клиенте. Подобные действия чаще всего связаны с базой данных, по¬этому придется создать дополнительный сценарий, который будет ра¬ботать на стороне сервера. В этом примере для создания серверного сценария избран язык РНР - прекрасный язык программирования, распространяемый с открытыми исходными кодами и применяемый для разработки серверных сценариев, и СУБД MySQL (www.mysql.org), также распространяемая с открытыми исходными кодами и прекрас¬но работающая в паре с РНР.
Этот пример предполагает работу с MySQL, но его можно опробовать и с любыми другими типами баз данных, для этого практически не по¬требуется вносить изменения в исходные тексты сценария.
Прежде чем приступить к поиску данных о клиенте, необходимо соз¬дать таблицу, их содержащую. Это можно сделать с помощью такого сценария SQL:
CREATE TA8LE 'Customers' ( ')\' 'J^ }У.::Г
'Customerld' int(1l) NOT NULL auto_inc<-emer.t, % -'Name' ;Varchar( 255) NOT NULL' default У'; ':
'Address' varchar(255) NOT NULL default; ", :
'City' varchar(255) NOT NULL default ",
'State' varchar(255) NOT NULL default ",
'Zip' varchar(255) NOT NULL default ",
'Phone' varchar(255) NOT NULL default ''
'E-mail- varchar(255) NOT NULL default ' . PRIMARY KEY ('Customerld') ) TYPEfMyiSAM C0MMENT='Sample Customer Data';
Самое важное поле в этой таблице - Customerld; оно содержит иденти¬фикатор, по которому будет производиться поиск сведений о клиенте.
PostgreSQL) этот идентификатор называется «ключом» или «первичным
ключом». - Примеч. науч.ред.
Этот сценарий можно скачать вместе с набором данных для примера с сайта www.wrox.com.
Создав таблицу и заполнив ее данными, можно переходить к коду HTML. Для работы с методикой скрытых фреймов в HTML необходи¬мо добавить набор фреймов, например так:

,:
. -
Очень важный момент в этом фрагменте - атрибут rows тега . Если этому атрибуту присвоено значение «100%, 0», броузер не будет отображать тело второго фрейма, которому присвоено имя hidden Frame. А для того чтобы не отображалась рамка, окружающая фреймы, атри¬буту f rameborder присвоено значение 0. И последний существенный мо¬мент состоит в том, что в объявлениях самих фреймов атрибуту no re¬size присвоено значение «noresize», чтобы пользователь по неосторож¬ности не смог изменить размеры фреймов и увидеть содержимое скры¬того фрейма; содержимое скрытого фрейма не предназначено для отображения.
Следующий файл - это страница, осуществляющая запрос и отобра¬жающая данные о клиенте. В ней нет ничего сложного, она содержит текстовое поле, в которое будет вводиться идентификатор клиента, кнопка, по нажатию которой будет отправляться запрос, и элемент , в котором будут отображаться результаты поиска.
/<р>Чтобы получить информацию о клиенте,"введите его идентификационный : номер:
:<р>Идентификационный:номер: ■^■■■■.••^v -■
Вы наверняка уже заметили, что по нажатию кнопки должна вызы¬ваться функция requestCustomerlnfoO, которая взаимодействует со скрытым фреймом, чтобы получить запрошенную информацию. Она просто выбирает значение, введенное в текстовое поле, и добавляет его в строку запроса, отсылаемого сценарию getcustomerdata. php, в резуль¬тате чего получается URL следующего вида: getcustomerdata. php?id=23. Затем этот URL присваивается скрытому фрейму. Вот эта функция:
В первой строке функции из текстового поля извлекается идентифика¬тор клиента ("txtCustome rid "). Для этого вызывается функция document. getElementById(), которой передается идентификатор поля ввода ("txt-Customerld "), и запрашивается значение свойства value. (В свойстве val¬ue хранится текст, взятый из поля ввода.) Затем полученный иденти¬фикационный номер клиента добавляется в конец строки getcusto¬merdata. php?id= ", в результате получается полный URL. Во второй стро¬ке полученный URL присваивается скрытому фрейму. Чтобы получить ссылку на скрытый фрейм, сначала надо с помощью объекта top обра¬титься к самому верхнему окну броузера. Этот объект содержит массив frames, внутри которого и находится скрытый фрейм. Каждый фрейм -это всего лишь объект-окно, поэтому ему можно указать местоположе¬ние требуемого документа, записав в свойство location значение URL.Вот все, что необходимо сделать, чтобы выполнить запрос. Обратите внимание, что поскольку это запрос типа GET (информация передает¬ся в строке запроса), то выполнить его не составляет никакого труда. (Вскоре вы увидите, как посылать запросы типа POST с применением скрытых фреймов.)
Кроме функции requestCustomerlnfoO вам потребуется еще одна функ¬ция, которая будет отображать возвращенные на запрос данные. Эта функция - displayCustomerlnfoQ - будет вызываться из скрытого фрей¬ма, когда поступит ответ от сервера. Единственный параметр функции -это строка, содержащая сведения о клиенте, которые должны быть отображены:
function displayCustomerlnfo(sText) {
¥ var divCustomerlnfo * document.getElement8yId(''divCustomerInfo"); . divCustomerlnfo.innerHTML = sText;

Первая строка этой функции получает ссылку на элемент , в ко¬тором будут отображаться полученные данные. Вторая строка функции записывает строку sText1 в свойство innerHTML элемента . Свой¬ство innerHTML позволяет внедрить содержимое строки в код HTML. На этом код основной отображаемой страницы заканчивается. Теперь перейдем к рассмотрению логики работы на стороне сервера.
Основной программный код сценария getcustomerdata. php представля¬ет собой достаточно простую HTML-страницу с двумя вставками кода на языке РНР:
Первый блок кода PHP на этой странице реализует логику извлечения сведений о клиенте (вскоре мы рассмотрим ее). Второй блок РНР выво¬дит в элемент значение переменной $slnf о, в которой содержат¬ся данные о клиенте. Именно из этого элемента вы и будете чи¬тать данные и передавать их в видимый фрейм. Для этого необходимо создать функцию JavaScript, которая будет вызываться по окончании загрузки возвращенной страницы:Эта функция назначается в качестве обработчика события window, onload. | Сначала она получает ссылку на элемент , в котором содержится [ информация о клиенте. Затем она обращается к видимому фрейму че- I рез массив top. frames и вызывает функцию displayCustomerlnfoQ, опи- * санную ранее, которой передается содержимое свойства innerHTML эле- , мента .
Это весь код JavaScript, который необходим для передачи информа- | ции между фреймами. Но откуда вообще берется эта информация? ? Чтобы извлечь сведения из базы данных, необходимо добавить код на языке РНР.
Прежде всего в коде РНР необходимо описать все части данных, кото- : рые вам потребуются. В этом примере будут нужны: идентификацион- | ный номер клиента, по которому будет производиться поиск, перемен- • ная $slnf о, в которой будут возвращаться данные, и сведения, необхо- : димые для выполнения запроса к базе данных (сервер базы данных, имя базы данных, имя пользователя, пароль и строка SQL-запроса):
Работа этого блока начинается с извлечения идентификационного но¬мера клиента из строки запроса. Чтобы упростить работу с параметра¬ми строки запроса, РНР организует их в виде массива $_GET. Получен¬ный идентификатор сохраняется в переменной $sID и используется при создании строки SQL-запроса, которая сохраняется в переменной $sOue-гу. Здесь также создается переменная Sslnfo, в которую первоначально записывается пустая строка. Все остальные переменные в этом блоке содержат информацию, описывающую вашу конфигурацию БД, - их значения надо заменить на значения, соответствующие вашей БД.
На следующем шаге, после получения строки, введенной пользовате¬лем и после подготовки к работе с базой данных, выполняется соедине¬ние с этой базой данных, выполняется запрос и полученные данные возвращаются обратно. Если клиент с заданным идентификатором бу¬дет найден, переменная $slnf о заполняется кодом HTML, содержащим все сведения, включая ссылку на адрес электронной почты. Если кли¬ента с таким идентификатором не существует, то в переменную $sInfo будет записано сообщение об ошибке:
Первые две строки в выделенном блоке устанавливают соединение с ба¬зой данных MySQL. Далее вызывается функция mysql_query(), исполня¬ющая SQL-запрос. Если она возвращает результат, содержащий хотя бы одну запись, то данные извлекаются из полученной записи и сохра¬няются в переменной $slnf о, в противном случае в $slnf о записывается сообщение об ошибке. Последние две строки закрывают соединение с базой данных.
Объяснение всех сложностей, связанных с программированием в РНР и MySQL, далеко выходит за рамки этой книги. Тем, кто желает подробнее познако¬миться с этой темой, рекомендуем книгу «Beginning РНР, Apache, MySQL Web Development (Wiley Press, ISBN 0-7645-5744-0).
Если теперь вывести содержимое переменной Sslnfo в элемент , то он будет содержать соответствующую информацию. Обработчик со¬бытия onload считывает данные и отправляет их обратно в видимый фрейм. Если информация о затребованном клиенте будет найдена в ба¬зе данных, она будет отображена так, как показано на рис. 2.2.
Если же клиент с данным идентификатором отсутствует, будет выведено сообщение об ошибке в том же самом месте экрана. В любом случае со¬трудник отдела обслуживания будет удовлетворен результатом. На этом мы заканчиваем наш первый пример применения технологии Ajax.