Термин Ajax обозначает архитектуру веб_приложений, которая основана на вза_ имодействии с протоколом HTTP и объектом XMLHttpRequest. (В действительности для многих объект XMLHttpRequest и Ajax являются синонимами.) Ajax – это акро_ ним от «Asynchronous JavaScript and XML» (асинхронный JavaScript и XML).1 Термин был придуман Джессом Джеймсом Гарреттом (Jesse James Garrett) и впервые появился в феврале 2005 года в его статье «Ajax: A New Approach to Web Applications» (Ajax: новый подход к разработке веб_приложений), которую можно найти по адресу http://www.adaptivepath.com/publications/essays/archi' ves/000385.php.
1 Значимость архитектуры Ajax сложно переоценить, и наличие простого названия лишь послужило катализатором начала революции в разработке веб_приложений. Однако, как оказывается, этот акроним недостаточно полно описывает технологии, используемые Ajax_приложениями. Все клиентские JavaScript_сценарии исполь_ зуют механизм обработки событий и потому являются асинхронными. Кроме того, применение XML в веб_приложениях, разработанных в стиле Ajax, часто бывает удобным, но это совершенно не обязательно. Главная особенность Ajax_приложе_ ний – взаимодействие с протоколом HTTP, но это никак не отражено в акрониме.
510 Глава 20. Работа с протоколом HTTP
Объект XMLHttpRequest, на котором основана технология Ajax, был доступен в броузерах Microsoft и Netscape/Mozilla еще за четыре года до появления статьи Гарретта, но он никогда до этого момента не привлекал такого внимания.1 Все изменилось в 2004 году, когда компания Google выпустила новую версию почто_ вого веб_приложения Gmail, использующего объект XMLHttpRequest. Сочетание этого высококлассного приложения, выполненного на профессиональном уров_ не, и статьи Гарретта, вышедшей в начале 2005 года, открыло шлюзы для бурно_ го интереса к Ajax.
Ключевой особенностью любого Ajax_приложения является взаимодействие с веб_ сервером по протоколу HTTP без необходимости полной перезагрузки страницы. Поскольку объемы передаваемых данных невелики и броузер не тратит время на анализ и отображение целого документа (а также связанных с ним таблиц сти_ лей и сценариев), время отклика таких приложений оказывается очень неболь_ шим. В результате веб_приложения стали напоминать традиционные настоль_ ные приложения.
Необязательной особенностью Ajax_приложений является использование фор_ мата XML для представления данных во время обмена между клиентом и серве_ ром. В главе 21 демонстрируется, как можно манипулировать XML_данными из JavaScript_сценариев, включая исполнение XPath_запросов и выполнение XSL_ преобразований XML_документов в формат HTML. В некоторых Ajax_приложе_ ниях для отделения содержимого (данные в формате XML) от представления (HTML_форматирование, выполненное с помощью таблиц стилей XSL) исполь_ зуется язык XSLT. Такой подход дает дополнительные преимущества, умень_ шая объемы данных, передаваемых от сервера клиенту, и перенося выполнение необходимых преобразований на сторону клиента.
Существует возможность формализовать Ajax в терминах RPC_механизма2. В та_ кой формулировке веб_разработчики используют низкоуровневые Ajax_библио_ теки как на стороне сервера, так и на стороне клиента, чтобы облегчить высоко_ уровневое взаимодействие между клиентом и сервером. В данной главе не опи_ сываются никакие библиотеки, реализующие RPC средствами Ajax, потому что основное внимание здесь уделяется низкоуровневым технологиям, обеспечи_ вающим работу архитектуры Ajax.
Ajax – достаточно молодая прикладная архитектура, и описывающая ее статья Гарретта заканчивается призывом к действию, который стоит того, чтобы при_ вести его здесь:
Самые большие сложности в разработке Ajax_приложений лежат вовсе не
в технической плоскости. Технологии, составляющие основу Ajax, достаточно
1 Я сожалею, что не взялся за описание объекта XMLHttpRequest в четвертом издании этой книги. То издание было во многом основано на стандартах, и объект XMLHttp_ Request не был включен в него просто потому, что он никогда не был стандартизо_ ван. Если бы в то время я осознавал мощные возможности, которые предоставля_ ет работа с протоколом HTTP, я нарушил бы свои правила и включил бы описание объекта в книгу.
2 Аббревиатура RPC происходит от Remote Procedure Call (вызов удаленных проце_ дур) и описывает стратегию, используемую в распределенных вычислениях для упрощения взаимодействий между клиентом и сервером.
20.3. Ajax и динамические сценарии
зрелые, устоявшиеся и понятные. Главные проблемы заключаются в том, что разработчики таких приложений забывают думать о существующих ограниче_ ниях Всемирной паутины и начинают воображать себе более широкий, более богатый диапазон возможностей.
Это будет забавно.
Пример применения Ajax
Примеры, приводившиеся до сих пор в этой главе, представляли собой вспомога_ тельные функции, демонстрирующие порядок использования объекта XMLHttpRe_ quest. Они не показывали, зачем может потребоваться этот объект или какие вы_ годы он дает. Как отмечалось в цитате из статьи Гарретта, архитектура Ajax от_ крывает массу новых возможностей, которые только начали исследоваться. Сле_ дующий пример достаточно прост, но в нем демонстрируются некоторые вспомо_ гательные функции и ряд возможностей, предоставляемых архитектурой Ajax.
Пример 20.8 представляет собой ненавязчивый сценарий, регистрирующий об_ работчики событий в ссылках документа, чтобы с их помощью отображать всплывающие подсказки при наведении на них указателя мыши. Для ссылок, указывающих на тот же сервер, откуда был загружен сам документ, сценарий выполняет HTTP_запрос HEAD с помощью объекта XMLHttpRequest. Из возвра_ щаемых сервером заголовков извлекаются тип содержимого, размер и дата по_ следнего изменения документа, на который указывает ссылка, и эта информа_ ция отображается в виде всплывающей подсказки (рис. 20.1). Тем самым всплы_ вающие подсказки предоставляют своего рода средство предварительной оценки целевого документа, что может помочь пользователям в принятии решения о том, стоит ли щелкать на этой ссылке или нет.
В основе реализации лежит класс Tooltip, разработанный в примере 16.4 (здесь не требуется расширенная версия класса, которая приводилась в примере 17.3). Кроме того, здесь используется модуль Geometry из примера 14.2 и вспомогатель_ ная функция HTTP.getHeaders() из примера 20.4. В программный код заложено несколько уровней асинхронности: в форме это обработчик события onload, обра_ ботчик события onmouseover, таймер и функция обратного вызова для объекта XMLHttpRequest. Все это приводит к созданию глубоко вложенных функций.
Рис. 20.1. Всплывающая подсказка Ajax
512 Глава 20. Работа с протоколом HTTP
Пример 20.8. Всплывающие подсказки Ajax
/**
* linkdetails.js
*
* Данный модуль добавляет обработчики событий к ссылкам в документе,
* с помощью которых отображаются всплывающие подсказки при задержке
* указателя мыши над этими ссылками в течение полусекунды. Если ссылка
* указывает на документ на том же сервере, что и исходный документ,всплывающая
* подсказка будет включать в себя информацию о типе, размере и дате, которая
* извлекается с помощью HTTP_запроса HEAD, выполняемого объектом XMLHttpRequest.
*
* Данный модуль требует наличия модулей Tooltip.js, HTTP.js и Geometry.js
*/
(function() { // Анонимная функция, которая содержит все необходимые имена
// Создает объект подсказки var tooltip = new Tooltip();
// Настроить вызов функции init() после загрузки документа
if (window.addEventListener) window.addEventListener("load", init, false); else if (window.attachEvent) window.attachEvent("onload", init);
// Вызывается после загрузки документа function init() {
var links = document.getElementsByTagName('a');
// Цикл по всем ссылкам и добавление обработчиков событий for(var i = 0; i < links.length; i++)
if (links[i].href) addTooltipToLink(links[i]);
}
// Эта функция добавляет обработчики событий
function addTooltipToLink(link) { // Добавить обработчики событий
// И отобразить ее в виде всплывающей подсказки tooltip.show(tip, x, y);
});
}
else {
// Иначе, если это ссылка на другой сайт,
// отобразить в подсказке лишь URL_адрес ссылки tooltip.show("URL: " + link.href, x, y);
}
}
}
function mouseout(e) {
// Когда указатель мыши смещается со ссылки, отменить отображение
// запланированной подсказки или скрыть ее, если она уже отображается. if (timer) window.clearTimeout(timer);
timer = null; tooltip.hide();
}
}
})();
Одностраничные приложения
Под термином одностраничное приложение (single'page application) понимается именно то, что он обозначает: управляемое JavaScript_сценарием веб_приложе_ ние, которое требует загрузки единственной страницы. Некоторые одностранич_ ные приложения после загрузки вообще не взаимодействуют с сервером. Приме_ ром таких приложений могут служить DHTML_игры, где взаимодействие с поль_ зователем приводит лишь к модификации загруженного документа.
Объект XMLHttpRequest и архитектура Ajax открывают массу дополнительных возможностей. Веб_приложения могут использовать эти технологии для обмена данными с сервером и оставаться одностраничными приложениями. Веб_прило_ жение, разработанное в соответствии с этими положениями, может содержать небольшой объем JavaScript_кода, выполняющего начальную загрузку, и «эк_ ранную заставку» в формате HTML, которая отображается в процессе инициали_ зации приложения. После вывода экранной заставки запускающий JavaScript_ код мог бы с помощью объекта XMLHttpRequest загрузить фактический JavaScript_ код приложения, который можно было бы запустить методом eval(). Этот Java_
514 Глава 20. Работа с протоколом HTTP
Script_код мог бы взять на себя обязанности по загрузке требуемых данных с по_ мощью XMLHttpRequest и с использованием DHTML отобразить эти данные перед пользователем.
