AJAX

Материал из Национальной библиотеки им. Н. Э. Баумана
Последнее изменение этой страницы: 03:30, 1 ноября 2018.
Asynchronous JavaScript and XML
AJAX logo by gengns.svg
Logo of AJAX
Первый   появившийся 2005
Расширение файла .js
Формат файлов JavaScript
Под влиянием
JavaScript and XML

AJAX (англ. Asynchronous Javascript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором веб-страница, не перезагружаясь, сама догружает нужные пользователю данные.

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

AJAX является синтезом различных технологий:

  • HTML для создания web-форм и указания полей для использования в вашем приложении.
  • JavaScript-код основной код, выполняющий AJAX-приложения и обеспечивающий взаимодействие с серверными приложениями.
  • DHTML, Dynamic HTML для помощи в динамическом обновлении формы.
  • DOM (от англ. Document Object Model — "объектная модель документов") для работы и со структурой HTML, и, в некоторых случаях, с XML, полученным от сервера.

Самым примечательным из приложений, использующих объект 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 Corporation нельзя считать скромным началом, но XHR определенно переросла рамки исходного продукта. С тех времен XHR был интегрирован во все основные web-браузеры и даже был признана W3C в качестве стандарта[Источник 2].

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

Рисунок 1 – Сравнение традиционной модели веб-приложения с моделью AJAX приложений

Рисунок 2 – Схема синхронного взаимодействия традиционного веб-приложения (наверху) в сравнении с асинхронной схемой AJAX приложения (внизу)

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

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

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

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

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

Живой поиск

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

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

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

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

  1. Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100 мс (примерно).
  2. Создается скрытый DIV и заполняется ответом сервера:
    • Текущий результат подсвечен, можно перемещаться и выбирать;
    • При нажатии правой стрелки или при клике — поиск в подрезультатах.
  3. Результаты запросов кешируются, повторных обращений к серверу не происходит.
  4. В Google не только предлагаются варианты, но система тут же инициирует и сам поиск, т.е. не нужно даже нажимать key:Enter.

Сравнение традиционной модели веб-приложения с моделью AJAX приложений, а также схему синхронного взаимодействия традиционного веб-приложения в сравнении с асинхронной схемой AJAX приложения можно увидеть на рисунках 1 и 2 соответственно.

Обычно используются форматы:

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

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

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

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

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

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

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

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

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

Библиотеки

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

XMLHttpRequest

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

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

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

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

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

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

open («тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Возможность создания удобного веб-интерфейса
  • Активное взаимодействие с пользователем
  • Частичная перезагрузка страницы, вместо полной
  • Удобство использования
  • Работа с XML документами

Недостатки

  • Страница не регистрируется браузером в истории посещения
  • Невозможность создания закладки на странице
  • Требуется включенный JavaScript в браузере
  • Проблемы с отображением нестандартных кодировок

Источники

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