AJAX (Асинхронный JavaScript + XML)

Последняя модификация: 10.08.2014 г

Страница загружена с адреса: http://webdesign.site3k.ru/consulting/ajax.html

Давно забытый AJAX

Суть технологии AJAX
Истоки AJAX
Современное состояние AJAX
Альтернативы AJAX
- Полное отсутствие AJAX
- AJAX на старых дрожжах
Область применения AJAX
Примеры применения AJAX

Технология AJAX (Асинхронный JavaScript + XML), являющаяся одной из основных технологий, лежащей в основе, так называемого, WEB 2.0, была известно еще, чуть ли не, со времен каменного века. Однако, благодаря появлению термина AJAX, который ввел Джис Джеймс Гаррет (Jesse James Garrett), она стала необычайно модной. И если раньше, о ней могли говорить только наиболее продвинутые программисты, то теперь, благодаря появлению специального термина, сказать о ней может каждый, кому не лень. Достаточно просто произнести «AJAX», и ты уже о ней говоришь.

Суть технологии AJAX

Суть технологии AJAX заключается в изменении содержимого загруженной веб-страницы без ее полной перезагрузки, благодаря чему достигается высокая динамичность сайтов. Технология основывается на разделении данных и подзагрузки тех или иных компонентов по мере необходимости.

Истоки AJAX

Первые приемы динамической подзагрузки данных на WEB-страницу появился в спецификации HTML 4.0 от 18 декабря 1997 года. В этой спецификации впервые были определены:

семантика для элемента SCRIPT,
элементы IFRAME и OBJECT,
элемент FRAME.

Так же, был введен атрибут target для элементов, создающих ссылки (A, LINK), навигационных карт (AREA) и форм (FORM).

В результате этих революционных нововведений, стало возможным, не перезагружая всю страницу, менять часть ее содержимого. Например, целую страницу можно было разделить на несколько фреймов и, указав в одном из них ссылки, цель которых определялась атрибутом target, менять содержимое другого фрейма, не перезагружая оглавления (эта возможность применяется на сайте webdesign.site3k.ru). Аналогично можно было поступить с IFRAME и OBJECT, меняя их содержимое щелчком по ссылке (эта возможность применяется на сайте bosportour.com – содержимое гостевой книги заключено в собственном IFRAME, отдельно от оглавления и общего оформления). Благодаря JavaScript, стало возможным еще больше: Произвольно менять SRC рисунков, таблиц стилей и скриптов, загружая новые элементы в уже загруженную страницу и, даже, менять содержимое статического текста (эта возможность применяется на сайте praktika.net.ua – в страницу вставляется выбранный посетителем рисунок и в соответствии с ним меняется подпись к рисунку; применение динамически загружаемых скриптов впервые упомянуто мной в 2003 году на странице http://discoverer.h11.ru/webdesig/menus.html, теперь это webdesign.site3k.ru/conjuncture/append/d/menus.html).

Так же, в 1997 году появились Каскадные таблицы стилей (CSS), с их атрибутом display, позволяющим скрывать или отображать отдельные части страницы, что, во взаимодействии с JavaScript, могло мгновенно частично или полностью изменять ее видимое содержимое (применяется в древовидном меню сайта webdesign.site3k.ru).

Компании Netscape этого показалось мало и в свой браузер, они добавили тег LAYER, содержимое которого отображалось так же, как содержимое тега DIV, но могло иметь атрибут SRC и грузится из отдельного файла, благодаря чему, не перегружая страницу, можно было загрузить данные, привязанные к ссылке, даже не в отдельный фрейм или OBJECT, а прямо в один из элементов текущей страницы – совсем как это делается сейчас на AJAX.

Просто раньше никому в голову не приходила придумать этому особое название.

Окончательное формирование всех вариаций технологии AJAX произошло в 1998 году, когда в браузере Internet Explorer 5.0 появился новые объекты ActiveX – XMLHttpRequest, DTC, RDC и другие (использование TDC описано на старице Обработка баз данных браузером посетителя, для обработки прайсов и применено на cmk.net.ua – если вы используете IE, вам удастся его увидеть). Однако именно XMLHttpRequest приобрел наибольшую популярность и поддержку в других браузерах.

XMLHttpRequest приобрел популярность благодаря тому что, значительно ускорял загрузку данных, позволяя включать в уже загруженную страницу данные любого типа. Его применение позволяло без особых ухищрений вставлять в страницу ответы сервера и, таким образом, использовать технологию AJAX смогли даже люди, не отличающиеся особыми талантами (LAYER от Netscape позволял делать это с еще большей легкостью, но, поскольку последний проиграл войну браузеров, победили именно стандарты Микрософта). Эта популярность вынудила производителей других браузеров включить поддержку XMLHttpRequest в свои продукты (Mozilla Firefox, начиная с версии 1.0, Opera, начиная с версии 8.0, Safari…) и применение AJAX стало повсеместным. Вскоре появился и сам термин. Использование AJAX стало модным и о нем вдруг все заговорили. Произошло это в начале 2005 года и, таким образом, официальное признание технология получила спустя 8 лет с момента появления.

Современное состояние AJAX

Поскольку AJAX – это по сути, только разнообразное применение компонента XMLHttpRequest, то чтобы понять работу AJAX, требуется разобраться с синтаксисом XMLHttpRequest. Сделаем это на примере:

<script type="text/javascript" language="JavaScript">
function doLoad() {
    req=false;
    try { // определить метод поддержки
        req=new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            req=new ActiveXObject('Microsoft.XMLHTTP'); // сработает в Internet Explorer
        } catch (e) {
            if(window.XMLHttpRequest){ // сработает в Mozilla и Safari
               req=new XMLHttpRequest();
            }
        }
    }
    if (req){// если какой-то из вариантов поддерживается
       req.onreadystatechange = readystate; // назначим обработчик событию объекта
       req.open("GET", document.getElementById('edit1').value, true); // задать параметры методу open
       req.send(null); // отправить запрос
    }
}
function readystate() {
    if (req.readyState == 4){// если запрос завершен
        if (req.status == 200) { // если он завершен без ошибок
            document.getElementById('content').innerHTML ='<pre>'+req.responseText+'</pre>';
        } else {
            alert("Произошла ошибка "+ req.status+":\n" + req.statusText);
        }
    }
}
</script>
<input type="TEXT" size="50" id="edit1">
<input type="button" value="Через ActiveX" onclick="doLoad()">
<div id=content style="white-space:pre"></div>

И так:

Условие window.XMLHttpRequest определяет, каким образом работает объект в данном браузере (можно добавить проверку, работает ли он вообще и если window.ActiveXObject так же дает ложный результат, данный метод вообще не поддерживается браузером). Затем создается объект одного из поддерживаемых типов, после чего событию onreadystatechange (изменение состояния) назначается обработчик. Так же, назначаются параметры методу open. Первый из них определяет тип запроса: POST или GET, второй определяет адрес (в данном случае адрес берется из значения текстового поля), третий, если истинен, определяет что, запрос должен выполнятся асинхронно, то есть, отправив запрос не ждать ответа сервера, а продолжать работу, ожидая ответа в фоновом режиме.

После всего этого методом send происходит фактическая отправка запроса и, как только от сервера приходит ответ, срабатывает обработчик события onreadystatechange.

При обработке события onreadystatechange нужно проверить код состояния объекта (свойство readyState). Определено 4 состояния:

0 – объект не инициализирован

1 – идет загрузка

2 – объект уже загружен

3 – Загружен частично

4 – завершение загрузки

Как только код становится равен 4, данные сервера можно использовать и выводить в браузер. Однако, не мешало бы проверить, что именно вытащили наши сети, используя код ответа сервера, сохраняющийся в req.status. Если код равен 200 (см. коды ошибок ВЕБ сервера), данные действительно можно выводить, иначе, можно вывести сообщение об ошибке, сохраняющийся в свойстве req.statusText. Вместо стандартного текста ошибки, можно вывести свой, что удобно сделать, создав массив определений, ключи которого будут соответствовать номерам ошибок:

err[400]=”Запрос содержит синтаксическую ошибку”;

err[401]=”Для доступа требуется авторизация”;

err[403]=”Доступ запрещен”;

и т. д.

Все довольно просто (хотя менять src для IFRAME еще проще). Однако данным методом можно обращаться только к ресурсам того же сайта, с которого закачана запрашивающая страница. Чтобы обратиться к другим интернет-ресурсам, придется использовать серверный скрипт, вроде такого:

<?php
if (! @readfile ($_GET['file'])){
      echo '<font color=red>Файл не доступен</font>';
}
?>

И тут задумаешься: А может послать этот AJAX к чертям и использовать более простой и всеядный IFRAME? Но IFRAME нельзя использовать непосредственно внутри форм. В этом случае, применение AJAX окажется вполне разумным, и будет выглядеть примерно так:

<script type="text/javascript" language="JavaScript">
function doLoad2 () {
    req=false;
    try { // определить метод поддержки
        req=new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            req=new ActiveXObject('Microsoft.XMLHTTP'); // сработает в Internet Explorer
        } catch (e) {
            if(window.XMLHttpRequest){ // сработает в Mozilla и Safari
               req=new XMLHttpRequest();
            }
        }
    }
    if (req){// если какой-то из вариантов поддерживается
       req.onreadystatechange = readystate; // назначим обработчик событию объекта
       req.open("GET", 'myscript.php?file='+document.getElementById('edit2').value, true); // myscript.php – это приведенный выше серверный скрипт
       req.send(null);
    }
}
function readystate() {
    if (req.readyState == 4){// если запрос завершен
        if (req.status == 200) { // если он завершен без ошибок
        document.getElementById('content').innerHTML ='<pre>'+req.responseText+'</pre>';
        } else {
            alert("Произошла ошибка "+ req.status+":\n" + req.statusText);
        }
    }
}
</script>
<input type="TEXT" size="50" id="edit2">
<input type="button" value="Через ActiveX и серверный скрипт" onclick="doLoad2()">
<div id=content style="white-space:pre"></div>

Но это не решает всех проблем. Потому что:

При использовании AJAX не срабатывает навигация по ссылкам: заполняя многостраничную форму стандартного образца, вы можете обнаружить ошибку, допущенную на предыдущей странице, и вернутся назад. Если в форме используется AJAX никакой «Назад» не сработает. Аналогичная неудача постигнет, если на AJAX построена вся навигация сайта.
Поисковые роботы не интерпретируют JavaScript и не будут ходить по AJAX ссылкам.
AJAX поддерживается только новыми браузерами, в связи с чем, его поклонники требуют чтобы «Юзеры меняли брузеры». Но, это же наглость. Я, конечно, понимаю что, нет смысла добиваться полной совместимости с браузерами 10 летней давности, но терять часть посетителей только оттого, что вам хочется применить AJAX? Глупо. Для кого вы делаете сайт? Если для себя, то ладно. Если для посетителей, то постарайтесь сделать так, чтобы максимально большее их число смогло им пользоваться.

Однако самая важная проблема AJAX заключается в том что, сохраняя локальную копию загруженного документа, посетитель страницы, на самом деле, ничего не сохраняет! Конечно, если вы хотите заставить его посещать сайт снова и снова, вам это должно очень понравится, но если вы хотите помочь посетителю, вы должны усвоить одну, банальную вещ: AJAX не предназначен для загрузки контента! Загруженный материал является временным и существует только до закрытия браузера, так как он не записывается в текст страницы, а только хранится оперативной в памяти. Посвященный в эти вещи посетитель выделит текст и скопирует в файл, но не посвященный, никогда не поймет, почему, посещая страницу на сайте, он видит одно, а открывая ее локальную копию – другое.

Альтернативы AJAX

Полное отсутствие AJAX

Первой альтернативой является старый добрый серверный скрипт. Код, использующий серверный скрипт, может выглядеть вот так:

<form action="myscript.php">
<input type="TEXT" size="50" name=file>
<input type="submit" value="Только через серверный скрипт">
</form>

Благодаря серверному скрипту, вы можете обращаться к файлам с других сайтов и не будете иметь проблем с кириллицей. Вы можете не волноваться о том, включен у пользователя JavaScript, или нет, и какая именно версия скрипта у него поддерживается. Серверный скрипт выдаст пользователю однозначно сформированную страницу.

Но это классический вариант: результат выдается на другой странице, которую придется загрузить полностью. Никакого AJAX.

Чтобы приблизить это к AJAX, можно поместить меняющуюся часть страницы (с формой или без), в IFRAME (например, как сделал я на странице http://kazantip.net.ua/zajavka.html). Но можно пойти еще дальше:

AJAX на старых дрожжах

Как говорилось в начале статьи, технологии AJAX, на самом деле, просто давно забыли и для этой «технической революции» никакой XMLHttpRequest или ActiveXObject не требуются. А значит, приведенный ниже код будет работать В ЛЮБОМ браузере:

<form id=frm action="myscript.php" onsubmit="this.setAttribute('target','myframe');">
<input type="TEXT" size="50" name=file>
<input type="submit" value="Через серверный скрипт в духе AJAX">
</form>
<iframe onLoad="window.document.getElementById('content').innerHTML= myframe.document.body.innerHTML;" frameborder='0' width='0' height='0' name="myframe" id="myframe"></iframe>
<div id=content style="white-space:pre"></div>

Если в браузере не работает JavaScript, событие onsubmit не будет обработано и атрибут target не будут переназначен. В этом, а так же, в том случае, если браузер не поддерживает iframe, данные загрузятся в новую страницу, как при обычном использовании серверного скрипта. Однако, если мы имеем нормальный браузер, поддерживающий HTML 4.0, по нажатию кнопки submit, на сервер отправится запрос. Когда же от туда вернется ответ, сработает событие onLoad в iframe и пришедший текст отобразится в div id=content, как и при использовании AJAX. И, что самое главное, если посетитель сохранит страницу, полученный им текст никуда не исчезнет, так как, вместе с ней сохранится и текст iframe. При открытии сохраненной страницы, этот текст сразу загрузиться и отобразится.

Осталось только придумать этому название, например, JAI (JavaScript and iframe) и гордо трубить об изобретении новой, более совершенной технологии.

Область применения AJAX

Где применять AJAX и, применять ли его вообще, каждый решает сам. Совершенно ясно что, там, где текст страницы меняется целиком, AJAX не дает никакого выигрыша скорости и, может даже чуть замедлить процесс, так как требуется загрузить еще и код скрипта. Но вот вместо многостраничных форм AJAX весьма кстати.

Например, регистрируешь сайт в Апорте. Появляется 1 страница – вводишь основные данные. Нажимаешь «Далее». Появляется вторая страница, выбираешь страну из большого списка, нажимаешь «Далее». На следующей странице, в соответствии с выбранной перед этим страной, предлагается список городов этой страны. Выбираешь, нажимаешь «Далее»...

Было бы хорошо, если бы все было на одной странице. Но размер страницы, содержащей названия всех стран и всех городов этих стран был бы невероятно огромен. Вот Апорт и делит на этапы, на каждом показываю лишь ту часть, которая соответствует ранее выбранным параметрам (не все города мира, а только нужной страны). Но можно же сделать так: На странице список стран, при выборе страны, происходит запрос на сервер и тот, на эту же страницу передает список городов этой страны. Дальше, выбираешь город и, произведя все установки на 1 странице, завершаешь регистрацию.

В такой ситуации AJAX значительно ускорит процесс. Вот только какой AJAX? С использованием ActiveXObject или JavaScript + iframe? Исходя из того что, все, кто понимает недостатки AJAX, пытаются свести их до минимума, добавляя к нему еще и iframe, рекомендую сразу переходить к iframe и не пытаться угодить моде.