Ajax, состоящий из HTML, технологии JavaScript™, DHTML и DOM, это замечательный подход, который помогает вам преобразовать тяжеловесные Web-интерфейсы в интерактивные Ajax-приложения. Автор, эксперт по Ajax, демонстрирует совместную работу этих технологий (от общего обзора до детального изучения), цель которой – сделать чрезвычайно эффективную Web-разработку повседневной реальностью. Он также раскрывает основные концепции Ajax, включая объект XMLHttpRequest.

Пять лет назад вы были гадким утенком (с которым никто не разговаривал), если не знали XML. Восемнадцать месяцев назад в центре внимания оказался Ruby, а программисты, не знающие что с ним происходит, не были приглашены к бачку с охлажденной водой. Сегодня, если вы хотите попасть на технологическую вечеринку, нужен Ajax.

Однако, Ajax – это далеко не чья-то прихоть, а мощный подход к созданию Web-сайтов, который не так трудно изучить, как полностью новый язык.

Перед тем, как я погружусь в детали Ajax, давайте потратим пару минут на осмысление того, что же делает Ajax. Когда в наше время вы пишете приложение, у вас есть два основных варианта:
Настольные приложения
Web-приложения

Оба варианта знакомы; настольные приложения обычно поставляются на CD (или иногда загружаются с Web-сайта) и устанавливаются целиком на вашем компьютере. Они могут использовать Интернет для загрузки обновлений, но код, выполняющий эти приложения, размещен на вашем рабочем столе. Web-приложения (и это не удивительно) работают где-то на Web-сервере, а вы обращаетесь к этим приложениям через ваш Web-браузер.

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

С другой стороны, Web-приложения обычно самые свежие по времени и предоставляют возможности, которые вы никогда бы не смогли иметь на вашем компьютере (вспомните Amazon.com и eBay). Однако с могуществом Web приходит ожидание – ожидание ответа от сервера, ожидание обновления экрана, ожидание ответа на запрос и генерирования новой страницы.

Ясно, что все это упрощение, но вы получили общее представление. Как вы, возможно, уже подозреваете, Ajax пытается преодолеть разрыв между функциональностью и интерактивностью настольного приложения и всегда обновленным Web-приложением. Вы можете использовать динамические пользовательские интерфейсы, аналогичные имеющимся в настольном приложении, но доступные в Web-приложении.

Так чего же мы ждем? Начнем рассмотрение Ajax и способов превращения ваших неуклюжих Web-интерфейсов в чувствительные Ajax-приложения.

Старая технология, новые хитрости

Что касается Ajax, то реальность такова, что он охватывает много технологий – для его освоения необходимо углубиться в несколько различных технологий (вот почему я разобью на независимые части первые несколько статей из этой серии). Хорошей новостью является то, что вы, возможно, уже знаете достаточно о многих из этих технологий – большинство из этих индивидуальных технологий изучаются легко (определенно не так трудно, как язык программирования полностью, например Java или Ruby).

Определение Ajax

Между прочим, Ajax – это аббревиатура от Asynchronous JavaScript and XML (и DHTML, и т.д.). Фраза была придумана Джессе Джеймсом Гарретом из Adaptive Path (см. раздел Ресурсы) и, по словам Джессе, не предназначалась быть аббревиатурой.

Вот основные технологии, вовлеченные в Ajax-приложения:
HTML используется для создания Web-форм и указания полей для использования в вашем приложении.
JavaScript-код – это основной код, выполняющий Ajax-приложения и обеспечивающий взаимодействие с серверными приложениями.
DHTML, или Dynamic HTML, помогает динамически обновлять формы. Вы будете использовать div, span и другие динамические HTML-элементы для разметки вашего HTML.
DOM, Document Object Model (объектная модель документов), будет использоваться (через код JavaScript) для работы и со структурой вашего HTML, и (в некоторых случаях) с XML, полученным от сервера.

Рассмотрим все это по отдельности и разберемся в том, что делает каждая из этих технологий. Я исследую каждую из них в следующих статьях; сейчас просто познакомимся поближе с этими компонентами и технологиями. Чем больше вы знаете о них, тем легче перейти от бессистемных знаний к освоению каждой из них (и действительно улучшить процесс разработки Web-приложений).

Объект XMLHttpRequest

Первый объект, о котором вы хотите узнать, возможно, самый новый для вас; он называется XMLHttpRequest. Это объект JavaScript, и он создается так же просто, как показано в листинге 1.

Листинг 1. Создание нового объекта XMLHttpRequest     

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

Я детально расскажу об этом объекте в следующей статье, а сейчас осознайте, что это объект, который управляет всем вашим взаимодействием с сервером. Прежде чем идти дальше, остановитесь и подумайте об этом – это технология JavaScript в объекте XMLHttpRequest, который общается с сервером. Это не обычный ход работы приложения, и именно здесь заключается почти вся магия Ajax.

В нормальных Web-приложениях пользователи заполняют поля форм и нажимают кнопку Submit (подтвердить). Затем форма передается на сервер полностью, сервер обрабатывает сценарий (обычно PHP или Java, возможно, CGI-процесс или что-то в этом роде), а потом передает назад всю новую страницу. Эта страница может быть HTML-страницей с новой формой с некоторыми заполненными данными, либо страницей подтверждения, либо, возможно, страницей с какими-то выбранными вариантами, зависящими от введенных в оригинальную форму данных. Естественно, пока сценарий или программа на сервере не обработается и не возвратится новая форма, пользователи должны ждать. Их экраны очистятся и будут перерисовываться по мере поступления новых данных от сервера. Вот где проявляется низкая интерактивность – пользователи не получают немедленной обратной реакции и определенно чувствуют себя не так, как при работе с настольными приложениями.

Ajax по существу помещает технологию JavaScript и объект XMLHttpRequest между вашей Web-формой и сервером. Когда пользователи заполняют формы, данные передаются в какой-то JavaScript-код, а не прямо на сервер. Вместо этого JavaScript-код собирает данные формы и передает запрос на сервер. Пока это происходит, форма на экране пользователя не мелькает, не мигает, не исчезает и не блокируется. Другими словами, код JavaScript передает запрос в фоновом режиме; пользователь даже не замечает, что происходит запрос на сервер. Более того, запрос передается асинхронно, а это означает, что ваш JavaScript-код (и пользователь) не ожидают ответа сервера. То есть, пользователи могут продолжать вводить данные, прокручивать страницу и работать с приложением.

Затем сервер передает данные обратно в ваш JavaScript-код (все еще находящийся в вашей Web-форме), который решает, что делать с данными. Он может обновить поля формы "на лету", придавая свойство немедленности вашему приложению – пользователи получают новые данные без подтверждения или обновления их форм. JavaScript-код может даже получить данные, выполнить какие-либо вычисления и передать еще один запрос, и все это без вмешательства пользователя! В этом заключается мощь XMLHttpRequest. Он может общаться с сервером по своему желанию, а пользователь даже не догадывается о том, что происходит на самом деле. В результате мы получаем динамичность, чувствительность, высокую интерактивность настольного приложения вместе со всеми возможностями интернет.

Добавление JavaScript-кода

После того, как вы разберетесь с XMLHttpRequest, оставшийся JavaScript-код превращается в рутинную работу. Фактически, вы будете использовать JavaScript-код для небольшого числа основных задач:
Получить данные формы: JavaScript-код упрощает извлечение данных из вашей HTML-формы и передает их на сервер.
Изменить значения в форме: Форма обновляется тоже легко, от установки значений полей до замены изображений "на лету".
Выполнить анализ HTML и XML: Вы будете использовать JavaScript-код для управления DOM (см. следующий раздел) и для работы со структурой вашей HTML-формы и всеми XML-данными, возвращаемыми сервером.

Для выполнения первых двух задач вы должны очень хорошо знать метод getElementById(), приведенный в листинге 2.

Листинг 2. Сбор и установка значений полей при помощи JavaScript-кода

// Получить значение поля "phone" и записать его в переменную phone
var phone = document.getElementById("phone").value;

// Установить значения в форме, используя массив response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

Здесь нет ничего такого уж выдающегося, и это здорово! Вы должны начать понимать, что нет ничего чрезмерно сложного во всем этом. Как только вы освоите XMLHttpRequest, оставшаяся часть вашего Ajax-приложения будет простым JavaScript-кодом, похожим на приведенный в листинге 2, смешанным с немного более умным HTML. К тому же, время от времени есть немного работы с DOM... Итак, давайте рассмотрим это.

Завершение с DOM

И последнее, хотя и не менее важное, - это DOM, Document Object Model (объектная модель документа). Для некоторых из вас слухи о DOM могут быть немного пугающими – она не часто используется HTML-дизайнерами и даже немного не свойственна кодировщикам на JavaScript (пока вы действительно не решаете каких-либо программных задач высокого уровня). Вы можете найти широкое применение DOM в тяжеловесных программах, написанных на языках Java и C/C++; фактически, это и принесло DOM репутацию сложной и трудной для изучения.

К счастью, использование DOM в технологии JavaScript является делом легким и в основном интуитивным. Сейчас мне, наверное, надо было бы рассказать вам, как использовать DOM или хотя бы привести пару примеров кода, но даже это сбило бы вас с верного пути. Дело в том, что вы можете продвинуться довольно далеко в изучении Ajax без необходимости примешивать сюда DOM, и это именно тот путь, который я хочу вам показать. Я вернусь к DOM в следующей статье, но сейчас просто знайте, что она где-то здесь. Когда вы начнете передавать XML-данные вперед и назад между вашим JavaScript-кодом и реальными изменениями HTML-формы, вы углубитесь в DOM. А пока можно эффективно работать с Ajax без DOM, так что пока отложим ее до поры до времени.