Создание сайтов всё чаще и чаще подразумевает использование технологии 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 записываются все элементы вида
Главная
Основы технологии AJaX