Что такое AJAX?

АЯКС

Декабрь 25, 2022 Мерион Нетворкс

6 минут

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

История AJAX

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

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

В 1996 году Microsoft представила тег iframe для Internet Explorer, который позволял браузеру асинхронно извлекать данные в фоновом режиме. Это был шаг в верном направлении на пути к современным веб-приложения.

В 2004 году Google добавила в Gmail функцию, позволяющую получать данные в фоновом режиме, а в 2005 году они сделали то же самое и для Google Maps.

Технологии Google и Microsoft позволяли разработчикам получать данные с веб-сервера с помощью JavaScript без необходимости перезагружать страницу. В 2005 году Джесси Джеймсон Гарретт в своей статье (о том, как Google добились такого результата) назвал эту технологию AJAX. Эта технология быстро стала одним из самых популярных способов создания веб-приложений.

А теперь, когда вы узнали немного из истории AJAX, давайте посмотрим, как это работает.

Как работает AJAX?

Что делает работу AJAX возможной, так это встроенный в веб-браузер объект XMLHttpRequests (XHR). Этот объект поддерживают все современные браузеры, включая:

Chrome
Firefox
IE7+
Safari
Opera

Большинство библиотек JavaScript, которые используют AJAX, помещают этот объект в пользовательский код для того, чтобы упростить его использование разработчиками, но мы рассмотрим, как AJAX работает в обычном JavaScript.

Первый шаг – создать переменную, которая будет создавать для вас экземпляр объекта XMLHttpReaquests в JavaScript. Ниже приведен пример:

const request = new XMLHttpRequest();

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

Как можно понять из самого термина, запросы AJAX выполняются асинхронно. Это значит, что код JavaScript продолжает работать после отправки запроса и не ждет ответа. Прикрепив получатель запросов, мы можем перехватить ответ, когда он будет готов. Сделаем мы это вот так:

function requestListener() {
    console.log(this.responseText);
}

request.addEventListener("load", requestListener);

Выше у нас есть функция, которая выводит ответ на консоль JavaScript, которую мы можем получить из атрибута responseText объекта XMLHttpRequests. Затем мы присоединяем эту функцию к событию load нашего запроса.

Следующий шаг – используем этот объект для отправки запроса к серверу с помощью метода open объекта XMLHttpRequests. Метод open принимает два параметра. Первый параметр – это используемый метод запроса. Ниже приведены несколько наиболее распространенных методов:

GET: этот метод используется для извлечения данных и является наиболее распространенным.
POST: этот метод отправляет данные запрошенному ресурсу и чаще всего используется для создания новых записей или для входа в систему.
PUT: этот метод заменяет текущие представления данных измененными, которые были отправлены в запросе.
PATCH: этот метод обычно используется для обновления части данных в запрошенном ресурсе.
DELETE: этот метод используется для удаления определенного ресурса.

Второй параметр, который передается методу open, - это запрашиваемый ресурс. Мы будем использовать страницу с веб-сайта example.org и использовать запрос GET для простого получения данных. Вот так это будет выглядеть:

request.open("GET", "http://www.example.org/example.txt");

Последний шаг – фактическая отправка запроса на удаленный ресурс с помощью метода send объекта XMLHttpRequests. Ниже приведен пример:

request.send();

Если мы используем метод POST, PUT или какой-либо другой метод, который обновляет ресурс, то этот метод мы вызываем с параметром, содержащем данные, которые мы отправляем:

request.send(OUR_DATA_VARIABLE)

В нашем случае мы только извлекаем данные, поэтому, как только мы выполним этот код, на консоли нашего веб-браузера выведется содержимое http://example.org/example.txt.

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

Для чего нужен AJAX?

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

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

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

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

Индикатор загрузки нужен только для отвода глаз, пока запрос выполняется, независимо от того, ввели ли вы верные учетные данные или нет. Если ваши учетные данные верны, то ваша домашняя страница загружается, скорее всего, из другого запроса AJAX.

Большинство запросов AJAX в JavaScript не загружают целые веб-страницы, как в нашем примере. Данные отправляются и извлекаются в формате JSON, для представления данных используется текстовый формат, а для форматирования этих данных в формате HTML и их печати на странице используется дополнительный код JavaScript. Например, данные, которые отправляются для входа на веб-сайт, в формате JSON будут выглядеть так:

{ username: "MyUserName", password: "MyPassword" }

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