Состоящий из HTML, технологии JavaScript™, DHTML и DOM, Ajax представляет собой блестящий способ превратить громоздкие веб-интерфейсы в интерактивные приложения Ajax. Эта статья, написанная экспертом Ajax, демонстрирует, как эти технологии работают вместе — от общего обзора до подробного обсуждения — чтобы сделать эффективную веб-разработку реальностью. Он также раскрывает тайну основных концепций Ajax, включая объект XMLHttpRequest.
Пять лет назад, если вы не знали XML, вы были гадким утенком, которого никто не воспринимал всерьез. Восемнадцать месяцев назад Ruby стал центром внимания, и программисты, не знавшие Ruby, могли только сидеть на скамейке запасных. Сегодня, если вы хотите идти в ногу с новейшими технологиями, ваш пункт назначения — Ajax.
Но Ajax — это больше, чем просто причуда, это мощный способ создания веб-сайтов, который не так сложен, как изучение совершенно нового языка.
Но прежде чем мы углубимся в подробности того, что такое Ajax, давайте потратим несколько минут на то, чтобы понять, что делает Ajax. В настоящее время существует два основных варианта написания приложений:
· Настольные приложения · Веб-приложения
Эти два варианта похожи: настольные приложения обычно поставляются на компакт-диске (иногда их можно загрузить с веб-сайта) и полностью устанавливаются на ваш компьютер. Настольные приложения могут использовать Интернет для загрузки обновлений, но код, запускающий эти приложения, находится на настольном компьютере. Веб-приложения запускаются где-то на веб-сервере — неудивительно, что доступ к таким приложениям осуществляется через веб-браузер.
Однако более важным, чем то, где находится код, запускающий эти приложения, является то, как приложения функционируют и взаимодействуют с ними. Настольные приложения, как правило, работают быстро (запускаются прямо на вашем компьютере, не дожидаясь подключения к Интернету), имеют красивый пользовательский интерфейс (обычно зависит от операционной системы) и удивительно динамичны. Вы можете щелкать, выбирать, печатать, открывать меню и подменю, перемещаться по ним и практически никогда не ждать.
С другой стороны, веб-приложения представляют собой новейшую тенденцию, предоставляющую услуги, которые недоступны на настольных компьютерах (например, Amazon.com и eBay). Однако с развитием Интернета возникает необходимость ждать, ждать ответа сервера, ждать обновления экрана, ждать возврата запроса и генерировать новую страницу.
Очевидно, что это чрезмерное упрощение, но основная концепция такова. Как вы, наверное, догадались, Ajax пытается соединить функциональность и интерактивность настольных приложений с постоянно развивающимися веб-приложениями. Вы можете использовать динамические пользовательские интерфейсы и красивые элементы управления, подобные тем, которые есть в настольных приложениях, но в веб-приложении.
Чего ты ждешь? Давайте посмотрим, как Ajax может превратить неуклюжие веб-интерфейсы в отзывчивые приложения Ajax.
Старая технология, новые трюки
Когда дело доходит до Ajax, он на самом деле включает в себя множество технологий, и его гибкое использование требует глубокого понимания этих различных технологий (в первых нескольких статьях этой серии каждая из этих технологий будет обсуждаться отдельно). Хорошей новостью является то, что вы, вероятно, уже хорошо знакомы с большинством этих технологий, а еще лучше то, что их легко освоить и они не так сложны, как полноценные языки программирования, такие как Java или Ruby.
Ниже приведены основные технологии, используемые в приложениях Ajax:
·HTML используется для создания веб-форм и определения полей, используемых другими частями приложения.
· Код JavaScript — это основной код, который запускает приложения Ajax и помогает улучшить взаимодействие с серверными приложениями.
·DHTML или динамический HTML для динамического обновления форм. Мы будем использовать элементы div, span и другие динамические элементы HTML для разметки HTML.
·DOM объектной модели документа используется для обработки (через код JavaScript) структуры HTML и (в некоторых случаях) XML, возвращаемого сервером.
Определение Ajax
Кстати, Ajax — это аббревиатура асинхронного JavaScript и XML (а также DHTML и т. д.). Эту фразу придумал Джесси Джеймс Гарретт из Adaptive Path (см. Ресурсы), и, как объясняет Джесси, это не аббревиатура.
Давайте далее проанализируем обязанности этих технологий. Я подробно расскажу об этих технологиях в будущих статьях, а пока просто ознакомьтесь с компонентами и технологиями. Чем лучше вы знакомы с этими кодами, тем легче вам будет перейти от разрозненного понимания этих технологий к их истинному пониманию (что также действительно открывает двери для разработки веб-приложений).
Объект XMLHttpRequest
Единственный объект, который нужно понять, возможно, вам наиболее незнаком — XMLHttpRequest. Это объект JavaScript, и создать его просто, как показано в листинге 1.
Листинг 1. Создание нового объекта XMLHttpRequest
<script Language="javascript" type="text/javascript">
вар xmlHttp = новый XMLHttpRequest();
</script>
Мы обсудим этот объект подробнее в следующей статье, а пока знайте, что это объект, который обрабатывает всю связь с сервером. Прежде чем продолжить чтение, остановитесь и подумайте вот о чем: технология JavaScript общается с сервером через объект XMLHttpRequest. Это не обычный поток приложений, и именно в этом заключается мощь Ajax.
В типичном веб-приложении пользователь заполняет поля формы и нажимает кнопку «Отправить». Затем вся форма отправляется на сервер, который пересылает ее сценарию, который обрабатывает форму (обычно PHP или Java, возможно, процесс CGI или что-то подобное), а затем отправляет обратно совершенно новую страницу, когда сценарий завершен. Страница может быть HTML-кодом с новой формой, уже заполненной некоторыми данными, это может быть страница подтверждения или страница с некоторыми параметрами, выбранными на основе данных, введенных в исходную форму. Конечно, пользователю придется подождать, пока скрипт или программа на сервере обработает и вернет новую форму. Экран гаснет и ждет, пока данные не будут возвращены с сервера, прежде чем перерисовываться. Вот почему интерактивность плохая: пользователь не получает немедленной обратной связи, поэтому оно отличается от настольного приложения.
По сути, Ajax помещает технологию JavaScript и объект XMLHttpRequest между веб-формой и сервером. Когда пользователь заполняет форму, данные отправляются в некоторый код JavaScript, а не непосредственно на сервер. Вместо этого код JavaScript захватывает данные формы и отправляет запрос на сервер. При этом форма на экране пользователя не будет мерцать, исчезать или задерживаться. Другими словами, код JavaScript отправляет запрос «за кулисами», при этом пользователь даже не знает, что запрос делается. Более того, запрос отправляется асинхронно, а это означает, что коду JavaScript (и пользователю) не нужно ждать ответа от сервера. Таким образом, пользователь может продолжать вводить данные, прокручивать и использовать приложение.
Затем сервер возвращает данные коду JavaScript (все еще в веб-форме), который решает, что делать с данными. Он быстро обновляет данные формы, создавая впечатление, что приложение заполняется мгновенно, без отправки или обновления формы и получения пользователем новых данных. Код JavaScript может даже выполнить некоторые вычисления на основе полученных данных и отправить еще один запрос — и все это без вмешательства пользователя! В этом сила XMLHttpRequest. Он может самостоятельно взаимодействовать с сервером по мере необходимости, и пользователь даже может быть совершенно не в курсе того, что происходит за кулисами. Результатом является динамичное, отзывчивое и высокоинтерактивное приложение, похожее на настольное приложение, но со всей мощью Интернета.
Последобавления некоторого кода JavaScript
для получения дескриптора XMLHttpRequest остальной код JavaScript становится очень простым. Фактически, мы будем использовать код JavaScript для выполнения очень простых задач:
· Получение данных формы: код JavaScript может легко извлекать данные из формы HTML и отправлять их на сервер.
·Изменить данные в форме: обновить форму также легко: от установки значений полей до быстрой замены изображений.
· Анализ HTML и XML: используйте код JavaScript для управления DOM (см. следующий раздел) и обработки структуры данных XML, возвращаемых сервером форм HTML.
Для выполнения первых двух пунктов вам необходимо хорошо знать метод getElementById(), как показано в листинге 2.
Листинг 2. Захват и установка значений полей с помощью кода JavaScript
// Получаем значение поля «телефон» и помещаем его в переменную с именем телефон
var phone = document.getElementById("phone").value
// Устанавливаем некоторые значения в форме, используя массив с именем response
document.getElementById("order").value = ответ[0];
document.getElementById("address").value = response[1];
Здесь особо нечего отметить, это здорово! Вы должны понимать, что ничего ужасно сложного здесь нет. После того как вы освоите XMLHttpRequest, остальная часть вашего Ajax-приложения будет представлять собой простой код JavaScript, как показано в листинге 2, смешанный с небольшим количеством HTML. В то же время нам также нужно использовать немного DOM, так что давайте посмотрим.
Завершаем DOM
Наконец, есть DOM, объектная модель документа. DOM может показаться немного пугающим для некоторых читателей. HTML-дизайнеры редко используют его, и даже программисты JavaScript редко используют его, если они не хотят выполнить сложную задачу программирования. Сложные программы на Java и C/C++ интенсивно используют DOM, поэтому, возможно, DOM считается трудным для изучения.
К счастью, работать с DOM в технологии JavaScript легко и интуитивно понятно. Традиционно вам, вероятно, следует объяснить, как использовать DOM, или хотя бы привести пример кода, но это также может ввести вас в заблуждение. Даже если вы игнорируете DOM, вы все равно можете углубиться в Ajax, и я собираюсь использовать именно этот подход. Мы вернемся к DOM в следующей статье, а пока достаточно знать, что он может вам понадобиться. Мы углубимся в DOM, когда нам понадобится передать XML между кодом JavaScript и сервером и изменить HTML-формы. Без него можно проделать интересную работу, поэтому пока отложите DOM в сторону.
Получение объекта Request
Имея вышеизложенные базовые знания, давайте рассмотрим несколько конкретных примеров. XMLHttpRequest лежит в основе Ajax-приложений и может быть незнаком многим читателям, поэтому начнем с него. Как видно из листинга 1, создать и использовать этот объект очень просто, не так ли? Ждать.
Помните те отвратительные войны браузеров, которые произошли несколько лет назад? Ничто не дает одинаковых результатов в разных браузерах. Хотите верьте, хотите нет, но эти войны все еще продолжаются, хотя и в меньших масштабах. Но, как ни странно, XMLHttpRequest стал одной из жертв этой войны. Поэтому для получения объекта XMLHttpRequest может потребоваться другой подход. Я объясню это подробно ниже.
Использование браузера Microsoft
Браузер Microsoft Internet Explorer использует анализатор MSXML для обработки XML (подробнее о MSXML можно узнать в разделе Ресурсы). Поэтому, если вы пишете Ajax-приложение, взаимодействующее с Internet Explorer, вам необходимо создавать объекты особым образом.
Но это не так просто. На самом деле существует две разные версии MSXML в зависимости от версии технологии JavaScript, установленной в Internet Explorer, поэтому для каждого случая необходимо писать отдельный код. См. листинг 3, содержащий код, создающий XMLHttpRequest в браузере Microsoft.
Листинг 3. Создание объекта XMLHttpRequest в браузере Microsoft
var xmlHttp = false;
пытаться {
xmlHttp = новый ActiveXObject("Msxml2.XMLHTTP");
} поймать (е) {
пытаться {
xmlHttp = новый ActiveXObject("Microsoft.XMLHTTP");
} поймать (e2) {
xmlHttp = ложь;
}
}
Возможно, вы еще не до конца понимаете код, но это нормально. К концу этой серии статей вы получите более глубокое понимание программирования на JavaScript, обработки ошибок, условной компиляции и многого другого. Теперь просто запомните две строки кода:
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
и
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.
Эти две строки кода по сути пытаются создать объект, используя одну версию MSXML, а если это не удается, создайте объект, используя другую версию. Неплохо, правда? Если ни то, ни другое не удается, переменной xmlHttp присваивается значение false, сообщая вашему коду о наличии проблемы. Если это происходит, возможно, установлен браузер стороннего производителя, для которого требуется другой код.
Работа с браузерами Mozilla и браузерами сторонних производителей.
Если вы выберете браузер, отличный от Internet Explorer, или если вы пишете код для браузера стороннего производителя, вам придется использовать другой код. На самом деле это простая строка кода, показанная в листинге 1:
var xmlHttp = новый объект XMLHttpRequest;.
Эта гораздо более простая строка кода создает объект XMLHttpRequest в Mozilla, Firefox, Safari, Opera и практически в любом браузере, отличном от Microsoft, который поддерживает Ajax в любой форме и способе.
Ключомк объединению этого
является поддержка всех браузеров. Кто захочет написать приложение, которое будет работать только с Internet Explorer или браузерами сторонних производителей? Или, что еще хуже, написать приложение дважды? Конечно, нет! Поэтому код должен поддерживать как Internet Explorer, так и браузеры сторонних производителей. В листинге 4 показан такой код.
Листинг 4. Создание объекта XMLHttpRequest для поддержки нескольких браузеров
/* Создайте новый объект XMLHttpRequest для связи с веб-сервером */
вар xmlHttp = ложь;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
пытаться {
xmlHttp = новый ActiveXObject("Msxml2.XMLHTTP");
} поймать (е) {
пытаться {
xmlHttp = новый ActiveXObject("Microsoft.XMLHTTP");
} поймать (e2) {
xmlHttp = ложь;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'неопределено') {
xmlHttp = новый XMLHttpRequest();
}
На данный момент игнорируйте странные закомментированные символы, такие как @cc_on, которые представляют собой специальные команды компилятора JavaScript, которые будут подробно обсуждаться в следующей статье о XMLHttpRequest. Суть этого кода разделена на три этапа:
1. Создайте переменную xmlHttp для ссылки на создаваемый объект XMLHttpRequest.
2. Попробуйте создать объект в браузере Microsoft:
1) Попробуйте создать его, используя объект Msxml2.XMLHTTP.
2) Если это не удалось, попробуйте объект Microsoft.XMLHTTP еще раз.
2. Если xmlHttp по-прежнему не создан, создайте объект способом, отличным от Microsoft.
Наконец, xmlHttp должен ссылаться на действительный объект XMLHttpRequest, независимо от того, какой браузер он использует.
Небольшое замечание по поводу безопасности.
Как насчет безопасности? Браузеры теперь позволяют пользователям повышать уровень безопасности, отключать технологию JavaScript и отключать любые параметры браузера. В этом случае код все равно не будет работать. На этом этапе необходимо разобраться с проблемой соответствующим образом, что требует отдельной статьи на будущее (эта серия достаточно длинная, не так ли? Не волнуйтесь, вы можете получить ее до того, как дочитаете). Теперь давайте напишем надежный, но не идеальный фрагмент кода, который подойдет для освоения Ajax. Мы обсудим это более подробно позже.
Запрос/ответ в мире Ajax
Теперь, когда мы познакомились с Ajax, у нас есть базовое представление об объекте XMLHttpRequest и о том, как его создать. Если вы внимательно прочитали, вы, вероятно, уже знаете, что именно технология JavaScript работает с веб-приложениями на сервере, а не с HTML-формами, которые передаются непосредственно этому приложению.
Чего не хватает? Как именно использовать XMLHttpRequest. Поскольку этот код настолько важен, что каждое написанное вами приложение Ajax будет использовать его в той или иной форме, давайте начнем с рассмотрения того, как выглядит базовая модель запроса/ответа Ajax.
Выполнение запроса
Теперь, когда у вас есть новый объект XMLHttpRequest, давайте дадим ему немного поработать. Во-первых, вам нужен метод JavaScript, который может вызывать веб-страница (например, когда пользователь вводит текст или выбирает элемент из меню). Далее следует процесс, который в основном одинаков для всех приложений Ajax:
1. Получите необходимые данные из веб-формы.
2. Создайте URL-адрес для подключения.
3. Откройте соединение с сервером.
4. Установите функцию, которая будет запущена сервером после завершения.
5. Отправьте запрос.
Примеры Ajax-методов в листинге 5 расположены в следующем порядке:
Листинг 5. Выполнение Ajax-запроса.
функция callServer() {
// Получаем город и штат из веб-формы
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Продолжаем, только если есть значения для обоих полей
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Создаем URL-адрес для подключения;
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Открытие соединения с сервером;
xmlHttp.open("GET", url, true);
// Настраиваем функцию для запуска сервера после завершения работы;
xmlHttp.onreadystatechange = updatePage
// Отправляем запрос
;
xmlHttp.send (нуль);
}
Смысл большинства кодов очень ясен. Код в начале использует базовый код JavaScript для получения значений нескольких полей формы. Затем установите PHP-скрипт в качестве цели ссылки. Обратите внимание на способ указания URL-адреса сценария: город и штат (из формы) добавляются к URL-адресу с помощью простых параметров GET.
Затем открывается соединение, и это первый раз, когда вы видите использование XMLHttpRequest. Указываются метод подключения (GET) и URL-адрес для подключения. Последний параметр, если установлено значение true, будет запрашивать асинхронное соединение (это источник Ajax). Если используется false, код будет ждать ответа от сервера после выполнения запроса. Если установлено значение true, пользователи по-прежнему смогут использовать форму (и даже вызывать другие методы JavaScript), пока сервер обрабатывает запросы в фоновом режиме.
Атрибут onreadystatechange объекта xmlHttp (помните, что это экземпляр объекта XMLHttpRequest) сообщает серверу, что делать после завершения работы (что может занять пять минут или пять часов). Поскольку код не ждет сервера, он должен сообщить серверу, что делать, чтобы вы могли ответить. В этом примере, если сервер завершил обработку запроса, будет запущен специальный метод updatePage().
Наконец, send() вызывается со значением null. Поскольку данные, которые должны быть отправлены на сервер (город и штат), были добавлены в URL-адрес запроса, в запросе отправлять данные не требуется. Таким образом, запрос делается, и сервер работает в соответствии с вашим запросом.
Если вы не найдете ничего нового, оцените, насколько это просто и понятно! Если не принимать во внимание асинхронную природу Ajax, все довольно просто. Будьте благодарны за то, что Ajax позволяет вам сосредоточиться на написании красивых приложений и интерфейсов, а не беспокоиться о сложном коде HTTP-запросов/ответов.
Код в листинге 5 иллюстрирует простоту использования Ajax. Данные представляют собой простой текст и могут использоваться как часть URL-адреса запроса. Отправляйте запросы с помощью GET вместо более сложного POST. Другими словами, это утопия Ajax.
Не волнуйтесь, по мере развития этой серии статей все будет усложняться. Вы увидите, как отправить запрос POST, как установить заголовки запроса и тип контента, как закодировать XML в сообщении, как повысить безопасность запроса и многое другое, что вы можете сделать! Пока не беспокойтесь об этих трудностях, просто освойте базовые вещи, и вскоре мы создадим полный набор библиотек инструментов Ajax.
Обработка ответа
Теперь приходит ответ сервера. На данный момент нужно знать только две вещи:
· Ничего не делать, пока значение свойства xmlHttp.readyState не станет равным 4.
· Сервер заполнит свойство xmlHttp.responseText ответом.
Первое из них, состояние готовности, будет подробно обсуждаться в следующей статье, и вы узнаете об этапах HTTP-запроса больше, чем вы, вероятно, думали. На данный момент достаточно проверить конкретное значение (4) (в следующей статье будут рассмотрены другие значения). Второй момент: используйте свойство xmlHttp.responseText, чтобы получить ответ сервера, это очень просто. Пример метода в листинге 6 может быть вызван сервером на основе данных, отправленных в листинге 5.
Листинг 6. Обработка ответа сервера
с помощью функции updatePage() {
если (xmlHttp.readyState == 4) {
вар ответ = xmlHttp.responseText;
document.getElementById("zipCode").value = ответ;
}
}
Коды также не являются ни сложными, ни сложными. Он ожидает вызова сервера и, если он готов, устанавливает значение другого поля формы, используя значение, возвращаемое сервером (здесь почтовый индекс города и штата, введенный пользователем). И вдруг поле zipCode, содержащее почтовый индекс, появляется без нажатия пользователем каких-либо кнопок! Это то, что я упоминал ранее как настольное приложение. Быстрый отклик, ощущение динамичности и т. д. — и все это благодаря небольшому фрагменту кода Ajax.
Внимательные читатели могут заметить, что zipCode — это обычное текстовое поле. Как только сервер возвращает ZIP-кодировку, метод updatePage() устанавливает значение этого поля с ZIP-кодировкой города/штата, которую пользователь может переопределить. Это сделано по двум причинам: чтобы упростить пример и проиллюстрировать, что иногда вам может потребоваться предоставить пользователю возможность изменять данные, возвращаемые сервером. Помните об этих двух вещах: они важны для хорошего дизайна пользовательского интерфейса.
Что еще можно
подключить к веб-форме
?На самом деле осталось не так уж и много. Один метод JavaScript собирает информацию, которую пользователь вводит в форму, и отправляет ее на сервер, а другой метод JavaScript прослушивает и обрабатывает ответ и устанавливает значение поля, когда ответ возвращается. Все это фактически основано на вызове первого метода JavaScript, который запускает весь процесс. Самое очевидное решение — добавить кнопку в HTML-форму, но это 2001 год, вам не кажется? Давайте воспользуемся технологией JavaScript, такой как листинг 7.
Листинг 7. Запуск процесса Ajax
<form>
<p>Город: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>Состояние: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Почтовый индекс: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
Если вам кажется, что это довольно распространенный фрагмент кода, вы правы, так и есть! Когда пользователь вводит новое значение в поле города или штата, запускается метод callServer() и запускается Ajax. Вы хоть немного понимаете, что происходит? Ну, вот и все!
Заключение
Теперь вы, вероятно, готовы приступить к написанию своего первого Ajax-приложения и, по крайней мере, хотите внимательно прочитать статьи в ресурсах, не так ли? Но начать можно с базового представления о том, как работают эти приложения, и базового понимания объекта XMLHttpRequest. В следующем выпуске вы освоите этот объект и узнаете, как управлять связью между JavaScript и сервером, как использовать HTML-формы и как получить дескриптор DOM.
Теперь подумайте, насколько мощными могут быть приложения Ajax. Представьте себе веб-форму, которая мгновенно реагирует, когда вы нажимаете кнопку, вводите поле, выбираете параметр из поля со списком или перетаскиваете мышь по экрану. Подумайте о том, что на самом деле означает асинхронность, подумайте о том, как код JavaScript выполняется, а не ждет ответа сервера на его запрос. С какими проблемами вы столкнетесь? В какое поле он войдет? Учитывая этот новый подход, как нам следует изменить дизайн формы при программировании?
Если вы потратите немного времени на эти вопросы, вы получите больше, чем просто вырезание/вставка кода в приложение, которое вы совершенно не понимаете. В следующем выпуске мы применим эти концепции на практике, подробно описывая код, необходимый для работы приложения таким образом. Так что пока наслаждайтесь возможностями, которые может предложить Ajax.