Создание сайтов всё чаще и чаще подразумевает использование технологии AJaX (асинхронный яваскрипт и XML).
Используя указанную технологию, можно легко сделать из вашего сайта интерактивный центр, преобразовав его в персональный менеджер-напоминалку, полноценный почтовый клиент или приложение для ведения бухгалтерии.
Суть технологии AJaX заключается в том, что пользователю нет необходимости перегружать всю страницу полностью, как это было раньше, поскольку после полной загрузки страницы соединение с сервером фактически остаётся неразорванным. Можно запрограммировать сайт так, что при клике на отдельные ссылки, будет перезагружаться только его часть, например, список новых писем.
Стоит также отметить, что использование технологии AJaX позволит существенно экономить трафик ваших пользователей.
Методики создания сайтов с использованием технологии AJaX
Существует несколько методов создания сайтов с использованием технологии AJaX:
- использование объекта XmlHttpRequest; - использование ActiveX компоненты от Microsoft; - использование невидимого плавающего фрейма;
Рекомендуется использовать невидимый плавающий фрейм, поскольку первые две технологии не дают полного контроля над объектной моделью DOM. Кроме того, как вы понимаете, использование ActiveX компоненты от Microsoft, мало того, что запрещено на многих рабочих станциях, так еще и работает только в Internet Explorer.
Итак, приступим и попробуем создать несложную реализацию AJaX при помощи невидимого фрейма. Давайте создадим JavaScript-функцию, которая будет переносить содержимое плавающего фрейма в нужный вам слой.
1 var AJaXSRC; 2 var AJaXTarget; 4 function initAJaX(obj) { 5 if (!AJaXTarget) AJaXTarget=AJaXContent; 6 if (!document.getElementById(AJaXTarget) !document.getElementById(AJaXFrameScripts)) return false; 7 var parentScripts=obj.document.scripts; 8 if (!parentScripts) parentScripts=obj.document.getElementsByTagName(script); 9 if (document.getElementById(AJaXTarget)) { 10 var Output = document.getElementById(AJaXTarget); 11 if (obj.document.body) document.getElementById(AJaXTarget).innerHTML = obj.document.body.innerHTML; 12 } 13 if (parentScripts) 14 for(i=0;i<parentScripts.length;i++) 15 document.getElementById(AJaXFrameScripts).text+=parentScripts[i].text; 16 return true; 17 }
Разберем этот кусок JavaScript-кода. В переменной AJaXSRC будем хранить последний запрошенный URL. Она понадобится нам чуть позже. Перменная AJaXTarget содержит в себе id элемента, в который мы будем встраивать полученный HTML-код.
На 5-й странице проверяется, установлена ли переменная AJaXTarget, которая отвечает за то, в какой объект вставлять полученный HTML-код. В случае, если переменная не задана, ей будет присвоено значение по умолчанию "AJaXContent".
На 6-й строке проверяется, существуют ли в объектной модели DOM элементы с идентификаторами AJaXTarget и "AJaXFrameScripts".
На 7-8-й строках в массив parentScripts записываются все элементы вида <script> из дочернего окна. Как правило, эта возможность не используется, тем не менее, если вам необходимо загрузить документ, который содержит в себе помимо HTML кода, еще и JavaScript, этот код вам поможет.
На 9-12-й строках HTML код, содержащийся в элементе с идентификатором AJaXTarget (по-умолчанию, "AJaXContent"), заменяется на HTML код, загруженный в плавающий фрейм.
На 13-15-й строках перемещаются все скрипты.
Для того, чтобы всё работало, необходимо создать несколько HTML элементов:
Теперь можно смело загружать в слой с идентификатором "AJaXContent" любую страницу. Всё, что для этого нужно сделать - создать гиперссылку, указав ей target="AJaXIOFrame". При необходимости, можно также добавить в гиперссылку аттрибут onclick="AJaXTarget=OtherAJaXDiv", если хотите, чтобы загруженная в невидимый фрейм страница переносилась не в слой "AJaXContent", а в объект с идентификатором "OtherAJaXContent".
Вот и всё, ничего сложного, как видите. Если разобраться, как следует, то становится ясно, что использование невидимого фрейма и полноценный доступ к объектной модели DOM внутри этого фрейма позволяет вытворять просто чудеса.
