Русская Википедия:AJAX

AJAX, Ajax (Шаблон:IPA, от Шаблон:Lang-en — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. По-русски иногда произносится транслитом как «аякс». У аббревиатуры AJAX нет устоявшегося аналога на кириллице.

История

Впервые термин AJAX был публично использован 18 февраля 2005 года Шаблон:Нп5 в своей статье «Новый подход к веб-приложениям»^[1] — так он назвал новый набор технологий, предлагавшийся им клиенту.

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

Технология

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

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

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

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

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

Три из этих четырёх технологий — CSS, DOM и JavaScript — составляют DHTML (Шаблон:Lang-en). По мнению некоторых авторов^[4], средства DHTML, появившиеся в 1997 году, подавали большие надежды, но так и не оправдали их.

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

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

Файл:Ajax-model-ru.svg

Модель классических приложений для сети (слева) в сравнении с применением AJAX (справа).

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

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

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

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

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

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

Недостатки

Отсутствие интеграции со стандартными инструментами браузера: URL не меняется, потому не работает кнопка «Назад», невозможно сохранить закладку. Проблему можно успешно решить с помощью History.pushState^[5].
Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XMLHttpRequest): Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайтаШаблон:Уточнить.
Старые методы учёта статистики сайтов становятся неактуальными: Многие сервисы статистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.
Усложнение проекта: Перераспределяется логика обработки данных — происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и типов. Конечный эффект технологии может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также риском снижения доступности сервиса для конечных пользователей.
Требуется включённый JavaScript в браузере: Он может быть выключен из соображений безопасности. Кроме того, AJAX-страницы труднодоступны неполнофункциональным браузерам, роботам и веб-архивам.
Проблемы с отображением нестандартных кодировок в некоторых сценариях ajax-скриптов: Проблемам AJAX и кириллицы посвящено множество обсуждений в Интернете^[6].
Низкая скорость при грубом программировании: Несмотря на то, что AJAX изначально предназначен именно для повышения скорости, он может сыграть злую шутку: когда AJAX-запросов на одной странице много и, например, по каждому щелчку подгружается список, AJAX-страница становится даже медленнее традиционной.
Плохое поведение на ненадёжных соединениях: Если связь часто теряется (из-за потери несущей или перегрузки канала), обычную страницу можно как минимум перезагрузить. AJAX-страницу (например, с «бесконечной» прокруткой) пользователю приходится перезагружать с самого начала и искать, где он остановился. Параллельная работа — особенность AJAX — здесь сказывается негативно, деля и без того узкий канал на множество маленьких соединений, и велика вероятность, что какое-то из них будет разорвано. Проблема частично решается API истории.
Риск фабрикации запросов другими сайтами: Результат работы AJAX-запроса может являться JavaScript-кодом (в частности, JSON). XMLHttpRequest действует только в пределах одного домена, а тег <script> — нет. Если написать

 <script type="text/javascript" src="http://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: С чего начать — статья на developer.mozilla.org, в которой доходчиво объясняется, как написать первое AJAX-приложение.
Ajax в деталях — цикл статей на сайте javascript.ru
Освоение Ajax — цикл статей на сайте IBM, посвящённый изучению AJAX.
Перевод статьи «Новый подход к веб-приложениям»
Модель Ajax
Основы работы с Ajax

Шаблон:JavaScript

[1] Шаблон:Cite web

[2] Remote scripting with IFRAME Шаблон:Wayback Шаблон:Ref-en

[JsHttpRequest-3] Шаблон:Cite web

[4] Шаблон:Книга

[5] Шаблон:Cite web

[6] Шаблон:Cite web

[1]

[2]

[3]

[4]

[5]

[6]

Партнерские ресурсы
Криптовалюты	Обмен криптовалют - www.bestchange.ru Криптовалютная биржа CoinEx Криптовалютная биржа Binance HIVE OS - операционная система для майнинга e4pool - Мультивалютный пул для майнинга.
Магазины	AliExpress — глобальная виртуальная (в Интернете) торговая площадка, предоставляющая возможность покупать товары производителей из КНР; computeruniverse.net - Интернет-магазин компьютеров(Промо код 5 Евро на первую покупку:FWWC3ZKQ);
Хостинг	DigitalOcean - американский провайдер облачных инфраструктур, с главным офисом в Нью-Йорке и с центрами обработки данных по всему миру;
Разное	Викиум - Онлайн-тренажер для мозга Like Центр - Центр поддержки и развития предпринимательства. Gamersbay - лучший магазин по бустингу для World of Warcraft. Ноотропы OmniMind N°1 - Усиливает мозговую активность. Повышает мотивацию. Улучшает память. Санкт-Петербургская школа телевидения - это федеральная сеть образовательных центров, которая имеет филиалы в 37 городах России. Lingualeo.com — интерактивный онлайн-сервис для изучения и практики английского языка в увлекательной игровой форме. Junyschool (Джунискул) – международная школа программирования и дизайна для детей и подростков от 5 до 17 лет, где ученики осваивают компьютерную грамотность, развивают алгоритмическое и креативное мышление, изучают основы программирования и компьютерной графики, создают собственные проекты: игры, сайты, программы, приложения, анимации, 3D-модели, монтируют видео. Умназия - Интерактивные онлайн-курсы и тренажеры для развития мышления детей 6-13 лет SkillBox - это один из лидеров российского рынка онлайн-образования. Среди партнеров Skillbox ведущий разработчик сервисного дизайна AIC, медиа-компания Yoola, первое и самое крупное русскоязычное аналитическое агентство Tagline, онлайн-школа дизайна и иллюстрации Bang! Bang! Education, оператор PR-рынка PACO, студия рисования Draw&Go, агентство performance-маркетинга Ingate, scrum-студия Sibirix, имидж-лаборатория Персона. «Нетология» — это университет по подготовке и дополнительному обучению специалистов в области интернет-маркетинга, управления проектами и продуктами, дизайна, Data Science и разработки. В рамках Нетологии студенты получают ценные теоретические знания от лучших экспертов Рунета, выполняют практические задания на отработку полученных навыков, общаются с экспертами и единомышленниками. Познакомиться со всеми продуктами подробнее можно на сайте https://netology.ru, линейка курсов и профессий постоянно обновляется. StudyBay Brazil – это онлайн биржа для португалоговорящих студентов и авторов! Студент получает уникальную работу любого уровня сложности и больше свободного времени, в то время как у автора появляется дополнительный заработок и бесценный опыт. Автор24 — самая большая в России площадка по написанию учебных работ: контрольные и курсовые работы, дипломы, рефераты, решение задач, отчеты по практике, а так же любой другой вид работы. Сервис сотрудничает с более 70 000 авторов. Более 1 000 000 работ уже выполнено. StudyBay – это онлайн биржа для англоязычных студентов и авторов! Студент получает уникальную работу любого уровня сложности и больше свободного времени, в то время как у автора появляется дополнительный заработок и бесценный опыт.

Русская Википедия:AJAX

Содержание