Просмотр кода страницы AJAX

{{другие значения|Аякс}}
{{орисс|дата=20 апреля 2013}}
{{Язык программирования
|name=Ajax
|logo=AJAX_logo_by_gengns.svg
|logo_size=300px
|year=2005
|designer={{нп5|Гарретт, Джесси Джеймс|Джесси Джеймс Гарретт|en|Jesse James Garrett}}
|paradigm=[[Веб-приложение|Web Application]], [[HTML]], [[JavaScript]], [[DHTML]], [[Document Object Model]], [[XMLHttpRequest]], [[JSON]], [[XML]], [[XSLT]], [[XHTML]], [[Cascading Style Sheets]]
}}

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

== История ==
Впервые термин AJAX был публично использован [[18 февраля]] [[2005 год]]а {{нп5|Гарретт, Джесси Джеймс|Джесси Джеймсом Гарреттом||Jesse James Garrett}} в своей статье «Новый подход к веб-приложениям»<ref>{{cite web|author=Jesse James Garrett|title=Ajax: A New Approach to Web Applications|url=https://courses.cs.washington.edu/courses/cse490h/07sp/readings/ajax_adaptive_path.pdf|publisher=Adaptive Path|date=2005-02-18|access-date=2021-03-01|archive-date=2021-02-12|archive-url=https://web.archive.org/web/20210212221825/https://courses.cs.washington.edu/courses/cse490h/07sp/readings/ajax_adaptive_path.pdf|url-status=live}}</ref> — так он назвал новый набор технологий, предлагавшийся им клиенту.

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

== Технология ==
AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:
* использование технологии динамического обращения к [[Сервер (программное обеспечение)|серверу]] «на лету», без перезагрузки всей страницы полностью, например с использованием [[XMLHttpRequest]] (основной объект);
**через динамическое создание дочерних фреймов<ref>[http://www.oreillynet.com/pub/a/javascript/2002/02/08/iframe.html Remote scripting with IFRAME] {{Wayback|url=http://www.oreillynet.com/pub/a/javascript/2002/02/08/iframe.html |date=20140626153547 }}{{ref|en}}</ref>;
**через динамическое создание тега &lt;script&gt;<ref name="JsHttpRequest">{{Cite web |url=http://dklab.ru/lib/JsHttpRequest/ |title=JsHttpRequest |access-date=2006-12-24 |archive-date=2007-10-21 |archive-url=https://web.archive.org/web/20071021041811/http://dklab.ru/lib/JsHttpRequest/ |url-status=dead }}</ref>;
**через динамическое создание тега &lt;img&gt;, как это реализовано в Google Analytics.
* использование [[DHTML]] для динамического изменения содержания страницы;

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

Три из этих четырёх технологий — CSS, DOM и [[JavaScript]] — составляют [[DHTML]] ({{lang-en|Dynamic HTML}}). По мнению некоторых авторов<ref>{{Книга|автор=Дейв Крейн|заглавие=Ajax в действии|ссылка=https://books.google.ru/books?id=LwKojB3lEhoC&lpg=PA64&ots=1WewGLdctE&dq=%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0%20DHTML,%20%D0%BF%D0%BE%D1%8F%D0%B2%D0%B8%D0%B2%D1%88%D0%B8%D0%B5%D1%81%D1%8F%20%D0%B2%201997%20%D0%B3%D0%BE%D0%B4%D1%83,%20%D0%BF%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BB%D0%B8%20%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B8%D0%B5%20%D0%BD%D0%B0%D0%B4%D0%B5%D0%B6%D0%B4%D1%8B,%20%D0%BD%D0%BE%20%D1%82%D0%B0%D0%BA%20%D0%B8%20%D0%BD%D0%B5%20%D0%BE%D0%BF%D1%80%D0%B0%D0%B2%D0%B4%D0%B0%D0%BB%D0%B8%20%D0%B8%D1%85&hl=ru&pg=PA64|издательство=Вильямс|год=2008|страниц=640|isbn=9785845910349|archive-date=2017-12-12|archive-url=https://web.archive.org/web/20171212193113/https://books.google.ru/books?id=LwKojB3lEhoC&lpg=PA64&ots=1WewGLdctE&dq=%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0%20DHTML,%20%D0%BF%D0%BE%D1%8F%D0%B2%D0%B8%D0%B2%D1%88%D0%B8%D0%B5%D1%81%D1%8F%20%D0%B2%201997%20%D0%B3%D0%BE%D0%B4%D1%83,%20%D0%BF%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BB%D0%B8%20%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B8%D0%B5%20%D0%BD%D0%B0%D0%B4%D0%B5%D0%B6%D0%B4%D1%8B,%20%D0%BD%D0%BE%20%D1%82%D0%B0%D0%BA%20%D0%B8%20%D0%BD%D0%B5%20%D0%BE%D0%BF%D1%80%D0%B0%D0%B2%D0%B4%D0%B0%D0%BB%D0%B8%20%D0%B8%D1%85&hl=ru&pg=PA64#v=onepage&q=%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0%20DHTML,%20%D0%BF%D0%BE%D1%8F%D0%B2%D0%B8%D0%B2%D1%88%D0%B8%D0%B5%D1%81%D1%8F%20%D0%B2%201997%20%D0%B3%D0%BE%D0%B4%D1%83,%20%D0%BF%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BB%D0%B8%20%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B8%D0%B5%20%D0%BD%D0%B0%D0%B4%D0%B5%D0%B6%D0%B4%D1%8B,%20%D0%BD%D0%BE%20%D1%82%D0%B0%D0%BA%20%D0%B8%20%D0%BD%D0%B5%20%D0%BE%D0%BF%D1%80%D0%B0%D0%B2%D0%B4%D0%B0%D0%BB%D0%B8%20%D0%B8%D1%85&f=false}}</ref>, средства DHTML, появившиеся в 1997 году, подавали большие надежды, но так и не оправдали их.

В качестве формата передачи данных могут использоваться фрагменты простого текста, [[HTML]]-кода, [[JSON]] или [[XML]].
<!-- (перенести в [[JSON]])
[[JSON]] хорош тем, что на стороне [[клиент]]а его не надо обрабатывать каким-то специальным образом, достаточно выполнить вызов [[функция (программирование)|функции]] <code>eval()</code>. Однако, исходя из соображений [[информационная безопасность|безопасности]], его необходимо анализировать, так как при передаче вредоносного кода функция <code>eval()</code> выполнит данный код.
-->

== Сравнение стандартного подхода и AJAX ==
[[Файл:Ajax-model-ru.svg|thumb|250px|Модель классических приложений для сети (слева) в сравнении с применением AJAX (справа).]]
В классической модели веб-приложения:
# Пользователь нажимает ссылочный элемент веб-страницы;
# Опционально: связанный с элементом [[скрипт]] (на языке [[JavaScript]]) определяет информацию для обновления страницы;
# [[Браузер]] формирует и отправляет обычный [[HTTP|запрос]] [[веб-сервер|серверу]];
# В ответ сервер генерирует новую веб-страницу и отправляет её браузеру;
# Браузер переходит на новую веб-страницу.

При использовании AJAX:
# Пользователь нажимает ссылочный элемент веб-страницы;
# Связанный с элементом скрипт (с XMLHttpRequest- или DHTML-инструкциями) определяет информацию для модификации страницы;
# Браузер формирует и отправляет небольшой запрос серверу;
# В ответ сервер генерирует модифицированный элемент страницы и отправляет его браузеру;
# Скрипт модифицирует страницу без полной перезагрузки.

== Преимущества ==
; Экономия трафика, уменьшение нагрузки на сервер : При правильной реализации AJAX позволяет снизить нагрузку на сервер в несколько раз. В частности, все страницы сайта чаще всего генерируются по одному шаблону, включая неизменные элементы («шапка», «навигационная панель», «подвал» и т. д.), для генерации которых требуются обращения к разным файлам, время на обработку скриптов (а иногда и запросы к БД) — всё это можно опустить, если заменить полную загрузку страницы генерацией и передачей лишь содержательной части.
; Ускорение реакции интерфейса : Поскольку загрузка изменившейся части значительно быстрее, то пользователь видит результат своих действий быстрее и без мерцания страницы (возникающего при полной перезагрузке).
; Возможности для интерактивной обработки : Например, при вводе поискового запроса в [[Google (поисковая система)|Google]] выводится подсказка с возможными вариантами запроса. На многих сайтах при регистрации пользователь вводит имя и сразу же видит, доступно это имя или нет. AJAX удобен для программирования [[Чат (программа)|чатов]], административных панелей и других инструментов, которые выводят меняющиеся со временем данные.
; [[Мультимедиа]] не останавливается : Страница не перезагружается, плеер продолжает работать. Потому AJAX ценен на аудио- и видеохостингах. Так, [[YouTube]] на 2021 г. позволяет играть видео в режиме «[[картинка в картинке]]».

== Недостатки ==
; Отсутствие интеграции со стандартными инструментами браузера : URL не меняется, потому не работает кнопка «Назад», невозможно сохранить закладку. Проблему можно успешно решить с помощью History.pushState<ref>{{Cite web |url=http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html |title=History/State APIs |access-date=2012-10-15 |archive-date=2011-10-19 |archive-url=https://web.archive.org/web/20111019173013/http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html |url-status=live }}</ref>.
; Динамически загружаемое содержимое недоступно некоторым поисковикам: Хотя крупные [[Поисковая система|поисковые системы]] ([[Яндекс (поисковая система)|Яндекс]], [[Google (поисковая система)|Google]]) заявляют о поддержке индексации страниц с динамическим содержимым<ref>{{Cite web|url=https://yandex.ru/support/webmaster/robot-workings/ajax-indexing.html|title=Индексирование AJAX-сайтов - Вебмастер. Справка|lang=ru|website=yandex.ru|access-date=2025-02-11}}</ref><ref>{{Cite web|url=https://developers.google.com/search/blog/2015/10/deprecating-our-ajax-crawling-scheme|title=Deprecating our AJAX crawling scheme {{!}} Google Search Central Blog|lang=en|website=Google for Developers|access-date=2025-02-11}}</ref>, менее развитые индексаторы могут не поддерживать выполнение [[JavaScript]], поэтому разработчик должен позаботиться о добавлении микроразметки и [[Статический сайт|статических версий страницы]].
; Старые методы учёта статистики сайтов становятся неактуальными : Многие сервисы статистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.
; Усложнение проекта: Перераспределяется логика обработки данных — происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и типов. Конечный эффект технологии может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также риском снижения доступности сервиса для конечных пользователей.
; Требуется включённый JavaScript в браузере : Он может быть выключен из соображений безопасности. Кроме того, AJAX-страницы труднодоступны неполнофункциональным браузерам, некоторым роботам и [[веб-архив]]ам.
; Проблемы с отображением нестандартных кодировок в некоторых сценариях ajax-скриптов : Проблемам AJAX и кириллицы посвящено множество  обсуждений в Интернете<ref>{{Cite web|url=http://easywebscripts.net/ajax/ajax_rus.php|title=AJAX и русские буквы - проблема с кодировкой.|author=|work=|date=|publisher=|access-date=2016-08-15|archive-date=2016-08-25|archive-url=https://web.archive.org/web/20160825085845/http://easywebscripts.net/ajax/ajax_rus.php|url-status=dead}}</ref>.
; Низкая скорость при грубом программировании : Несмотря на то, что AJAX изначально предназначен именно для повышения скорости, он может сыграть злую шутку: когда AJAX-запросов на одной странице много и, например, по каждому щелчку подгружается список, AJAX-страница становится даже медленнее традиционной.
; Плохое поведение на ненадёжных соединениях: Если связь часто теряется (из-за потери несущей или перегрузки канала), обычную страницу можно как минимум перезагрузить. AJAX-страницу (например, с «бесконечной» прокруткой) пользователю приходится перезагружать с самого начала и искать, где он остановился. Параллельная работа — особенность AJAX — здесь сказывается негативно, деля и без того узкий канал на множество маленьких соединений, и велика вероятность, что какое-то из них будет разорвано. Проблема частично решается API истории.
; Риск [[подделка межсайтовых запросов|фабрикации запросов другими сайтами]] : Результат работы AJAX-запроса может являться [[JavaScript]]-кодом (в частности, [[JSON]]). [[XMLHttpRequest]] действует только [[Same Domain Policy|в пределах одного домена]], а тег <code>&lt;script&gt;</code> — нет. Если написать
<source lang="html">
 <script type="text/javascript" src="http://example.org/inbox.php"></script>
</source>
: то в [[HTML]] будет вставлена папка входящих сообщений того пользователя, который на этом компьютере авторизован на <code>example.org</code>. Для защиты используют [[HTTP#POST|POST]]-запрос. Но [[HTTP#GET|GET]] считается [[идемпотентность|идемпотентным]] и потому кэшируется, POST — нет, поэтому [[Google (поисковая система)|Google]] вставляет в начало ответа [[бесконечный цикл]]: AJAX может делать с ответом что угодно, в том числе убрать цикл, а тэг <code>&lt;script&gt;</code> подключает скрипт как есть и зацикливается.

== Альтернативные технологии ==
В [[Хронология|хронологическом]] порядке:
* [[Java-апплет]]ы, позднее технология [[JavaFX]];
* Технология [[Silverlight]] корпорации [[Microsoft]];
* Протокол [[WebSocket]].

=== Adobe Flash ===
Стек технологий [[Adobe Flash|Flash]] (ранее — Macromedia Flash) в виде [[ActionScript]] 3, [[Adobe Flex]] и Flash Remoting составляет технологическую основу [[Rich Internet Applications|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
|автор = Дейв Крейн, Бер Бибо, Джордон Сонневельд.
|isbn = 978-5-8459-1327-2
|год = 2007
|место = М.
|издательство = [[Вильямс (издательство)|Вильямс]]
}}
* {{книга
|автор = Дэниел Вулстон.
|заглавие = 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
}}

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

{{JavaScript}}

[[Категория:AJAX| ]]