Следующее поколение способов взаимодействия между клиентом и сервером основано на применении плавающих фреймов, которые появились в HTML 4.0. Плавающие фреймы практически не отличаются от обычных, но они могут быть размещены за пределами наборов фреймов
практически в любом месте страницы HTML. Методика, основанная на плавающих фреймах, может быть применена к страницам, которые изначально вообще не предусматривали наличие наборов фреймов.
Это гораздо удобнее, когда необходимо расширить функциональные возможности старых страниц. Плавающий фрейм может быть создан даже на лету, кодом JavaScript (вскоре мы поговорим об этом).
Поскольку порядок работы с плавающими фреймами тот же самый, что и с обычными фреймами, они идеально подходят для организации взаимодействий на базе технологии Ajax.
Существует два способа работы с плавающими фреймами. Самый простой состоит в том, чтобы просто внедрить (статически) плавающий фрейм в страницу HTML и использовать его д л я выполнения запросов как скрытый фрейм. Применение этой методики повлекло бы следующие
изменения в отображаемой странице из первого примера:
<р>Чтобы получить информацию о клиенте, введите его
идентификационный номер:
Идентификационный номер:
Обратите внимание, что в атрибуты width, height и f rameborder плавающего фрейма записано значение 0, что приводит к сокрытию этого фрейма. Имя плавающего фрейма не изменилось (hiddenFrame), поэтому нам не потребуется вносить изменения в код JavaScript.Одно небольшое изменение, однако, внести в страницу GetCustomerData.php придется. Функция JavaScript на этой странице ранее называлась displayCustomerlnfo()
и располагалась во фрейме с именем displayFrame.
Если вы применяете данную методику, где теперь нет фрейма с таким именем, то должны изменить код так:
window.onload = function () {
var divInfoToReturn = document.getElementByldC'divInfoToReturn");
parent. displayCustomerlnfo(divlnfoToReturn.innerHTML);
?>
Теперь этот новый пример будет работать точно так же, как и первый пример этой главы.
Второй способ состоит в том, чтобы создавать скрытые плавающие фреймы динамически с помощью JavaScript.Эта методика может показаться немножко запутанной, поскольку не все броузеры реализуют плавающие фреймы одним и тем же способом, поэтому мы просто рассмотрим
создание скрытого фрейма последовательно, шаг за шагом.
Первый шаг достаточно прост - создание плавающего фрейма с помощью метода document.createElement() и присваивание значений его атрибутам:
function createlFrame(){
var oIFrameElement = document.createElement("iframe");
oIFrameElement.width=0;
oIFrameElement.height=0;
oIFrameElement.frameBorder=0;
oIFrameElement.name = "hiddenFrame";
oIFrameElement.id = "hiddenFrame";
document.body.appendChild (oIFrameElement);
// остальной код
?>
Последняя значащая строка в этом фрагменте кода очень важна, потому что она вставляет плавающий фрейм в структуру документа (плавающий фрейм, который не был вставлен в документ, не сможет выполнять запросы). Обратите также внимание, что оба атрибута - name и id - имеют одно и то же значение, равное hiddenFrame. Это совершенно необходимо, поскольку некоторые броузеры организуют доступ к новому фрейму по значению атрибута name, а некоторые по значению атрибута id.
Далее следует описание глобальной переменной, которая будет хранить ссылку на объект-фрейм. Обратите внимание, что объект-фрейм - это не то же самое, что возвращает функция createElementO. Чтобы заполучить
этот объект, надо отыскать его в наборе фреймов. Это и будет значение глобальной переменной:
var oIFrame = null;
function createlFrame() {
var oIFrameElement = document.createElement("iframe");
oIFrameElement.width=0;
oIFrameElement.height=0;
oIFrameElement.frameBorder=0;
oIFrameElement.name = "hiddenFrame";
oIFrameElement.id = "hiddenFrame";
document.body.appendChild(oIFrameElement);
oIFrame = frames["hiddenFrame"];
}
Если вставить этот код в предыдущий пример с плавающим фреймом, то можно внести следующие изменения в функцию requestCustomerlnfo():
function requestCustomerlnfo() {
if(!oIFrame) {
createlFrame();
setTimeout(requestCustomerlnfo, 10);
return;
}
var sId = document.getElementById('txtCustomerId").value;
oIFrame.location = "GetCustomerData.php?id=" + sId;
}
Теперь функция будет проверять наличие плавающего фрейма в документе с помощью переменной oIFrame. И в случае его отсутствия вызывать функцию createlFrameO и затем вызывать себя повторно через 10 миллисекунд. Дело в том, что только Internet Explorer сразу же начинает распознавать только что вставленный плавающий фрейм, большинству же остальных броузеров для этого требуется несколько миллисекунд.
Когда функция будет запущена вновь, она исполнит остальную часть кода, где в последней строке, которая была изменена, расположена ссылка на объект oIFrame.
Эта методика при работе с запросами типа GET не вызывает особых затруднений, но работа с запросами POST - совсем другое дело. Лишь некоторые броузеры допускают ссылку на динамически созданный плавающий
фрейм в атрибуте target формы, и IE не входит в их число. Это обстоятельство еще больше осложняет применение методики скрытых плавающих фреймов к запросам POST.