AJAX
Возможно, эта статья содержит оригинальное исследование. |
Ajax | |
---|---|
| |
Класс языка | Web Application, HTML, JavaScript, DHTML, Document Object Model, XMLHttpRequest, JSON, XML, XSLT, XHTML, Cascading Style Sheets |
Появился в | 2005 |
Автор | Джесси Джеймс Гарретт[англ.] |
AJAX, Ajax (ˈeɪdʒæks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. По-русски иногда произносится транслитом как «аякс». У аббревиатуры AJAX нет устоявшегося аналога на кириллице.
История
[править | править код]Впервые термин AJAX был публично использован 18 февраля 2005 года Джесси Джеймсом Гарреттом[англ.] в своей статье «Новый подход к веб-приложениям»[1] — так он назвал новый набор технологий, предлагавшийся им клиенту.
Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML-элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.
Технология
[править | править код]AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:
- использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например с использованием XMLHttpRequest (основной объект);
- использование DHTML для динамического изменения содержания страницы;
Действия с интерфейсом преобразуются в операции с элементами DOM (англ. Document Object Model), с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS (англ. Cascading Style Sheets), обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных.
Три из этих четырёх технологий — CSS, DOM и JavaScript — составляют DHTML (англ. Dynamic HTML). По мнению некоторых авторов[4], средства DHTML, появившиеся в 1997 году, подавали большие надежды, но так и не оправдали их.
В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или XML.
Сравнение стандартного подхода и AJAX
[править | править код]В классической модели веб-приложения:
- Пользователь нажимает ссылочный элемент веб-страницы;
- Опционально: связанный с элементом скрипт (на языке JavaScript) определяет информацию для обновления страницы;
- Браузер формирует и отправляет обычный запрос серверу;
- В ответ сервер генерирует новую веб-страницу и отправляет её браузеру;
- Браузер переходит на новую веб-страницу.
При использовании AJAX:
- Пользователь нажимает ссылочный элемент веб-страницы;
- Связанный с элементом скрипт (с XMLHttpRequest- или DHTML-инструкциями) определяет информацию для модификации страницы;
- Браузер формирует и отправляет небольшой запрос серверу;
- В ответ сервер генерирует модифицированный элемент страницы и отправляет его браузеру;
- Скрипт модифицирует страницу без полной перезагрузки.
Преимущества
[править | править код]- Экономия трафика, уменьшение нагрузки на сервер
- При правильной реализации 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).
Примечания
[править | править код]- ↑ Jesse James Garrett. Ajax: A New Approach to Web Applications . Adaptive Path (18 февраля 2005). Дата обращения: 1 марта 2021. Архивировано 12 февраля 2021 года.
- ↑ Remote scripting with IFRAME Архивная копия от 26 июня 2014 на Wayback Machine (англ.)
- ↑ JsHttpRequest . Дата обращения: 24 декабря 2006. Архивировано из оригинала 21 октября 2007 года.
- ↑ Дейв Крейн. Ajax в действии. — Вильямс, 2008. — 640 с. — ISBN 9785845910349. Архивировано 12 декабря 2017 года.
- ↑ History/State APIs . Дата обращения: 15 октября 2012. Архивировано 19 октября 2011 года.
- ↑ AJAX и русские буквы - проблема с кодировкой. Дата обращения: 15 августа 2016. Архивировано из оригинала 25 августа 2016 года.
Литература
[править | править код]- Бретт Маклафин. Изучаем 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.
Ссылки
[править | править код]- AJAX: С чего начать — статья на developer.mozilla.org, в которой доходчиво объясняется, как написать первое AJAX-приложение.
- Ajax в деталях — цикл статей на сайте javascript.ru
- Освоение Ajax — цикл статей на сайте IBM, посвящённый изучению AJAX.
- Перевод статьи «Новый подход к веб-приложениям»
- Модель Ajax
- Основы работы с Ajax