AJAX

Материал из Википедии — свободной энциклопедии
Версия от 14:11, 15 ноября 2025; imported>Alex NB OT (унификация языковых шаблонов)
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)
Перейти к навигации Перейти к поиску

Ошибка скрипта: Модуля «hatnote» не существует.{{#if: | }} Ошибка скрипта: Модуля «Unsubst» не существует. Шаблон:Язык программирования

AJAX, Ajax ({{#if: | ˈeɪdʒæks | ˈeɪdʒæks }}, от англ. Шаблон:Lang-en2 — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. По-русски иногда произносится транслитом как «аякс». У аббревиатуры AJAX нет устоявшегося аналога на кириллице.

История

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

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

Технология

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

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

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

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

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

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

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

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

  1. Пользователь нажимает ссылочный элемент веб-страницы;
  2. Опционально: связанный с элементом скрипт (на языке JavaScript) определяет информацию для обновления страницы;
  3. Браузер формирует и отправляет обычный запрос серверу;
  4. В ответ сервер генерирует новую веб-страницу и отправляет её браузеру;
  5. Браузер переходит на новую веб-страницу.

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

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

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

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

Недостатки

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

<source lang="html"> 

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

</source>

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

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

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

Adobe Flash

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

Примечания

Шаблон:Примечания

Литература

Ссылки

Шаблон:Родственный проект{{#if:||{{#if:AJAX||}}}}

Шаблон:JavaScript

Источник — https://camokathomelab.servebeer.com/mediawiki/index.php?title=AJAX&oldid=52779