Зачем вам AJAX?

К харонам - хороним! (с) А.Вознесенский

AJAX - так называют технологию, иногда используемую на веб-серверах. В слове AJAX «X» обозначает XML, «J» - Java или JavaScript (последнее намного более вероятно, так как Jav'ы в Интернете в сотни раз меньше, чем JavaScript). C JavaScript наши люди знакомы - этот язык используется в HTML-страницах, чтобы делать выпадающие меню. XML - довольно бессмысленная и бестолковая вещь: объяснить, для чего выдумали это безобразие, в отрыве от конкретной технологии конкретного сайта невозможно - это целое семейство языков для HTML-страниц. Ну, мы даже и пытаться объяснять не будем, потому что как раз в AJAX'е XML совершенно не нужен (несмотря на гордую «X»).

Основная задача AJAX'а - ускорять загрузку HTML-страниц. В «обычном» HTML'е, без AJAX'а страницы перегружаются слишком часто, по делу и без дела. Например, вы терпеливо ждёте секунд 10-15, пока откроется здоровенная страница Бабра; потом набираете в поле поиска по сайту слово, нажимаете кнопку «Искать»... и опять ждёте 10-15 секунд, чтобы получить ту же самую страницу с добавленной надписью: «Искомое слово не найдено». AJAX позволяет послать запрос на сервер, получить ответ и записать его прямо в открытую страницу без перезагрузки.

Среди 1600 иркутских сайтов нам встретился только один пример использования этой технологии: iktport.ru (новый сайт Аэропорта). Там с помощью AJAX'а обновляются расписания прилётов-вылетов. Расписание перерисовывается, а остальная часть страницы при этом не перегружается. Выглядит несколько необычно, прямо-таки таинственно:

несколько секунд в центре страницы пустое место, а потом вдруг рраз! - и появляется расписание. Но при плохой связи эти «несколько секунд» могут затянуться (м-да... где-то я что-то похожее слышал, про «несколько секунд вечных мучений в аду»), а пользователь может и не знать ничего о хитрой технологии AJAX и подумает, что страница так и должна быть пустой посередине (дизайн такой), и, пожав плечами, спокойно пойдёт на следующую страницу.

В данном случае уместнее было бы применить более обычную и старую, проверенную технологию HTML - iframe (окно внутри веб-страницы с текстом другой страницы). Тем более, что основа AJAX - метод XmlHttpRequest работает не во всех браузерах, и программисты всё равно должны предусматривать на этот случай его замену фреймами (iframe). На странице с фреймами при плохой связи пользователь, по крайней мере, видит, что браузер продолжает что-то грузить, а при «работе» AJAX'а браузер выглядит так, будто ничего не происходит (это, собственно, и является главным козырем AJAX'а). Теоретически iframe должен грузиться дольше, чем текст через AJAX, но практически начало текста во фрейме появится раньше (и пользователь поймёт, что загрузка продолжается), чем AJAX полностью завершить свою работу; и чем больше размер загружаемого в изменяемую часть текста, тем меньше смысла применять AJAX.

Но и при замене маленького фрагмента большой страницы AJAX не нужен! Он не нужен вообще, потому что для быстрой замены фрагмента существует более универсальное (и старое) средство, применять которое почему-то никому не приходило в голову. Ну, скорее всего, конечно, приходило, но они держали это при себе. Пока одна светлая голова, заметившая эту возможность, не поделилась ею со всеми: Дмитрий Котеров, Лаборатория dk. Идея проста до гениальности: присвоить в каком-нибудь скрипте атрибуту src значение вида "search.php?slovo=autokinesis", после чего страница search.php начинает записывать в скрипт команды (а команды могут быть любые: например, изменяющие содержание текущей страницы), и фрагмент страницы спокойненько изменяется (без перезагрузки).

Дмитрий Котеров разработал целую технологию эксплуатации этой замечательной идеи, назвав её Subsys_JsHttpRequest. Правда, технология эта оказалась ещё сложнее AJAX'а (по крайней мере, длина js- и php-кода существенно больше, чем, например, AJAX на том же iktport.ru). Мне было лень разбираться в 23-х килобайтах скриптов JsHttpRequest (который в последней версии включает в себя ещё и XmlHttpRequest - для совместимости с редкими интернет-обозревателями), поэтому пришлось несколько «угениалить» реализацию идеи: уменьшить размер основного php-скрипта (генерирующего «вторичный» JavaScript) до 15-ти строк, а «первичного» JavaScript'а - до двух. Иначе идея динамического SCRIPT (основным достоинством которой является простота) себя просто дискредитирует: XmlHttpRequest заменяется на JsHttpRequest, который опять включает в себя XmlHttpRequest!

На этом сайте (dn.ir2.ru) идея динамической загрузки фрагмента с помощью SCRIPT реализована на странице Заказ рекламы в газете: при вводе ИНН предприятия в форму скрипт ищет в базе остальные данные и (если находит) записывает их в другие поля формы. В базе есть, например, такие ИНН: 3810027373, 4217058660. Вы можете попробовать скопировать их в поле ИНН на странице Заказ, нажать {Tab} (клавиша Табуляция, или просто щёлкните мышкой по следующему полю) и посмотреть, что получится. Код страницы Order вы можете посмотреть самостоятельно, через браузер. Там важна только одна (чудовищно простая) функция в JavaScript:

function innseek(val){el=document.createElement("SCRIPT");
document.body.appendChild(el) * ;el.src="inn.php?inn="+val} 

и атрибут onchange у элемента ИНН формы, запускающий эту функцию при вводе ИНН и переходе к другому элементу:

<input id="inn" name="inn" onchange="innseek(this.value)">.

А файл inn.php, который вызывается атрибутом src, выглядит изнутри вот как:

<?php require "config.php"; 
$inn="";
if (isset($_GET["inn"])) {$inn=$_GET["inn"];
 $query = "select * from klients where inn='{$inn}'";
 $result = mysql_query($query);
//Если с данным inn найдено ноль строк, скрипт останавливается
 $cnt=mysql_num_rows($result);if ($cnt==0) return; 
 $kpp="";$jurname="";$address="";$tel="";
 $line = mysql_fetch_array($result, MYSQL_ASSOC);
 $kpp=$line["kpp"];$jurname=addslashes($line["jurname"]);
 $address=addslashes($line["address"]);$tel=addslashes($line["tel"]);
//Текст, посылаемый на страницу в качестве («вторичного») скрипта,
//задаёт значения элементам формы
 print "document.getElementById(\"kpp\").value='{$kpp}';";
 print "document.getElementById(\"jurname\").value='{$jurname}';";
 print "document.getElementById(\"address\").value='{$address}';";
 print "document.getElementById(\"tel\").value='{$tel}';";
}
?>

Не правда ли, это выглядит проще, чем Subsys_JsHttpRequest? Разумеется, для доступа к базе данных нужен ещё и файл config.php, но его я выкладывать боюсь: там ведь пароль, часть структуры бд MySQL и всё такое... В общем, на каждом сайте этот файл должен быть свой, уникальный (и он тоже совсем небольшой: 4-5 стандартных строк подключения к бд). На сайте vostsibspravka.ru динамический скрипт используется например, для «живого поиска» или для установки параметра - количества выводимых результатов поиска. Передача русских букв в запросе к серверу при правильных настройках apache/PHP происходит без использования дополнительных библиотек или функций перекодирования (которые также утяжеляют «классический» Subsys_JsHttpRequest).

Идея в чистом виде работает не во всех браузерах, потому что, видимо, она основана на «дыре», какой-то недокументированной возможности, а «строгие», чрезмерно правильные MAC'овский Safari и линуксовый Konqueror игнорируют динамическое создание SCRIPT. Крохотное чёрное пятнышко на белоснежной стройной конструкции. Ради решения этой проблемы в Subsys_JsHttpRequest и был включён тот, кого идея должна была убить - XmlHttpRequest. Замкнутый круг: плохо и чёрное пятнышко, и самоубийство идеи «чистого» SCRIPT. Здесь необходимо искать какой-то третий путь (или вторую логику - с «законом исключённого четвёртого»)...

01.06.08: Safari 3.0 (522.11) - технология SCRIPT работает, Konqueror 3.5.3 - по-прежнему не работает.

---

* Собственно, из-за этих-то createElement и appendChild все разработчики и вспоминают про XML при звуках слова AJAX. Но эти методы, строго говоря, относятся не к области XML, а к технологии DOM - Document Object Model (объектная модель документа), которая в данной части является общей для XML и современного HTML4 (не говоря уже о более новом XHTML1).

D.M., 25.09.2006

Читать все комментарии (4)

Добавить комментарий:

*Автор:
E-Mail:
*Текст: