Пользователи очень быстро заслуженно оценили сервисы Google за их удобство, скорость работы и высокую отзывчивость. Кроме того, компания предложила беспрецендентный объем бесплатного почтового ящика в несколько гигабайт, но это уже другая история. Успех Gmail и Google Maps не прошел незамеченным, и технологией асинхронной передачи данных между браузером клиента и сервером стали интересоваться многие разработчики. Интерес к новому подходу при построении веб-сайтов все возрастал, все больше появлялось ресурсов, которые позволяли управлять собой без перезагрузок страницы, предлагая пользователю новый и интересный опыт общения с Интернетом.
В 2005 году Джейси Джеймс Гарретт, специалист по разработке пользовательских интерфейсов, придумывает специальный термин к технологии, которая уже заразила Интернет. Этим названием стал известный нам термин Ajax. В своей статье "Ajax: A New Approach to Web Applications" Гарретт описал как саму технологию, так и дал ей название. Ознакомиться с довольно объемной и подробной статьей можно и сегодня по адресу http://www.adaptivepath.com/ideas/essays/archives/000385.php. 18 февраля 2005 года, день выхода статьи, можно считать днем рождения старой технологии под новым именем, которое изменило представление об Интернете.
В апреле 2006 года консорциум W3C утвердил первый черновик стандарта, который описывал объект XMLHttpRequest. Это стало заключительным аккордом в широком распространении технологии Ajax, теперь основополагающая технология была стандартизирована, и ничто не мешало ее дальнейшему распространению.
Современный Ajax
В наше время уже трудно найти новые веб-проекты, которые бы не использовали технологию Ajax. Да и многие другие старые и заслуженные ресурсы также получают обновление сервисов с включением Ajax в той или иной мере. Например, вслед за появлением Gmail другой популярный сервис Hotmail также обзавелся Ajax-интерфейсом, за ними последовали многие другие почтовые онлайн-сервисы.
Применение Ajax находится повсюду, например, крупнейший социальный сервис с IT-тематикой Habrahabr.ru использует Ajax для препросмотра написанной статьи или комментария, для изменения рейтинга записей и пользователей. Другие популярные социальные сервисы вроде Facebook или Spaces предпочитают использовать Ajax для простых действий наподобие подтверждения пользователем своих действий или работы с данными других пользователей сети.
Еще одним интересным применением Ajax, которое предлагает пользователю новый опыт при использовании интерфейсов веб-приложений, стало извлечение данных по требованию. Так, например, Google Reader, популярный сервис для чтения RSS-каналов, позволяет с помощью скроллирования получать все новые и новые данные RSS-ленты, хотя предзагружена изначально лишь малая их часть. Подобный вариант, только более наглядный для пользователя, использует поисковой сервис Bing, в котором реализован "бесконечный" поиск по изображениям. Новые результаты поиска в виде набора изображений будут подгружаться по мере того, как пользователь скроллирует страницу все ниже и ниже (рис. 7.2).
Помимо простого влияния Ajax на современное представление о пользовательских интерфейсах, технология Ajax оказывает огромное влияние на интернет-индустрию в целом. Ajax вдохнул вторую жизнь в веб-сайты, многие из которых стали дублировать функционал, который ранее казался привязанным к десктопу. Появились ресурсы, которые позволяют редактировать офисные документы или изображения. Движение Rich Internet Applications, которое, как ранее казалось, будет осуществляться посредством плагинов и сторонних технологий вроде Flash или Silverlight, теперь вполне осуществимо стандартными веб-технологиями на основе браузера, HTML и JavaScript. Конечно, RIA на базе веб-технологий пока отстает по производительности и возможностям от технологий Flash/Silverlight, но многие задачи, которые ранее решались с помощью Flash, теперь можно решить на базе усиленного с помощью Ajax HTML-интерфейса.
Широкое распространение Ajax не могло пройти мимо инструментов разработчиков, и почти все они обзавелись поддержкой Ajax, с помощью которой работа с Ajax-запросами значительно упрощается. Такие Framework, как ExtJS, jQuery, MooTools и другие популярные инструменты для разработки JavaScript-кода, конечно, имеют поддержку Ajax. Об одном из таких инструментов пойдет речь и в этой главе. jQuery — популярнейший JS Framework содержит несколько инструментов для удобной работы с Ajax и, что очень важно, включен в состав Visual Studio и проект MVC Framework по умолчанию.
Пример использования Ajax
Для того чтобы понять, что такое Ajax, достаточно рассмотреть один или несколько примеров его использования. Создадим реализацию классического примера, который использует механизм Ajax для получения текущего времени с сервера.
Первым делом мы должны создать экземпляр объекта XMLHttpRequest:
var xhr;
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else
if (window.ActiveXObject)
{
xhr = new ActiveXObj ect("Microsoft.XMLHTTP");
}
else
{
alert("Браузер не поддерживает XMLHttpRequest!");
}
Здесь в переменной xhr создается объект XMLHttpRequest. В зависимости от типа браузера доступ к этому объекту может быть разным. Старые версии Internet Explorer работают только через создание ActiveX-компонента. В Internet Explorer 7 и выше работа с XMLHttpRequest приведена к стандарту.
Для обработки результатов асинхронного запроса XMLHttpRequest используется свойство onreadystatechange, которое вызывается всякий раз, как объект XMLHttpRequest изменяет свое состояние. Для проверки текущего состояния используется другое свойство readyState, которое содержит значение текущего состояния XMLHttpRequest. Все возможные значения readyState перечислены далее:
□ readyState = 0 — запрос не инициализирован;
□ readyState = 1 — запрос был установлен;
□ readyState = 2 — запрос был отправлен;
□ readyState = 3 — запрос происходит в данное время;
□ readyState = 4 — запрос завершен, получен результат.
Другое свойство responseText отвечает за хранение ответа от сервера после запроса. Если совместить использование всех этих свойств вместе, то можно написать следующий часто используемый код обработки асинхронного запроса:
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
docum.ent.getElementById("timeText") .value = xhr.responseText;
}
}
Здесь свойству onreadystatechange присваивается функция для обработки изменения состояния объекта XMLHttpRequest, представленного переменной xhr. Функция проверяет свойство readyState на значение 4, которое говорит об успешном завершении запроса и присваивает элементу с идентификатором timeText текстовое значение результата запроса.
Для создания запроса к серверу используется две функции XMLHttpRequest: open и send. Функция open содержит три параметра:
□ текстовое значение с типом запроса: GET или POST;
□ текстовое значение со строкой запроса, указывающей на страницу, к которой необходимо выполнить запрос;
□ булево значение, определяющее, должен ли быть запрос асинхронным.
Функция send содержит один параметр, который должен определять данные, отправляемые вместе с запросом. Данные могут представлять собой как некую строку, так и XML-документ. В настоящее время чаще всего используется первый вариант, когда данные передаются в виде строки JSON-данных.
