Рассмотрев вкратце технику работы со скрытыми фреймами, приступим к более подробному ее изучению. Лучший способ изучения новой методики - рассмотреть принцип ее действия на примерах. Мы создадим
простую страницу поиска, в которой сотрудник отдела обслуживания клиентов сможет отыскивать информацию о клиенте. Поскольку это первый пример в книге, он очень прост: пользователь вводит идентификационный номер клиента и по нему получает информацию о клиенте. Подобные действия чаще всего связаны с базой данных, поэтому придется создать дополнительный сценарий, который будет работать на стороне сервера. В этом примере для создания серверного сценария избран язык РНР- прекрасный язык программирования,
распространяемый с открытыми исходными кодами и применяемый для разработки серверных сценариев, и СУБД MySQL (www.mysql.org), также распространяемая с открытыми исходными кодами и прекрасно,работающая в паре с РНР.
Прежде чем приступить к поиску данных о клиенте, необходимо создать таблицу, их содержащую. Это можно сделать с помощью такого сценария SQL:
CREATE TABLE 'Customers'(
'Customerld' int(11) NOT NULL autoiincrement,
Name' varchar(255) NOT NULL default '',
City' varchar(255) NOT NULL default '',
State'varchar(255) NOT NULL default '',
Zip'varchar(255) NOT NULL default '',
E-mail'varchar(255) NOT NULL default '',
PRIMARY KEY('CustomerId')
)TYPE=MyISAM COMMENT='Sample Customer Data';
Самое важное поле в этой таблице - Customerld; оно содержит идентификатор, по которому будет производиться поиск сведений о клиенте.
Этот сценарий можно скачать вместе с набором данных для примера с сайта www.wrox.com.
Создав таблицу и заполнив ее данными,1 можно переходить к коду HTML. Для работы с методикой скрытых фреймов в HTML необходимо добавить набор фреймов, например так:
ч
Очень важный момент в этом фрагменте - атрибут rows тега .
Если этому атрибуту присвоено значение «100%, 0», броузер не будет отображать тело второго фрейма, которому присвоено и м я hiddenFrame.
А для того чтобы не отображалась рамка, окружающая фреймы, атрибуту frameborder присвоено значение 0. И последний существенный момент состоит в том, что в объявлениях самих фреймов атрибуту noresize присвоено значение «noresize», чтобы пользователь по неосторожности не смог изменить размеры фреймов и увидеть содержимое скрытого фрейма; содержимое скрытого фрейма не предназначено для отображения.
Следующий файл - это страница, осуществляющая запрос и отображающая данные о клиенте. В ней нет ничего сложного, она содержит текстовое поле, в которое будет вводиться идентификатор клиента, кнопка, по нажатию которой будет отправляться запрос, и элемент , в котором будут отображаться результаты поиска.
<р>Чтобы голучить информацию о клиенте, введите его идентификационный номер:
^Идентификационный номер::
Вы наверняка уже заметили, что по нажатию кнопки должна вызываться функция requestCustomerlnfoO, которая взаимодействует со скрытым фреймом, чтобы получить запрошенную информацию. Она просто выбирает значение, введенное в текстовое поле, и добавляет его
в строку запроса, отсылаемого сценарию getcustomerdata. php, в результате чего получается URL следующего вида: getcustomerdata. php?id=23.
Затем этот URL присваивается скрытому фрейму. Вот эта функция:
function requestCustomerlnfoO <
var sid = document.getElementById)"txtCustomerld").value;
top.frames["hiddenFrame"].location = getcustomerdata.php?id=" + sId
}
В первой строке функции из текстового поля извлекается идентификатор
клиента ("txtCustomerld"). Д л я этого вызывается функция document.
getElementById() , которой передается идентификатор п о л я ввода ( " t x t Customerld"),
и запрашивается значение свойства value. (В свойстве v a l ue
хранится текст, взятый из поля ввода.) Затем полученный идентификационный
номер клиента добавляется в конец строки "getcustomerdata.
php?id=", в результате получается полный URL. Во второй строке
полученный URL присваивается скрытому фрейму. Чтобы получить
ссылку на скрытый фрейм, сначала надо с помощью объекта top обратиться
к самому верхнему окну броузера. Этот объект содержит массив
frames, внутри которого и находится скрытый фрейм. Каждый фрейм -
это всего лишь объект-окно, поэтому ему можно указать местоположение
требуемого документа, записав в свойство l o c a t i o n значение URL.
Вот все, что необходимо сделать, чтобы выполнить запрос. Обратите
внимание, что поскольку это запрос типа GET (информация передается
в строке запроса), то выполнить его не составляет никакого труда.
(Вскоре вы увидите, к а к посылать запросы типа POST с применением
скрытых фреймов.)
Кроме функции requestCustomerlnfoO вам потребуется еще одна функция,
которая будет отображать возвращенные на запрос данные. Эта
функция - displayGustomerJnfoO - будет вызываться из скрытого фрейма,
когда поступит ответ от сервера. Единственный параметр функции -
это строка, содержащая сведения о клиенте, которые должны быть
отображены:
function displayCustomerlnfo(sText) {
var divCustomerlnfo=idocument.getElementById("divCustomerInfo");
divCustomerlnfo.innerHTML = sText;
}
Первая строка этой функции получает ссылку на элемент , в котором
будут отображаться полученные данные. Вторая строка функции
записывает строку sText1 в свойство innerHTML элемента . Свойство
innerHTML позволяет внедрить содержимое строки в код HTML.
На этом код основной отображаемой страницы заканчивается. Теперь перейдем к рассмотрению логики работы на стороне сервера.
Основной программный код сценария getcustomerdata. php представляет собой достаточно простую HTML-страницу с двумя вставками кода на языке РНР
Информация о клиенте
<? php
//код php
?>
<? php echo $sInfo ?>
Первый блок кода PHP на этой странице реализует логику извлечения сведений о клиенте (вскоре мы рассмотрим ее). Второй блок РНР выводит в элемент значение переменной $slnf о, в которой содержатся
данные о клиенте. Именно из этого элемента вы и будете читать данные и передавать их в видимый фрейм. Для этого необходимо создать функцию JavaScript, которая будет вызываться по окончании
загрузки возвращенной страницы:
window.onload - function(){
var divInfoToReturn = document.getElementByldC'divInfoToReturn");
top frames ["dispiayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
};
Эта функция назначается в качестве обработчика события window, onload.
Сначала она получает ссылку на элемент , в котором содержится информация о клиенте. Затем она обращается к видимому фрейму через массив top. frames и вызывает функцию displayCustomerlnfoO, описанную
ранее, которой передается содержимое свойства innerHTML элемента .
Это весь код JavaScript, который необходим для передачи информации между фреймами. Но откуда вообще берется эта информация?
Чтобы извлечь сведения из базы данных, необходимо добавить код на языке РНР.
Прежде всего в коде РНР необходимо описать все части данных, которые вам потребуются. В этом примере будут нужны: идентификационный номер клиента, по которому будет производиться поиск, переменная $slnf о, в которой будут возвращаться данные, и сведения, необходимые для выполнения запроса к базе данных (сервер базы данных, имя базы данных, имя пользователя, пароль и строка SQL-запроса):
<?php
$sID = S_GET["id"];
$sInfo="";
$SsDBServcr="your.databaser.server";
$SsDBName = "имя_базы_данных";
SsOBUsername = "имя_пользователя_базы данных";
SsDBPassword = "пароль_пользователя_базы данных";
SsQuery = "Select •.from Customers where CustomerId=".$sID;
// остальной код
?>
Работа этого блока начинается с извлечения идентификационного номера клиента из строки запроса. Чтобы упростить работу с параметрами строки запроса, РНР организует их в виде массива $_GET. Полученный
идентификатор сохраняется в переменной $sID и используется при создании строки SQL-запроса, которая сохраняется в переменной $sQueгу. Здесь также создается переменная $slnfо, в которую первоначально
записывается пустая строка. Все остальные переменные в этом блокесодержат информацию, описывающую вашу конфигурацию БД, - их значения надо заменить на значения, соответствующие вашей БД .
На следующем шаге, после получения строки, введенной пользователем и после подготовки к работе с базой данных, выполняется соединение с этой базой данных, выполняется запрос и полученные данные возвращаются обратно. Если клиент с заданным идентификатором будет
найден, переменная $slnf о заполняется кодом HTML, содержащим все сведения, включая ссылку на адрес электронной почты. Если клиента с таким идентификатором не существует, то в переменную $sInfo
будет записано сообщение об ошибке:
<?php
$sID = $_GET["id"];
$sInfo = "";
$sDBServer = "your.databaser.server";
SsDBName = "имя_базы_данных";
$sDBUsername = "имя_пользователя_базы данных";
SsDBPassword = "пароль_пользоаателя_базы данных";
$sQuery = "Select * from Customers where CustomerId=".$sID;
$olink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword); .
@mysql_select_db($sDBName) or $sinfo= "Невозможно" открыть базу данных";
if(SoResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0) {
$aValues = mysql_fetch_array($oResuit.MYSQL_ASSOC);
$slnfo =$aValues['Name'] "".$aValues['Address']."".
$aValues['City']. "".$aValues['State']. "".
$aValues['Zip']. "Телефон: ".$aValues['Phone'].
"". "".
$aValues['E-mail']. "";
}else{
$sInfo = "Клиент с идентификатором $sID не найден.":
}
mysql_close($oLink);
?>
Первые две строки в выделенном блоке устанавливают соединение с базой данных MySQL. Далее вызывается функция mysql_query(), исполняющая SQL-запрос. Если она возвращает результат, содержащий хотя бы одну запись, то данные извлекаются из полученной записи и сохраняются в переменной $sInfo, в противном случае в $sInfo записывается сообщение об ошибке. Последние две строки закрывают соединение с базой данных.
Если теперь вывести содержимое переменной $sInfo в элемент ,то он будет содержать соответствующую информацию. Обработчик события onload считывает данные и отправляет их обратно в видимый фрейм. Если информация о затребованном клиенте будет найдена в базе
данных, она будет отображена так, к а к показано на рис. 2.2.
Если же клиент с данным идентификатором отсутствует, будет выведено сообщение об ошибке в том же самом месте экрана. В любом случае сотрудник отдела обслуживания будет удовлетворен результатом. На этом
мы заканчиваем наш первый пример применения технологии Ajax.