AJAX

Материал из Национальной библиотеки им. Н. Э. Баумана
Последнее изменение этой страницы: 17:30, 7 июня 2017.
Ajax
AJAX logo by gengns.svg
Парадигма Web Application, HTML, JavaScript, DHTML, Domain Object Model, XMLHttpRequest, JSON, XML, XSLT, XHTML, Cascading Style Sheets
Спроектировано Jesse James Garrett
Первый   появившийся 2005

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

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

  • стандартное представление с помощью XHTML и CSS;
  • динамическое отображение и интерактивность благодаря DOM;
  • обмен и манипулирование данными с помощью XML и XSLT;
  • асинхронное получение данных с помощью XMLHttpRequest;
  • использование JavaScript для интеграции вышеперечисленных технологий.

Основная идея: HTML и CSS представляют данные и стиль; DOM и связанные с ней методы позволяют обновлять страницу в режиме реального времени, XHR отвечает за общение с сервером, а JavaScript управляет процессом в целом.

AJAX обеспечивает динамичность и асинхронность web-разработок при отсутствии необходимости обновления страниц.

Это технология-конгломерат, которая обеспечивает динамическое и асинхронное поведение, где исключается обновление страниц. Посредством AJAX пользователь может взаимодействовать с web-страницами, подобно работе с клиентами с более богатыми возможностями.

В настоящее время многие говорят о AJAX. Технология, следующая за AJAX, вряд ли является новшеством, однако недавно стали появляться некоторые мощные новые приложения, использующие объект XMLHttpRequest, они вдохнули новую жизнь в концепцию обновления образа клиентской части.

Самым примечательным из этих новых приложений является Google Maps. Пользуясь им, можно находить определенную местность на карте планеты, затем переходить к более мелким объектам, прокручивать, перетягивать карту без необходимости обновления страницы[Источник 1].


История AJAX

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

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

История технологии AJAX, которая, казалось бы, мгновенно завоевала огромную популярность, похожа на историю других прорывных технологий. Хотя кажется, что эта технология появилась из ниоткуда, на самом деле для этого потребовалось определенное время. Несколько лет исследований в области Web-разработки привели к созданию инструментов и подходов, которые распространялись под «брендом» AJAX. Начиная с эры DHTML в период первоначального Интернет-бума и на протяжении "темных" лет после массового краха доткомов разработчики по всему миру открывали для себя неожиданные возможности JavaScript, открывающие новые пути для разработки Web-приложений.

Первый и самый важный компонент технологии AJAX – это XMLHttpRequest (XHR) API. XHR – это JavaScript API для передачи данных в виде сообщений между Web-браузером и Web-сервером. Этот API позволяет использовать HTTP POST-запросы (для передачи данных на сервер) и GET-запросы (для загрузки данных с сервера в фоновом режиме). XHR – это "ядро" большинства AJAX-вызовов и одна из важнейших технологий в современном Web-программировании. Наконец, XHR - это лучший подарок Интернет-сообществу, сделанный командой Microsoft Internet Explorer.

Это действительно так. XHR впервые появился в пятой версии Internet Explorer в 2000 г. Изначально написанный Алексом Хопманном (Alex Hopmann) в виде элемента управления Microsoft ActiveX, XHR был создан для использования в Microsoft Outlook Web Access и предназначался для "сглаживания" взаимодействия между передовым для того времени пользовательским интерфейсом и Microsoft Exchange Server.

Хотя пакет от Microsoft нельзя считать скромным началом, но XHR определенно переросл рамки исходного продукта. С тех времен XHR был интегрирован во все основные Web-браузеры и даже был признана W3C в качестве стандарта[Источник 2].

https://www.ibm.com/developerworks/ru/library/wa-aj-ajaxhistory/

Принцип работы

Элементы интерфейса

  • В первую очередь AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.

Сейчас – в порядке вещей, что такие действия на сайтах осуществляются без перезагрузки страницы.

Динамическая подгрузка данных

  • Например, дерево, которое при раскрытии узла запрашивает данные у сервера.

Живой поиск

  • Живой поиск – классический пример использования AJAX, взятый на вооружение современными поисковыми системами.

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

Код, который это обеспечивает подобного рода возможности, работает следующим образом:

1. Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100 мс (примерно).

2. Создается скрытый DIV и заполняется ответом сервера: - Текущий результат подсвечен, можно перемещаться и выбирать - При нажатии правой стрелки или при клике -- поиск в подрезультатах

3. Результаты запросов кешируются, повторных обращений к серверу не происходит.

4. В Google не только предлагаются варианты, но система тут же инициирует и сам поиск, т.е. не нужно даже нажимать `key:Enter`.

Технически, с помощью AJAX можно обмениваться любыми данными с сервером. Обычно используются форматы:

  • JSON – для отправки и получения структурированных данных, объектов.
  • XML – если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.
  • HTML/текст – можно и просто загрузить с сервера код HTML или текст для показа на странице.
  • Бинарные данные, файлы – гораздо реже, в современных браузерах есть удобные средства для них.

Обмен данными

Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.

Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.

Не рекомендуется делать GET-запросы к серверу с большими объемами данных. Для этого существует POST-запрос.

Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.

Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.

Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.

В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает[Источник 3].

Библиотеки

Одним из ключевых факторов, способствовавших развитию Web-разработки на основе AJAX, стало появление и внедрение нескольких высокофункциональных JS-библиотек. За исключением опытных JS-разработчиков мало кто в действительности понимал, как работают технологии, формирующие AJAX. Поэтому, хотя многие аспекты интерактивности и анимации внутри Web-браузера в эпоху DHTML были доведены почти до предела возможного, сложность использования AJAX привела к большому разрыву между потребностями в Web-сайтах с AJAX-возможностями и количеством людей, способных создавать такие интерфейсы с нуля. Библиотеки, подобные Prototype, Dojo и jQuery, помогли преодолеть этот разрыв, предоставив готовую функциональность, которая позволила реализовать анимацию и интерактивность, преодолеть различия между Web-браузерами и сгладить недостатки базового JavaScript API.

Методы объекта XMLHttpRequest

Хотя помимо XHR существуют и другие подходы для получения данных с сервера, именно XHR остается "ядром" большинства AJAX-приложений. Взаимодействие на основе XHR строится на двух компонентах: запрос и ответ. Ниже будут рассмотрены обе эти составляющие.

Названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.

abort() — отмена текущего запроса к серверу.


getAllResponseHeaders() — получить все заголовки ответа от сервера.


getResponseHeader(«имя_заголовка») — получить указаный заголовок.


open

(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — </code>true</code>). \

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


send(«содержимое») — послать HTTP запрос на сервер и получить ответ.


setRequestHeader(«имя_заголовка»,«значение») — установить значения заголовка запроса.

Свойства объекта XMLHttpRequest

onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.


readyState
— число, обозначающее статус объекта.


responseText 

— представление ответа сервера в виде обычного текста (строки).


responseXML 

— объект документа, совместимый с DOM, полученного от сервера.


status 

— состояние ответа от сервера.


statusText 

— текстовое представление состояния ответа от сервера.


Следует подробнее расммотреть свойство readyState:

  • 0 — Объект не инициализирован.
  • 1 — Объект загружает данные.
  • 2 — Объект загрузил свои данные.
  • 3 — Объект не полностью загружен, но может взаимодействовать с пользователем.
  • 4 — Объект полностью инициализирован; получен ответ от сервера.

Именно опираясь на состояние готовности объекта можно представить посетителю информацию о том, на какой стадии находится процесс обмена данными с сервером и, возможно, оповестить его об этом визуально[Источник 4].

Раскрытие технологий

  • Что такое AJAX - раскрытие технологии.
  • Взаимодействие клиента и сервера.
  • Примеры AJAX на современных сайтах.

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

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

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

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

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

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

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

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

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

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

Недостатки

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

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

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

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

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

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

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

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

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

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

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

Источники

  1. AJAX // Википедия. Дата обновления: 19.03.2017. URL:https://ru.wikipedia.org/wiki/AJAX (Дата обращения: 20.05.2017).
  2. История AJAX // IBM. Дата обновления: 20.03.2017. URL: https://www.ibm.com/developerworks/ru/library/wa-aj-ajaxhistory/ (Дата обращения: 20.05.2017).
  3. Принцип работы AJAX // Хабрахабр. Дата обновления: 12.02.2016. URL:https://habrahabr.ru/post/14246/ (Дата обращения: 20.05.2017).
  4. AJAX TECHNOLOGY // Викиучебник. URL: https://ru.wikibooks.org/wiki/AJAX (Дата обращения: 20.05.2017).