AJAX

Ajax

Класс языка:	Web Application, HTML, JavaScript, DHTML, Domain Object Model, XMLHttpRequest, JSON, XML, XSLT, XHTML, Cascading Style Sheets
Появился в:	2005
Автор:	Джесси Джеймс Гарретт

AJAX, Ajax (ˈeɪdʒæks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. По-русски иногда произносится по существующей аналогии у имени Ajax - Аякс, но у акронима AJAX нет устоявшегося варианта на кириллице.

Сравнение стандартного подхода и AJAX

В классической модели веб-приложения:

• Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.
• Браузер формирует и отправляет запрос серверу.
• В ответ сервер генерирует совершенно новую веб-страницу и отправляет её браузеру и т. д., после чего браузер полностью перезагружает всю страницу.

При использовании AJAX:

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

Технология

AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:

• использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например с использованием XMLHttpRequest (основной объект);

• через динамическое создание дочерних фреймов;
• через динамическое создание тега <script>.
• через динамическое создание тега <img>, как это реализовано в Google Analytics.

• использование DHTML для динамического изменения содержания страницы;

Действия с интерфейсом преобразуются в операции с элементами DOM (англ. Document Object Model), с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS (англ. Cascading Style Sheets), обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных.

Три из этих четырёх технологий — CSS, DOM и JavaScript — составляют DHTML (англ. Dynamic HTML). По мнению некоторых специалистов (книг),^{[каких?]} средства DHTML, появившиеся в 1997 году, подавали большие надежды, но так и не оправдали их.

В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или XML.

История

Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям». Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML-элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.

AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

Преимущества

Экономия трафика

Использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что вместо загрузки всей страницы достаточно загрузить только изменившуюся часть или вообще только получить/передать набор данных в формате JSON или XML, а затем изменить содержимое страницы с помощью JavaScript.

Уменьшение нагрузки на сервер

При правильной реализации AJAX позволяет снизить нагрузку на сервер в несколько раз.

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

Ускорение реакции интерфейса

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

Почти безграничные возможности для интерактивной обработки

Например, при вводе поискового запроса в Google выводится подсказка с возможными вариантами запроса. На многих сайтах при регистрации пользователь вводит имя, и сразу же видит, доступно это имя или нет. AJAX удобен для программирования чатов, административных панелей и других инструментов, которые выводят меняющиеся со временем данные.

Недостатки

Отсутствие интеграции со стандартными инструментами браузера

Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад», предоставляющая пользователям возможность вернуться к просмотренным ранее страницам, но существуют скрипты, которые могут решить эту проблему.

Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Проблему можно успешно решить с помощью History.pushState.

Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XMLHttpRequest)

Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта.

Старые методы учёта статистики сайтов становятся неактуальными

Многие сервисы статистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.

Усложнение проекта

Перераспределяется логика обработки данных — происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и типов. Конечный эффект технологии может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также риском снижения доступности сервиса для конечных пользователей.

Требуется включенный JavaScript в браузере

JavaScript может быть выключен из соображений безопасности. И, конечно же, AJAX-страницы труднодоступны неполнофункциональным браузерам, роботам и веб-архивам.

Проблемы с отображением нестандартных кодировок в некоторых сценариях ajax-скриптов 

О проблемах AJAX и кириллицы много сказано в обсуждениях в Интернете.

Низкая скорость при грубом программировании

Казалось бы, AJAX предназначен именно для повышения скорости. Но, когда AJAX-запросов на одной странице много и, например, по каждому щелчку подгружается список, AJAX-страница становится даже медленнее традиционной.

Плохое поведение на ненадёжных соединениях 

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

Риск фабрикации запросов другими сайтами

Результат работы AJAX-запроса может являться JavaScript-кодом (в частности, JSON). XMLHttpRequest действует только в пределах одного домена, а вот тег <script> — нет. Если написать

<script type="text/javascript" src="example.org/inbox.php"></script>

то в HTML будет вставлена папка входящих сообщений того пользователя, который на этом компьютере авторизован на example.org. Для защиты используют POST-запрос. Но GET считается идемпотентным и потому кэшируется, POST — нет, поэтому Google вставляет в начало ответа бесконечный цикл: AJAX может делать с ответом что угодно, в том числе убрать цикл, а тэг <script> подключит скрипт как есть и зациклится.

Альтернативные технологии

В хронологическом порядке:

• Java-апплеты, позднее технология JavaFX;
• Технология Silverlight корпорации Microsoft;
• Протокол WebSocket.

Adobe Flash

Стек технологий Flash (ранее — Macromedia Flash) в виде ActionScript 3, Adobe Flex и Flash Remoting составляет технологическую основу RIA (Rich Internet Applications), активно продвигаемых Macromedia (поглощенной компанией Adobe). Технология Flash подходит для самых разных применений — от компьютерных игр до сложных интерфейсов бизнес-приложений. В рамках данной технологии реализованы мощные средства поддержки графики, отсутствующие в базовых средствах Ajax (хотя всё возрастающее количество возможностей реализуется в рамках стандарта HTML5 и CSS3).

Литература

• Б. Маклафлин. Изучаем Ajax = Head Rush Ajax. — СПб.: Питер, 2007. — ISBN 978-5-91180-322-3.
• Стивен Хольцнер. Ajax Библия программиста = Ajax Bible. — М.: Диалектика, 2009. — С. 553. — ISBN 978-5-8459-1502-3.
• Дейв Крейн, Бер Бибо, Джордон Сонневельд. Ajax на практике = Ajax in Practice. — М.: Вильямс, 2007. — ISBN 978-5-8459-1327-2.
• Дэниел Вулстон. Ajax и платформа .NET 2.0 для профессионалов = Pro Ajax and the .NET 2.0 Platform. — М.: Вильямс, 2007. — С. 464. — ISBN 1-59059-670-6.
• Дейв Крейн, Эрик Паскарелло, Даррен Джеймс. AJAX в действии: технология — Asynchronous JavaScript and XML = Ajax in Action. — М.: Вильямс, 2006. — С. 640. — ISBN 1-932394-61-3.

Ссылки

• [www.akvi.ru/ajax.html AJAX: С чего начать] — перевод статьи с developer.mozilla.org, в которой доходчиво объясняется, как написать первое AJAX-приложение.
• [javascript.ru/ajax Ajax в деталях] — цикл статей на сайте javascript.ru
• [www.ibm.com/developerworks/ru/library/wa-ajaxintro1/index.html Освоение Ajax] — цикл статей на сайте IBM, посвящённый изучению AJAX.
• [ajax-development.narod.ru/ajax-article.html Перевод статьи «Новый подход к веб-приложениям»]
• [www.codenet.ru/webmast/js/ajax/ Модель Ajax]
• [designformasters.info/posts/start-with-ajax Основы работы с Ajax]

Отрывок, характеризующий AJAX

Лаврушка заметил это и, чтобы развеселить его, сказал, притворяясь, что не знает, кто он.
– Знаем, у вас есть Бонапарт, он всех в мире побил, ну да об нас другая статья… – сказал он, сам не зная, как и отчего под конец проскочил в его словах хвастливый патриотизм. Переводчик передал эти слова Наполеону без окончания, и Бонапарт улыбнулся. «Le jeune Cosaque fit sourire son puissant interlocuteur», [Молодой казак заставил улыбнуться своего могущественного собеседника.] – говорит Тьер. Проехав несколько шагов молча, Наполеон обратился к Бертье и сказал, что он хочет испытать действие, которое произведет sur cet enfant du Don [на это дитя Дона] известие о том, что тот человек, с которым говорит этот enfant du Don, есть сам император, тот самый император, который написал на пирамидах бессмертно победоносное имя.
Известие было передано.
Лаврушка (поняв, что это делалось, чтобы озадачить его, и что Наполеон думает, что он испугается), чтобы угодить новым господам, тотчас же притворился изумленным, ошеломленным, выпучил глаза и сделал такое же лицо, которое ему привычно было, когда его водили сечь. «A peine l'interprete de Napoleon, – говорит Тьер, – avait il parle, que le Cosaque, saisi d'une sorte d'ebahissement, no profera plus une parole et marcha les yeux constamment attaches sur ce conquerant, dont le nom avait penetre jusqu'a lui, a travers les steppes de l'Orient. Toute sa loquacite s'etait subitement arretee, pour faire place a un sentiment d'admiration naive et silencieuse. Napoleon, apres l'avoir recompense, lui fit donner la liberte, comme a un oiseau qu'on rend aux champs qui l'ont vu naitre». [Едва переводчик Наполеона сказал это казаку, как казак, охваченный каким то остолбенением, не произнес более ни одного слова и продолжал ехать, не спуская глаз с завоевателя, имя которого достигло до него через восточные степи. Вся его разговорчивость вдруг прекратилась и заменилась наивным и молчаливым чувством восторга. Наполеон, наградив казака, приказал дать ему свободу, как птице, которую возвращают ее родным полям.]
Наполеон поехал дальше, мечтая о той Moscou, которая так занимала его воображение, a l'oiseau qu'on rendit aux champs qui l'on vu naitre [птица, возвращенная родным полям] поскакал на аванпосты, придумывая вперед все то, чего не было и что он будет рассказывать у своих. Того же, что действительно с ним было, он не хотел рассказывать именно потому, что это казалось ему недостойным рассказа. Он выехал к казакам, расспросил, где был полк, состоявший в отряде Платова, и к вечеру же нашел своего барина Николая Ростова, стоявшего в Янкове и только что севшего верхом, чтобы с Ильиным сделать прогулку по окрестным деревням. Он дал другую лошадь Лаврушке и взял его с собой.


Княжна Марья не была в Москве и вне опасности, как думал князь Андрей.
После возвращения Алпатыча из Смоленска старый князь как бы вдруг опомнился от сна. Он велел собрать из деревень ополченцев, вооружить их и написал главнокомандующему письмо, в котором извещал его о принятом им намерении оставаться в Лысых Горах до последней крайности, защищаться, предоставляя на его усмотрение принять или не принять меры для защиты Лысых Гор, в которых будет взят в плен или убит один из старейших русских генералов, и объявил домашним, что он остается в Лысых Горах.
Но, оставаясь сам в Лысых Горах, князь распорядился об отправке княжны и Десаля с маленьким князем в Богучарово и оттуда в Москву. Княжна Марья, испуганная лихорадочной, бессонной деятельностью отца, заменившей его прежнюю опущенность, не могла решиться оставить его одного и в первый раз в жизни позволила себе не повиноваться ему. Она отказалась ехать, и на нее обрушилась страшная гроза гнева князя. Он напомнил ей все, в чем он был несправедлив против нее. Стараясь обвинить ее, он сказал ей, что она измучила его, что она поссорила его с сыном, имела против него гадкие подозрения, что она задачей своей жизни поставила отравлять его жизнь, и выгнал ее из своего кабинета, сказав ей, что, ежели она не уедет, ему все равно. Он сказал, что знать не хочет о ее существовании, но вперед предупреждает ее, чтобы она не смела попадаться ему на глаза. То, что он, вопреки опасений княжны Марьи, не велел насильно увезти ее, а только не приказал ей показываться на глаза, обрадовало княжну Марью. Она знала, что это доказывало то, что в самой тайне души своей он был рад, что она оставалась дома и не уехала.
На другой день после отъезда Николушки старый князь утром оделся в полный мундир и собрался ехать главнокомандующему. Коляска уже была подана. Княжна Марья видела, как он, в мундире и всех орденах, вышел из дома и пошел в сад сделать смотр вооруженным мужикам и дворовым. Княжна Марья свдела у окна, прислушивалась к его голосу, раздававшемуся из сада. Вдруг из аллеи выбежало несколько людей с испуганными лицами.
Княжна Марья выбежала на крыльцо, на цветочную дорожку и в аллею. Навстречу ей подвигалась большая толпа ополченцев и дворовых, и в середине этой толпы несколько людей под руки волокли маленького старичка в мундире и орденах. Княжна Марья подбежала к нему и, в игре мелкими кругами падавшего света, сквозь тень липовой аллеи, не могла дать себе отчета в том, какая перемена произошла в его лице. Одно, что она увидала, было то, что прежнее строгое и решительное выражение его лица заменилось выражением робости и покорности. Увидав дочь, он зашевелил бессильными губами и захрипел. Нельзя было понять, чего он хотел. Его подняли на руки, отнесли в кабинет и положили на тот диван, которого он так боялся последнее время.
Привезенный доктор в ту же ночь пустил кровь и объявил, что у князя удар правой стороны.
В Лысых Горах оставаться становилось более и более опасным, и на другой день после удара князя, повезли в Богучарово. Доктор поехал с ними.
Когда они приехали в Богучарово, Десаль с маленьким князем уже уехали в Москву.
Все в том же положении, не хуже и не лучше, разбитый параличом, старый князь три недели лежал в Богучарове в новом, построенном князем Андреем, доме. Старый князь был в беспамятстве; он лежал, как изуродованный труп. Он не переставая бормотал что то, дергаясь бровями и губами, и нельзя было знать, понимал он или нет то, что его окружало. Одно можно было знать наверное – это то, что он страдал и, чувствовал потребность еще выразить что то. Но что это было, никто не мог понять; был ли это какой нибудь каприз больного и полусумасшедшего, относилось ли это до общего хода дел, или относилось это до семейных обстоятельств?
Доктор говорил, что выражаемое им беспокойство ничего не значило, что оно имело физические причины; но княжна Марья думала (и то, что ее присутствие всегда усиливало его беспокойство, подтверждало ее предположение), думала, что он что то хотел сказать ей. Он, очевидно, страдал и физически и нравственно.
Надежды на исцеление не было. Везти его было нельзя. И что бы было, ежели бы он умер дорогой? «Не лучше ли бы было конец, совсем конец! – иногда думала княжна Марья. Она день и ночь, почти без сна, следила за ним, и, страшно сказать, она часто следила за ним не с надеждой найти призкаки облегчения, но следила, часто желая найти признаки приближения к концу.
Как ни странно было княжне сознавать в себе это чувство, но оно было в ней. И что было еще ужаснее для княжны Марьи, это было то, что со времени болезни ее отца (даже едва ли не раньше, не тогда ли уж, когда она, ожидая чего то, осталась с ним) в ней проснулись все заснувшие в ней, забытые личные желания и надежды. То, что годами не приходило ей в голову – мысли о свободной жизни без вечного страха отца, даже мысли о возможности любви и семейного счастия, как искушения дьявола, беспрестанно носились в ее воображении. Как ни отстраняла она от себя, беспрестанно ей приходили в голову вопросы о том, как она теперь, после того, устроит свою жизнь. Это были искушения дьявола, и княжна Марья знала это. Она знала, что единственное орудие против него была молитва, и она пыталась молиться. Она становилась в положение молитвы, смотрела на образа, читала слова молитвы, но не могла молиться. Она чувствовала, что теперь ее охватил другой мир – житейской, трудной и свободной деятельности, совершенно противоположный тому нравственному миру, в который она была заключена прежде и в котором лучшее утешение была молитва. Она не могла молиться и не могла плакать, и житейская забота охватила ее.
Оставаться в Вогучарове становилось опасным. Со всех сторон слышно было о приближающихся французах, и в одной деревне, в пятнадцати верстах от Богучарова, была разграблена усадьба французскими мародерами.
Доктор настаивал на том, что надо везти князя дальше; предводитель прислал чиновника к княжне Марье, уговаривая ее уезжать как можно скорее. Исправник, приехав в Богучарово, настаивал на том же, говоря, что в сорока верстах французы, что по деревням ходят французские прокламации и что ежели княжна не уедет с отцом до пятнадцатого, то он ни за что не отвечает.
Княжна пятнадцатого решилась ехать. Заботы приготовлений, отдача приказаний, за которыми все обращались к ней, целый день занимали ее. Ночь с четырнадцатого на пятнадцатое она провела, как обыкновенно, не раздеваясь, в соседней от той комнаты, в которой лежал князь. Несколько раз, просыпаясь, она слышала его кряхтенье, бормотанье, скрип кровати и шаги Тихона и доктора, ворочавших его. Несколько раз она прислушивалась у двери, и ей казалось, что он нынче бормотал громче обыкновенного и чаще ворочался. Она не могла спать и несколько раз подходила к двери, прислушиваясь, желая войти и не решаясь этого сделать. Хотя он и не говорил, но княжна Марья видела, знала, как неприятно было ему всякое выражение страха за него. Она замечала, как недовольно он отвертывался от ее взгляда, иногда невольно и упорно на него устремленного. Она знала, что ее приход ночью, в необычное время, раздражит его.
Но никогда ей так жалко не было, так страшно не было потерять его. Она вспоминала всю свою жизнь с ним, и в каждом слове, поступке его она находила выражение его любви к ней. Изредка между этими воспоминаниями врывались в ее воображение искушения дьявола, мысли о том, что будет после его смерти и как устроится ее новая, свободная жизнь. Но с отвращением отгоняла она эти мысли. К утру он затих, и она заснула.
Она проснулась поздно. Та искренность, которая бывает при пробуждении, показала ей ясно то, что более всего в болезни отца занимало ее. Она проснулась, прислушалась к тому, что было за дверью, и, услыхав его кряхтенье, со вздохом сказала себе, что было все то же.
– Да чему же быть? Чего же я хотела? Я хочу его смерти! – вскрикнула она с отвращением к себе самой.
Она оделась, умылась, прочла молитвы и вышла на крыльцо. К крыльцу поданы были без лошадей экипажи, в которые укладывали вещи.
Утро было теплое и серое. Княжна Марья остановилась на крыльце, не переставая ужасаться перед своей душевной мерзостью и стараясь привести в порядок свои мысли, прежде чем войти к нему.
Доктор сошел с лестницы и подошел к ней.
– Ему получше нынче, – сказал доктор. – Я вас искал. Можно кое что понять из того, что он говорит, голова посвежее. Пойдемте. Он зовет вас…