Разработка программного обеспечения совершенствуется вместе с IT-технологиями. Сейчас активно внедряются абсолютно новые инструменты для веб-программирования. Google указывает на то, что это связано с их широким применением и популярностью «карманных» гаджетов среди пользователей.
Одной из наиболее успешных технологий, используемых в Интернет-программирования, являeтся AJAX. Google указывает на то, что она позволяет создавать интерактивные пользовательские веб-приложения и сайты за счет фонового обмена информацией браузера с работающим сервером. Далее с этим «инструментом» разработки предстоит познакомиться поближе. Необходимо выяснить его ключевые особенности, сильные и слабые стороны, области применения. Также будут приведены разнообразные примеры the AJAX в JavaScript. Эта информация поможет быстрее разобраться с соответствующей концепцией. Предложенные сведения пригодятся всем веб-разработчикам.
Определение
The AJAX – это аббревиатура Asynchronous JavaScript and XML. Google указывает на то, что на самом деле рассматриваемый «инструмент» не является новой технологией. Согласно информации из Google, он представляет собой своеобразный синтез возможностей XML и JS.
The AJAX – подход к созданию пользовательских интерфейсов для веб-приложений. Базируется на «фоновом» обмене информацией браузеров с веб-серверами. В конечном итоге при реализации соответствующей концепции и обновлении данных сайт не перезагружается полностью. Этот подход к разработке появился, согласно данным из Google и других поисковиков, в 2005 году благодаря Джесси Джеймсу Гарретту. Google указывает на то, что таким термином он описал новый набор технологий.
При применении the AJAX обновлять веб-страницу каждый раз при корректировке информации на ней не придется. Это связано с тем, что обновления относятся только к конкретной части проекта. Google указывает на то, что рассматриваемая технология делает работу в Интернете удобной и экономичней в плане расхода ресурсов и трафика.
Термины и определения
Чтобы лучше разбираться в рассматриваемых технологиях, необходимо запомнить несколько ключевых терминов. Они помогут быстрее понять, что собой представляет the AJAX:
- JavaScript (JS) – язык, на котором пишутся приложения, а также составляются запросы для сервера и отправляются на него. Ответы от серверной части проекта тоже поступают за счет JS. Сюда же можно отнести обновление сайта и разбор полученного клиентом сообщения.
- XML – формат, используемый для хранения и передачи информации. Его все чаще заменяет JSON.
- Асинхронность – ситуация, при которой процесс (действие) выполняется в фоновом режиме, а не в основном потоке. В соответствующем случае пользователь сможет дальше комфортно взаимодействовать с сайтом или веб-сервисом, пока та или иная операция находится на стадии выполнения.
Новичкам этого будет достаточно для того, чтобы понять определение the AJAX. Теперь можно более подробно рассмотреть принципы его функционирования, а также ключевые особенности.
Синхронный запрос
Чтобы лучше понимать изучаемую технологию, необходимо разобраться в принципах обработки сервером получаемых запросов. Существует синхронный вариант. Это обычные запросы. Для получения и формирования сайта они работают так:
- Сначала пользователь в форме обратной связи щелкает на кнопку «Отправить».
- Браузер «замечает», что по кнопке требуется отправить запрос на серверную часть веб-проекта. Он формирует из запроса пакеты и направляет их серверу.
- Сервер получает запрос, а затем обрабатывает его и выдает ответ. Им послужит новый веб-сайт.
- Браузер получает ответ и загружает новую страницу «с нуля». На ней предусматриваются все необходимые пользователю сведения, но присутствует «эффект вспышки». The Google описывает его как нахождение на одном сайте, на котором в определенный момент белеет экран, а затем клиент оказывается на новой странице.
Синхронность здесь выражается отправкой данных большой кучей на сервер, после чего весь веб-сайт также «массово» возвращается клиенту.
Выше можно увидеть наглядный пример синхронности в клиент-серверных моделях. Именно такой вариант функционирования поддерживают всевозможные формы обратной связи: пользователь нажимает на кнопку, а браузер для демонстрации новых данных начинает загружать новую страницу. Но синхронный подход – это всего лишь одна из известных концепций. The Google выделяет еще один вариант.
Асинхронные запросы
Асинхронные запросы – это и есть the AJAX технология. Она работает несколько иначе. Вместо того, чтобы синхронно загружать новую информацию с новой страницей, the AJAX использует обращение к серверу за недостающими данными, после чего добавляет их на веб-сайт. Перезагрузка всей страницы не потребуется.
На примере формы обратной связи Google описывает асинхронные запросы так:
- Пользователь заполняет форму и нажимает на кнопку «Отправить».
- Браузер запускает скрипт, который был заранее привязан к кнопке.
- Соответствующий скрипт отправляет запрос на сервер, а затем получает в качестве ответа новую порцию данных от сервера. Сайт не перезагружается. Все операции осуществляются внутри скрипта.
- Скрипт считывает ответ от серверной части и внедряет новую информацию на веб-страницу.
- Сайт не перезагружается, посетитель остается там же, где и был, но только с новыми данными.
Выше – наглядный пример работы рассматриваемой технологии. С его помощью можно быстро понять разницу в синхронных и асинхронных запросах.
Примерами работы the AJAX на сайте могут послужить следующие операции:
- получение списка новых сообщений в чате, не перезагружая весь чат;
- загрузка новых товаров в интернет-магазин;
- получение новых рекламных баннеров;
- сворачивание видео на сервисе «Ютуб» в маленький плеер в углу;
- демонстрация статуса заказа службами доставки.
Ленты в социальных сетях – это тоже результат функционирования асинхронных запросов. Когда пользователь пролистывает их до конца, сервер получает новый the AJAX-запрос, после чего загружает очередной «блок» новостей и постов.
Преимущества и недостатки
Перед тем как более детально изучать рассматриваемую технологию, стоит сначала разобраться в ее преимуществах и недостатках. Это поможет понять, стоит ли внедрять асинхронные запросы на тот или иной веб-портал.
К сильным сторонам the AJAX Google относит:
- Экономию трафика и уменьшение общей нагрузки на серверную часть проекта. При грамотной реализации the AJAX в несколько раз снижает нагрузку на сервер. Все страницы сайта обычно генерируются по одному шаблону, включая неизменные компоненты («подвалы», «шапки», «навигационные панели»). Для их генерации необходимо обращаться к различным файлам, время на обработку скриптов (иногда – на обращение к запросам базы данных). Все эти операции удастся «опустить», если заменить полную загрузку сайта генерацией и передачей лишь определенной ее части.
- Ускорение реакции со стороны интерфейса. Google связывает это с тем, что загрузка части веб-сервиса всегда быстрее, чем полноценное обновление. Пользователь практически моментально сможет увидеть результат своих действий, причем без характерного мерцания сайта.
- Поддержку возможностей для интерактивной обработки. Пример – в процессе ввода поискового запроса в Google на экране выводится подсказка с возможными вариантами его продолжения. На большинстве веб-страниц в процессе регистрации клиент вводит имя и сразу же видит, доступно ли оно для использования или нет. The AJAX удобно использовать при написании чатов, административных панелей, а также иных инструментов, которые отвечают за вывод меняющихся время от времени данных.
- Отсутствие остановки мультимедиа. Google указывает на еще одно преимущество the AJAX JS – веб-портал не будет перезагружаться при применении технологии, плеер продолжит свою работу. Именно поэтому упомянутый инструмент представляет ценность для аудио- и видеохостингов.
Google отмечает, что у изучаемой технологии существуют не только преимущества, но и недостатки:
- Отсутствие интеграции со стандартными браузерными инструментами.
- Недоступность поисковикам динамически загружаемого содержимого.
- Усложнение всего проекта. Этот недостаток Google характеризует перераспределением логики обработки информации: осуществляется выделение и частичный перенос на сторону клиента процессов первичного форматирования информации. Это делает контроль за целостностью форматов и типов более сложным.
- Необходимость включения в браузере JavaScript. Из соображений безопасности, как говорит Google, JS может быть отключен. Также стоит учитывать, что the AJAX-страницы труднодоступны неполнофункциональным браузерам, веб-архивам, а также роботам.
- Проблемы с отображением нестандартных кодировок. Этот недостаток встречается лишь в некоторых сценариях the AJAX-скриптов.
- Низкая скорость при «грубом» программировании. Если рассматриваемого типа запросов на одном сайте много, и по каждому клику подгружается список, страница становится медленнее «традиционной».
- Плохая работа на ненадежных соединениях. Если связь часто теряется, обычную веб-страницу можно просто перезагрузить. Google отмечает, что в случае с the AJAX-сайтом пользователю нужно будет перезагружать все с самого начала, а затем искать, где он остановился. Параллельная работа в соответствующей ситуации – это минус, а не плюс. API истории помогут устранить данный недостаток.
- Риски, связанные с фабрикацией запросов другими страницами. Google указывает на то, что результат работы рассматриваемой технологии может выступать в качестве JS-кода (обычно – JSON). XMLHttpRequest действует только в пределах одного домена, а тег script – нет.
The AJAX запрос, несмотря на ряд недостатков и недочетов, все равно остается популярной и удобной технологией.
Знакомство с XMLHttpRequest
С основными особенностями изучаемой технологии разобраться удалось. Теперь можно написать с ее использованием несколько команд. Google указывает на то, что перед началом разработки необходимо изучить объект XMLHttpRequest. Это ключевой элемент будущих запросов.
XMLHttpRequest (XHR) – это объект, встроенный в браузер. Он необходим для отправки HTTP-запросов на серверную сторону и дальнейшего получения информации в ответ. Этот компонент поддерживается всеми современными браузерами.
Google указывает, что у XHR поддерживаются следующие методы:
Abort()Отмена текущего запросаgetAllResponseHeaders()Возврат полного списка HTTP-заголовков в виде строчкиgetAllResponseHeader(имя)Возраст значения указанного заголовкаOpen (метод, URL, async, имя_пользователя, пароль)Отвечает за определение метода, URL и других опциональных параметров запроса. Async определяет, происходит ли работа в асинхронном режиме.Send(метод)Отправка запроса на имеющийся серверsetRequestHeader (label, value)Добавление к запросу HTTP-заголовка
The XML также поддерживает у своего класса следующие свойства:
OnreadystatechangeОбработчик события, которое происходит при каждой смене состояния объекта.ReadyStateОтвечает за возврат текущего состояния объекта: 0 – не инициализирован, 1 – открыт, 2 – отправка информации, 3 – получение данных, 4 – информация загружена.responseTextТекст ответа на запрос.responseXMLТекст ответа на запрос, представленный XML. Позже его можно распарсить при помощи DOM.StatusВозврат HTTP-статуса в виде числа (404 – «Not Found», 200 – «OK» и так далее).statusTextВозвращение статуса в виде строки. Запись выводится по аналогии с предыдущим вариантом, но без числа.
Теперь можно разобрать несколько примеров работы the AJAX на сервере. Эта информация поможет быстрее освоить рассматриваемую технологию.
Отправка запроса и получение ответа
Перед выполнением the AJAX-связи между клиентом и сервером необходимо создать экземпляр объекта XHR. Для этого используется команда:
Для отправки запроса на сервер, как уверяет Google, необходимо создать экземпляр созданного объекта запроса через метод open():
Файл может иметь любой тип – .xml, .txt и так далее. Допускается также использование файлов скриптов на стороне сервера, которые смогут выполнить разнообразные действия.
Для отправки «команды» на серверную сторону потребуется метод send():
Google говорит о том, что этот метод принимает необязательный параметр the body. С его помощью получается указать request-тело. Такой прием используется в основном для конструкций the HTTP POST. Связано это с тем, что the GET не имеет тела – у него поддерживаются только заголовки.
Метод the GET, согласно Google, используется для того, чтобы отправлять на серверы небольшие объемы данных. The POST подходит для крупных информационных массивов. Пример – данные электронной формы.
В методе the GET, как говорит Google, информация отправляется в виде URL-параметров. В POST данные передаются как часть тела HTTP-запроса. Они не будут отображаться в URL.
Выполнение the AJAX GET-request
Далее предстоит познакомиться с принципами реализации GET и POST. Google указывает на то, что первая команда используется для получения/извлечения некоторых сведений с сервера, не требующих изменений в базе данных. Пример – выборка результатов поиска на основе того или иного термина.
Вот наглядный пример того, как сделать GET-request при помощи рассматриваемой технологии в JavaScript:
Google подчеркивает, что, когда request является асинхронным, метод send() вернется сразу после отправки соответствующей команды на обработку. Это значит, что сначала требуется проверить местоположение ответа в жизненном цикле. Для этого, согласно Google, используется свойство readyState объекта XHR. Это целое число. Оно указывает на состояние HTTP-request. Ниже можно увидеть возможные значения свойства readyState:
Кроме GET есть еще один вариант request – POST. Пример его выполнения также предстоит изучить каждому веб-программисту для понимания принципов работы рассматриваемой технологии.
Выполнение AJAX POST
Google говорит о том, что POST используется в основном для отправки данных форм на веб-сервер. Вот один из таких примеров:
Если не использовать FormData для отправки данных формы при ее отправке на сервер в виде request-строки (request.send), Google говорит о необходимости явной установки заголовка в request. Делается это при помощи метода setRequestHeader:
Теперь в общих чертах понятно, что собой представляет AJAX запрос, а также как его составить. Здесь можно увидеть изученный материал в наглядной форме. А лучше работать с клиент-серверными моделями пользователям помогут дистанционные компьютерные курсы.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<title>AJAX: особенности и применение OTUS</title>
<!-- All in One SEO 4.5.2.1 - aioseo.com -->
<meta name="description" content="Разработка программного обеспечения совершенствуется вместе с IT-технологиями. Сейчас активно внедряются абсолютно новые инструменты для веб-программирования. Google указывает на то, что это связано с их широким применением и популярностью «карманных» гаджетов среди пользователей. Одной из наиболее успешных технологий, используемых в Интернет-программирования, являeтся AJAX. Google указывает на то, что она позволяет создавать интерактивные пользовательские веб-приложения и сайты" />
<meta name="robots" content="max-image-preview:large" />
<link rel="canonical" href="https://otus.ru/journal/ajax-osobennosti-i-primenenie/" />
<meta name="generator" content="All in One SEO (AIOSEO) 4.5.2.1" />
<script type="application/ld+json" class="aioseo-schema">
{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#article","name":"AJAX: \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 OTUS","headline":"AJAX: \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435","author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2024\/02\/oj-1080x720-30.jpg","width":2245,"height":1587},"datePublished":"2024-02-18T13:18:13+00:00","dateModified":"2024-02-18T13:18:16+00:00","inLanguage":"ru-RU","mainEntityOfPage":{"@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#webpage"},"isPartOf":{"@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#webpage"},"articleSection":"\u041f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435"},{"@type":"BreadcrumbList","@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/#listItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/otus.ru\/journal\/","nextItem":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#listItem"},{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#listItem","position":2,"name":"AJAX: \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435","previousItem":"https:\/\/otus.ru\/journal\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/otus.ru\/journal\/#organization","name":"\u041e\u0442\u0443\u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","url":"https:\/\/otus.ru\/journal\/","sameAs":["https:\/\/www.youtube.com\/channel\/UCetgtvy93o3i3CvyGXKFU3g"],"contactPoint":{"@type":"ContactPoint","telephone":"+74999389202","contactType":"Customer Support"}},{"@type":"Person","@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author","url":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/","name":"A. Pavlenko","image":{"@type":"ImageObject","@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d4c499a104d7c2522fa41f89e6819499?s=96&d=mm&r=g","width":96,"height":96,"caption":"A. Pavlenko"}},{"@type":"WebPage","@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#webpage","url":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/","name":"AJAX: \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 OTUS","description":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 IT-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438. \u0421\u0435\u0439\u0447\u0430\u0441 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0432\u043d\u0435\u0434\u0440\u044f\u044e\u0442\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u043e\u0432\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. Google \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0438\u0445 \u0448\u0438\u0440\u043e\u043a\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c\u044e \u00ab\u043a\u0430\u0440\u043c\u0430\u043d\u043d\u044b\u0445\u00bb \u0433\u0430\u0434\u0436\u0435\u0442\u043e\u0432 \u0441\u0440\u0435\u0434\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u044f\u0432\u043b\u044fe\u0442\u0441\u044f AJAX. Google \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0441\u0430\u0439\u0442\u044b","inLanguage":"ru-RU","isPartOf":{"@id":"https:\/\/otus.ru\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#breadcrumblist"},"author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"creator":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2024\/02\/oj-1080x720-30.jpg","@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#mainImage","width":2245,"height":1587},"primaryImageOfPage":{"@id":"https:\/\/otus.ru\/journal\/ajax-osobennosti-i-primenenie\/#mainImage"},"datePublished":"2024-02-18T13:18:13+00:00","dateModified":"2024-02-18T13:18:16+00:00"},{"@type":"WebSite","@id":"https:\/\/otus.ru\/journal\/#website","url":"https:\/\/otus.ru\/journal\/","name":"OTUS JOURNAL","description":"Blog about IT","inLanguage":"ru-RU","publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"}}]}
</script>
<!-- All in One SEO -->
<link rel='dns-prefetch' href='//otus.ru' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='stylesheet' id='wp-block-library-css' href='https://otus.ru/journal/wp-includes/css/dist/block-library/style.min.css?ver=6.4.7' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='wbcr-comments-plus-url-span-css' href='https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/css/url-span.css?ver=2.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='wpel-style-css' href='https://otus.ru/journal/wp-content/plugins/wp-external-links/public/css/wpel.css?ver=2.59' type='text/css' media='all' />
<link rel='stylesheet' id='ez-toc-css' href='https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/css/screen.min.css?ver=2.0.61' type='text/css' media='all' />
<style id='ez-toc-inline-css' type='text/css'>
div#ez-toc-container .ez-toc-title {font-size: 120%;}div#ez-toc-container .ez-toc-title {font-weight: 500;}div#ez-toc-container ul li {font-size: 95%;}div#ez-toc-container nav ul ul li {font-size: 90%;}
.ez-toc-container-direction {direction: ltr;}.ez-toc-counter ul{counter-reset: item ;}.ez-toc-counter nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }.ez-toc-widget-direction {direction: ltr;}.ez-toc-widget-container ul{counter-reset: item ;}.ez-toc-widget-container nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }
</style>
<link rel='stylesheet' id='contentberg-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A400%2C500%2C700%7CPT+Serif%3A400%2C400i%2C600%7CIBM+Plex+Serif%3A500' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-core-css' href='https://otus.ru/journal/wp-content/themes/contentberg/style.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-lightbox-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/lightbox.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/fontawesome/css/font-awesome.min.css?ver=1.8.3' type='text/css' media='all' />
<script type="text/javascript" id="breeze-prefetch-js-extra">
/* <![CDATA[ */
var breeze_prefetch = {"local_url":"https:\/\/otus.ru\/journal","ignore_remote_prefetch":"1","ignore_list":["\/wp-admin\/"]};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js" id="breeze-prefetch-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/lazysizes.js" id="lazysizes-js"></script>
<link rel="https://api.w.org/" href="https://otus.ru/journal/wp-json/" /><link rel="alternate" type="application/json" href="https://otus.ru/journal/wp-json/wp/v2/posts/9245" /><link rel='shortlink' href='https://otus.ru/journal/?p=9245' />
<link rel="alternate" type="application/json+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fajax-osobennosti-i-primenenie%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fajax-osobennosti-i-primenenie%2F&format=xml" />
<script>var Sphere_Plugin = {"ajaxurl":"https:\/\/otus.ru\/journal\/wp-admin\/admin-ajax.php"};</script><link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-180x180.png" />
<meta name="msapplication-TileImage" content="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-270x270.png" />
<style type="text/css" id="wp-custom-css">
#menu-item-10406 .wpel-icon {
display: none;
}
#menu-item-10407 .wpel-icon {
display: none;
}
.otus-login-site a .wpel-icon {
display: none;
}
.menu-menju-navykov-container a .wpel-icon {
display: none;
}
.otus-login-site a
{
background: #ffd709;
border-radius: 12px;
color: #0f0f10;
font-size: 14px;
font-weight: 700;
line-height: 20px;
display: block;
text-align: center;
padding: 8px 25px;
}
.main-footer.dark {
background: linear-gradient(90deg, #a64fc5, #4f54e6);
border-color: transparent;
}
.main-footer.bold .copyright {
color: #fff;
}
.main-footer.bold .to-top i {
color: #fff;
}
.main-footer.bold .back-to-top {
color: #fff;
}
.nav__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scrollable-menu .menu {
display: flex;
}
.nav__scroll
{
background: linear-gradient(90deg, #a64fc5, #4f54e6);
}
.scrollable-menu .menu .menu-item {
flex: 0 0 auto;
padding: 15px 15px;
}
.scrollable-menu .menu .menu-item a {
color: #fff;
}
.nav__scroll::-webkit-scrollbar{background-color:#fff;height:5px;}
.nav__scroll::-webkit-scrollbar-thumb{background-color:#dcdcdc;}
.nav__scroll::-webkit-scrollbar-track{-webkit-border-radius:0;border-radius:0;background-color:#fff;}/
body {
min-width: 320px;
}
.banner-click img {
margin: 0 auto;
display: block;
}
.banner-click {
cursor: pointer;
}
.banner-footer-area {
margin-bottom: 20px;
}
.banner-left-area {
margin-top: 40px;
} </style>
<!--Start VDZ Yandex Metrika Plugin-->
<!-- Yandex.Metrika counter --><script type="text/javascript" >(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(34531570, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer"});</script>
<noscript><div><img src="https://mc.yandex.ru/watch/34531570" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><!--START ADD EVENTS FROM CF7--><script type='text/javascript'>document.addEventListener( 'wpcf7submit', function( event ) {
//event.detail.contactFormId;
if(ym){
//console.log(event.detail);
ym(34531570, 'reachGoal', 'VDZ_SEND_CONTACT_FORM_7');
ym(34531570, 'params', {
page_url: window.location.href,
status: event.detail.status,
locale: event.detail.contactFormLocale,
form_id: event.detail.contactFormId,
});
}
}, false );
</script><!--END ADD EVENTS FROM CF7-->
<!--End VDZ Yandex Metrika Plugin-->
</head>
<body class="post-template-default single single-post postid-9245 single-format-standard right-sidebar lazy-normal has-lb">
<div class="main-wrap">
<header id="main-head" class="main-head head-nav-below has-search-modal simple simple-boxed">
<div class="inner inner-head" data-sticky-bar="0">
<div class="wrap cf wrap-head">
<div class="left-contain">
<span class="mobile-nav"><i class="fa fa-bars"></i></span>
<div class="title">
<a href="https://otus.ru/journal/" title="OTUS JOURNAL" rel="home" data-wpel-link="internal">
<span class="text-logo"><img src="/journal/wp-content/themes/contentberg/img/logo_site.svg" alt="OTUS JOURNAL"></span>
</a>
</div>
</div>
<div class="navigation-wrap inline">
<nav class="navigation inline simple light" data-sticky-bar="0">
<div class="menu-rubriki-container"><ul id="menu-rubriki" class="menu"><li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-1 menu-item-109"><a href="https://otus.ru/journal/category/pro-it/" data-wpel-link="internal"><span>Про IT</span></a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-cat-4 menu-item-113"><a href="https://otus.ru/journal/category/polza/" data-wpel-link="internal"><span>Полезное</span></a></li>
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-3 menu-item-114"><a href="https://otus.ru/journal/category/lifestyle/" data-wpel-link="internal"><span>Лайфстайл</span></a></li>
<li id="menu-item-10406" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10406"><a href="https://otus.ru/catalog/courses" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Обучение</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10407"><a href="https://otus.ru/about" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Информация</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </nav>
</div>
<div class="actions">
<div class="otus-login-site">
<a href="https://otus.ru/login/" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Войти<span class="wpel-icon wpel-image wpel-icon-6"></span></a>
</div>
<a href="#" title="Search" class="search-link"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
</header> <!-- .main-head -->
<div class="nav nav_disable nav_colored nav_transparent course-categories__nav nav__scroll ">
<div class="container wrap">
<div class="links inline simple light scrollable-menu">
<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov" class="menu"><li id="menu-item-10413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10414" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10415" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10416" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10418" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10420" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10421" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </div>
</div>
</div>
<div class="main wrap">
<div class="ts-row cf">
<div class="col-8 main-content cf">
<article id="post-9245" class="the-post post-9245 post type-post status-publish format-standard has-post-thumbnail category-polza tag-programmirovanie">
<header class="post-header the-post-header cf">
<div class="post-meta the-post-meta">
<span class="post-cat">
<a href="https://otus.ru/journal/category/polza/" class="category" data-wpel-link="internal">Полезное</a>
</span>
<h1 class="post-title">
AJAX: особенности и применение
</h1>
<a href="https://otus.ru/journal/ajax-osobennosti-i-primenenie/" class="date-link" data-wpel-link="internal"><time class="post-date">18 февраля, 2024</time></a>
</div>
<div class="featured">
<a href="https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-30.jpg" class="image-link" data-wpel-link="internal"><img width="770" height="515" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20770%20515%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-contentberg-main size-contentberg-main lazyload wp-post-image" alt="AJAX: особенности и применение" title="AJAX: особенности и применение" decoding="async" fetchpriority="high" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-30-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-30-270x180.jpg 270w" data-src="https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-30-770x515.jpg" data-sizes="(max-width: 770px) 100vw, 770px" /> </a>
</div>
</header><!-- .post-header -->
<div class="post-content description cf entry-content content-normal">
<div id="ez-toc-container" class="ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title " >Содержание</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5" title="Определение">Определение</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#%D0%A2%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D1%8B_%D0%B8_%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F" title="Термины и определения">Термины и определения</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#%D0%A1%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81" title="Синхронный запрос">Синхронный запрос</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D1%8B%D0%B5_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D1%8B" title="Асинхронные запросы">Асинхронные запросы</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-5" href="#%D0%9F%D1%80%D0%B5%D0%B8%D0%BC%D1%83%D1%89%D0%B5%D1%81%D1%82%D0%B2%D0%B0_%D0%B8_%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BA%D0%B8" title="Преимущества и недостатки">Преимущества и недостатки</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-6" href="#%D0%97%D0%BD%D0%B0%D0%BA%D0%BE%D0%BC%D1%81%D1%82%D0%B2%D0%BE_%D1%81_XMLHttpRequest" title="Знакомство с XMLHttpRequest">Знакомство с XMLHttpRequest</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-7" href="#%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0_%D0%B8_%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D0%B0" title="Отправка запроса и получение ответа">Отправка запроса и получение ответа</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-8" href="#%D0%92%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_the_AJAX_GET-request" title="Выполнение the AJAX GET-request">Выполнение the AJAX GET-request</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-9" href="#%D0%92%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_AJAX_POST" title="Выполнение AJAX POST">Выполнение AJAX POST</a></li></ul></li></ul></nav></div>
<p>Разработка программного обеспечения совершенствуется вместе с IT-технологиями. Сейчас активно внедряются абсолютно новые инструменты для веб-программирования. Google указывает на то, что это связано с их широким применением и популярностью «карманных» гаджетов среди пользователей.</p>
<p>Одной из наиболее успешных технологий, используемых в Интернет-программирования, являeтся AJAX. Google указывает на то, что она позволяет создавать интерактивные пользовательские веб-приложения и сайты за счет фонового обмена информацией браузера с работающим сервером. Далее с этим «инструментом» разработки предстоит познакомиться поближе. Необходимо выяснить его ключевые особенности, сильные и слабые стороны, области применения. Также будут приведены разнообразные примеры the AJAX в JavaScript. Эта информация поможет быстрее разобраться с соответствующей концепцией. Предложенные сведения пригодятся всем веб-разработчикам.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5"></span>Определение<span class="ez-toc-section-end"></span></h2>
<p>The AJAX – это аббревиатура Asynchronous JavaScript and XML. Google указывает на то, что на самом деле рассматриваемый «инструмент» не является новой технологией. Согласно информации из Google, он представляет собой своеобразный синтез возможностей XML и JS.</p>
<p>The AJAX – подход к созданию пользовательских интерфейсов для веб-приложений. Базируется на «фоновом» обмене информацией браузеров с веб-серверами. В конечном итоге при реализации соответствующей концепции и обновлении данных сайт не перезагружается полностью. Этот подход к разработке появился, согласно данным из Google и других поисковиков, в 2005 году благодаря Джесси Джеймсу Гарретту. Google указывает на то, что таким термином он описал новый набор технологий.</p>
<p>При применении the AJAX обновлять веб-страницу каждый раз при корректировке информации на ней не придется. Это связано с тем, что обновления относятся только к конкретной части проекта. Google указывает на то, что рассматриваемая технология делает работу в Интернете удобной и экономичней в плане расхода ресурсов и трафика.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A2%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D1%8B_%D0%B8_%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F"></span>Термины и определения<span class="ez-toc-section-end"></span></h2>
<p>Чтобы лучше разбираться в рассматриваемых технологиях, необходимо запомнить несколько ключевых терминов. Они помогут быстрее понять, что собой представляет the AJAX:</p>
<ol>
<li>JavaScript (JS) – язык, на котором пишутся приложения, а также составляются запросы для сервера и отправляются на него. Ответы от серверной части проекта тоже поступают за счет JS. Сюда же можно отнести обновление сайта и разбор полученного клиентом сообщения.</li>
<li>XML – формат, используемый для хранения и передачи информации. Его все чаще заменяет JSON.</li>
<li>Асинхронность – ситуация, при которой процесс (действие) выполняется в фоновом режиме, а не в основном потоке. В соответствующем случае пользователь сможет дальше комфортно взаимодействовать с сайтом или веб-сервисом, пока та или иная операция находится на стадии выполнения.</li>
</ol>
<p>Новичкам этого будет достаточно для того, чтобы понять определение the AJAX. Теперь можно более подробно рассмотреть принципы его функционирования, а также ключевые особенности.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D1%8B%D0%B9_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81"></span>Синхронный запрос<span class="ez-toc-section-end"></span></h2>
<p>Чтобы лучше понимать изучаемую технологию, необходимо разобраться в принципах обработки сервером получаемых запросов. Существует синхронный вариант. Это обычные запросы. Для получения и формирования сайта они работают так:</p>
<ol>
<li>Сначала пользователь в форме обратной связи щелкает на кнопку «Отправить».</li>
<li>Браузер «замечает», что по кнопке требуется отправить запрос на серверную часть веб-проекта. Он формирует из запроса пакеты и направляет их серверу.</li>
<li>Сервер получает запрос, а затем обрабатывает его и выдает ответ. Им послужит новый веб-сайт.</li>
<li>Браузер получает ответ и загружает новую страницу «с нуля». На ней предусматриваются все необходимые пользователю сведения, но присутствует «эффект вспышки». The Google описывает его как нахождение на одном сайте, на котором в определенный момент белеет экран, а затем клиент оказывается на новой странице.</li>
</ol>
<p>Синхронность здесь выражается отправкой данных большой кучей на сервер, после чего весь веб-сайт также «массово» возвращается клиенту.</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/x42DmgPJBjafY2Lh7j-dI90mEjtKRbgtT0kWmHElkl2WBT_bEea4xiLrCR4WXkks93-XEN5ZO9OfTvKyUe4dyXZL3qEmKvGVNUcGqzb3IcgJtfe0-sRK1w4yAXeUrYWDDuci6ZwzQ3vYEY7vPSewAQ" alt="AJAX: особенности и применение"/></figure>
<p>Выше можно увидеть наглядный пример синхронности в клиент-серверных моделях. Именно такой вариант функционирования поддерживают всевозможные формы обратной связи: пользователь нажимает на кнопку, а браузер для демонстрации новых данных начинает загружать новую страницу. Но синхронный подход – это всего лишь одна из известных концепций. The Google выделяет еще один вариант.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D1%8B%D0%B5_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D1%8B"></span>Асинхронные запросы<span class="ez-toc-section-end"></span></h2>
<p>Асинхронные запросы – это и есть the AJAX технология. Она работает несколько иначе. Вместо того, чтобы синхронно загружать новую информацию с новой страницей, the AJAX использует обращение к серверу за недостающими данными, после чего добавляет их на веб-сайт. Перезагрузка всей страницы не потребуется.</p>
<p>На примере формы обратной связи Google описывает асинхронные запросы так:</p>
<ol>
<li>Пользователь заполняет форму и нажимает на кнопку «Отправить».</li>
<li>Браузер запускает скрипт, который был заранее привязан к кнопке.</li>
<li>Соответствующий скрипт отправляет запрос на сервер, а затем получает в качестве ответа новую порцию данных от сервера. Сайт не перезагружается. Все операции осуществляются внутри скрипта.</li>
<li>Скрипт считывает ответ от серверной части и внедряет новую информацию на веб-страницу.</li>
<li>Сайт не перезагружается, посетитель остается там же, где и был, но только с новыми данными.</li>
</ol>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/0nlGiMUeWxxxaov5FWQ6QCecV4B7lttpDbPArTU2urTxflzG2PpK77ClJjmvwhA1_hH93yvoBlIALlUSe9mT6QCq3ZkHSbLW16UNJOgUVHYqcJP7k_B7Gt0phlj94n49EWiUzSPLhP3YNoucCJ1k2Q" alt="AJAX: особенности и применение"/></figure>
<p>Выше – наглядный пример работы рассматриваемой технологии. С его помощью можно быстро понять разницу в синхронных и асинхронных запросах.</p>
<p>Примерами работы the AJAX на сайте могут послужить следующие операции:</p>
<ul>
<li>получение списка новых сообщений в чате, не перезагружая весь чат;</li>
<li>загрузка новых товаров в интернет-магазин;</li>
<li>получение новых рекламных баннеров;</li>
<li>сворачивание видео на сервисе «Ютуб» в маленький плеер в углу;</li>
<li>демонстрация статуса заказа службами доставки.</li>
</ul>
<p>Ленты в социальных сетях – это тоже результат функционирования асинхронных запросов. Когда пользователь пролистывает их до конца, сервер получает новый the AJAX-запрос, после чего загружает очередной «блок» новостей и постов.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B5%D0%B8%D0%BC%D1%83%D1%89%D0%B5%D1%81%D1%82%D0%B2%D0%B0_%D0%B8_%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BA%D0%B8"></span>Преимущества и недостатки<span class="ez-toc-section-end"></span></h2>
<p>Перед тем как более детально изучать рассматриваемую технологию, стоит сначала разобраться в ее преимуществах и недостатках. Это поможет понять, стоит ли внедрять асинхронные запросы на тот или иной веб-портал.</p>
<p>К сильным сторонам the AJAX Google относит:</p>
<ol>
<li>Экономию трафика и уменьшение общей нагрузки на серверную часть проекта. При грамотной реализации the AJAX в несколько раз снижает нагрузку на сервер. Все страницы сайта обычно генерируются по одному шаблону, включая неизменные компоненты («подвалы», «шапки», «навигационные панели»). Для их генерации необходимо обращаться к различным файлам, время на обработку скриптов (иногда – на обращение к запросам базы данных). Все эти операции удастся «опустить», если заменить полную загрузку сайта генерацией и передачей лишь определенной ее части.</li>
<li>Ускорение реакции со стороны интерфейса. Google связывает это с тем, что загрузка части веб-сервиса всегда быстрее, чем полноценное обновление. Пользователь практически моментально сможет увидеть результат своих действий, причем без характерного мерцания сайта.</li>
<li>Поддержку возможностей для интерактивной обработки. Пример – в процессе ввода поискового запроса в Google на экране выводится подсказка с возможными вариантами его продолжения. На большинстве веб-страниц в процессе регистрации клиент вводит имя и сразу же видит, доступно ли оно для использования или нет. The AJAX удобно использовать при написании чатов, административных панелей, а также иных инструментов, которые отвечают за вывод меняющихся время от времени данных.</li>
<li>Отсутствие остановки мультимедиа. Google указывает на еще одно преимущество the AJAX JS – веб-портал не будет перезагружаться при применении технологии, плеер продолжит свою работу. Именно поэтому упомянутый инструмент представляет ценность для аудио- и видеохостингов.</li>
</ol>
<p>Google отмечает, что у изучаемой технологии существуют не только преимущества, но и недостатки:</p>
<ol>
<li>Отсутствие интеграции со стандартными браузерными инструментами. </li>
<li>Недоступность поисковикам динамически загружаемого содержимого.</li>
<li>Усложнение всего проекта. Этот недостаток Google характеризует перераспределением логики обработки информации: осуществляется выделение и частичный перенос на сторону клиента процессов первичного форматирования информации. Это делает контроль за целостностью форматов и типов более сложным.</li>
<li>Необходимость включения в браузере JavaScript. Из соображений безопасности, как говорит Google, JS может быть отключен. Также стоит учитывать, что the AJAX-страницы труднодоступны неполнофункциональным браузерам, веб-архивам, а также роботам.</li>
<li>Проблемы с отображением нестандартных кодировок. Этот недостаток встречается лишь в некоторых сценариях the AJAX-скриптов.</li>
<li>Низкая скорость при «грубом» программировании. Если рассматриваемого типа запросов на одном сайте много, и по каждому клику подгружается список, страница становится медленнее «традиционной».</li>
<li>Плохая работа на ненадежных соединениях. Если связь часто теряется, обычную веб-страницу можно просто перезагрузить. Google отмечает, что в случае с the AJAX-сайтом пользователю нужно будет перезагружать все с самого начала, а затем искать, где он остановился. Параллельная работа в соответствующей ситуации – это минус, а не плюс. API истории помогут устранить данный недостаток.</li>
<li>Риски, связанные с фабрикацией запросов другими страницами. Google указывает на то, что результат работы рассматриваемой технологии может выступать в качестве JS-кода (обычно – JSON). XMLHttpRequest действует только в пределах одного домена, а тег script – нет.</li>
</ol>
<p>The AJAX запрос, несмотря на ряд недостатков и недочетов, все равно остается популярной и удобной технологией.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%97%D0%BD%D0%B0%D0%BA%D0%BE%D0%BC%D1%81%D1%82%D0%B2%D0%BE_%D1%81_XMLHttpRequest"></span>Знакомство с XMLHttpRequest<span class="ez-toc-section-end"></span></h2>
<p>С основными особенностями изучаемой технологии разобраться удалось. Теперь можно написать с ее использованием несколько команд. Google указывает на то, что перед началом разработки необходимо изучить объект XMLHttpRequest. Это ключевой элемент будущих запросов.</p>
<p>XMLHttpRequest (XHR) – это объект, встроенный в браузер. Он необходим для отправки HTTP-запросов на серверную сторону и дальнейшего получения информации в ответ. Этот компонент поддерживается всеми современными браузерами.</p>
<p>Google указывает, что у XHR поддерживаются следующие методы:</p>
<figure class="wp-block-table"><table><tbody><tr><td>Abort()</td><td>Отмена текущего запроса</td></tr><tr><td>getAllResponseHeaders()</td><td>Возврат полного списка HTTP-заголовков в виде строчки</td></tr><tr><td>getAllResponseHeader(имя)</td><td>Возраст значения указанного заголовка</td></tr><tr><td>Open (метод, URL, async, имя_пользователя, пароль)</td><td>Отвечает за определение метода, URL и других опциональных параметров запроса. Async определяет, происходит ли работа в асинхронном режиме.</td></tr><tr><td>Send(метод)</td><td>Отправка запроса на имеющийся сервер</td></tr><tr><td>setRequestHeader (label, value)</td><td>Добавление к запросу HTTP-заголовка</td></tr></tbody></table></figure>
<p>The XML также поддерживает у своего класса следующие свойства:</p>
<figure class="wp-block-table"><table><tbody><tr><td>Onreadystatechange</td><td>Обработчик события, которое происходит при каждой смене состояния объекта.</td></tr><tr><td>ReadyState</td><td>Отвечает за возврат текущего состояния объекта: 0 – не инициализирован, 1 – открыт, 2 – отправка информации, 3 – получение данных, 4 – информация загружена.</td></tr><tr><td>responseText</td><td>Текст ответа на запрос.</td></tr><tr><td>responseXML</td><td>Текст ответа на запрос, представленный XML. Позже его можно распарсить при помощи DOM.</td></tr><tr><td>Status</td><td>Возврат HTTP-статуса в виде числа (404 – «Not Found», 200 – «OK» и так далее).</td></tr><tr><td>statusText</td><td>Возвращение статуса в виде строки. Запись выводится по аналогии с предыдущим вариантом, но без числа.</td></tr></tbody></table></figure>
<p>Теперь можно разобрать несколько примеров работы the AJAX на сервере. Эта информация поможет быстрее освоить рассматриваемую технологию.</p>
<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0_%D0%B8_%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D0%B0"></span>Отправка запроса и получение ответа<span class="ez-toc-section-end"></span></h2>
<p>Перед выполнением the AJAX-связи между клиентом и сервером необходимо создать экземпляр объекта XHR. Для этого используется команда:</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/OrUm6TtD2JY9ie4RftMelR05c3vPsbWJeeaNg3hxVVOuJzU-yvF5vyrIwtMUI8V0wKnuHOBbo5QszB0Sl6_alaEAU_-BwV72jfiVwj3LAhRPPux44HHt3RMKc3i7pvYh0es5ayBAc_ehdOD3zkEcAg" alt="AJAX: особенности и применение"/></figure>
<p>Для отправки запроса на сервер, как уверяет Google, необходимо создать экземпляр созданного объекта запроса через метод open():</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/SEdFvOjtGdC9HQwAmVaK_bN6C4jyt_aKlPZLuFhvt-AQqEui89sK42_855T4Y8R9VfB2kJYlL_9kn1l8-jJ_tCoZl4Sm7OsaR4dOJCkQ89fp2GxVoXqTCR84FTSS2nM2lyzML5lqW8RKGRmOsvhzCw" alt="AJAX: особенности и применение"/></figure>
<p>Файл может иметь любой тип – .xml, .txt и так далее. Допускается также использование файлов скриптов на стороне сервера, которые смогут выполнить разнообразные действия.</p>
<p>Для отправки «команды» на серверную сторону потребуется метод send():</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/9P3rmOaMPpwXwQ4fPgphIBFqCjYbxG1OZbT-blvVZ5_MtqMRTaefwMVO6CwRCgRf3aKhXLOYRenNF3qNaCUPXkFJvMH5pBUFSiBR6lHXqs75-IFsZKy8uOH7N96TLsJSCSlBu0L8Iz3NWMI2OCyy2A" alt="AJAX: особенности и применение"/></figure>
<p>Google говорит о том, что этот метод принимает необязательный параметр the body. С его помощью получается указать request-тело. Такой прием используется в основном для конструкций the HTTP POST. Связано это с тем, что the GET не имеет тела – у него поддерживаются только заголовки.</p>
<p>Метод the GET, согласно Google, используется для того, чтобы отправлять на серверы небольшие объемы данных. The POST подходит для крупных информационных массивов. Пример – данные электронной формы.</p>
<p>В методе the GET, как говорит Google, информация отправляется в виде URL-параметров. В POST данные передаются как часть тела HTTP-запроса. Они не будут отображаться в URL.</p>
<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%92%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_the_AJAX_GET-request"></span>Выполнение the AJAX GET-request<span class="ez-toc-section-end"></span></h3>
<p>Далее предстоит познакомиться с принципами реализации GET и POST. Google указывает на то, что первая команда используется для получения/извлечения некоторых сведений с сервера, не требующих изменений в базе данных. Пример – выборка результатов поиска на основе того или иного термина.</p>
<p>Вот наглядный пример того, как сделать GET-request при помощи рассматриваемой технологии в JavaScript:</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/628TXXrqNiyK55jvElyneAzI3K2zdjyQ_hmQFhyZb7EuJp8DW8FxfgZCMyko0l17OQOgoOJlVzTzrgSF9iZsW-VoDVvouqCHE0sosPn2BhSOtfvnX7MpgkwPRYd25d7jZC7RyhoyFp9z07LjygGTYg" alt="AJAX: особенности и применение"/></figure>
<p>Google подчеркивает, что, когда request является асинхронным, метод send() вернется сразу после отправки соответствующей команды на обработку. Это значит, что сначала требуется проверить местоположение ответа в жизненном цикле. Для этого, согласно Google, используется свойство readyState объекта XHR. Это целое число. Оно указывает на состояние HTTP-request. Ниже можно увидеть возможные значения свойства readyState:</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/FSTxFVo9BrXh0qOWSfaX9hgi-GYnYs7LrpZyqGY5QHC3SVMpJRj68V_zy_JvaJ4ZOP3oED4BEhF05bONVmwOztDAVGvNX8c8ESUVkVW-urKeE7IOtrYezO4_Gh8LOvWgEg2gVujwyeiyX7RoEe-s3Q" alt="AJAX: особенности и применение"/></figure>
<p>Кроме GET есть еще один вариант request – POST. Пример его выполнения также предстоит изучить каждому веб-программисту для понимания принципов работы рассматриваемой технологии.</p>
<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%92%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_AJAX_POST"></span>Выполнение AJAX POST<span class="ez-toc-section-end"></span></h3>
<p>Google говорит о том, что POST используется в основном для отправки данных форм на веб-сервер. Вот один из таких примеров:</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/A3JoYaB9DmeU5xrnzHKBrl-7T4_PrZqVe2GW5uURs2OnY5VqdFzKhxlSpTovdMu_-gXgaU8GyTuvSlPYXdM0aJ1XVT7rFlqYdEYeNYmTR4-vhAi6Lhr-m6-G4t-KBsvMW6wkUFMIbnVWaqd7mUZ00Q" alt="AJAX: особенности и применение"/></figure>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/la-oCFqLpd3gD7BHj1UJCN2RoWB9g6273zxMgvSRXngeiouSnldq3CfLtT-Grfk5W2V5QsDUxsjLhw0X4IWzTS09AGS8MQJ9hnk78Ds6iwtuKg45aD3qT2Zd897Mz8kr8uskqTYvQIlIfzUZ3OrJ1g" alt="AJAX: особенности и применение"/></figure>
<p>Если не использовать FormData для отправки данных формы при ее отправке на сервер в виде request-строки (request.send), Google говорит о необходимости явной установки заголовка в request. Делается это при помощи метода setRequestHeader:</p>
<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/aERMlwALwUKnDusc25ZRHqEgprYLT_P3aa73vfXs6zIW7TBFEo7tQKqQbW-qODdD1qaywZ1-t9XfQ4fBdHv769O63XIji3H5sRdHxwk14l_6wJW2zxc1l6wjTqspqFoyIrqxvWsnkw7osX7WlL-byw" alt="AJAX: особенности и применение"/></figure>
<p>Теперь в общих чертах понятно, что собой представляет AJAX запрос, а также как его составить. <a href="https://www.youtube.com/watch?v=MSz83YWCecM" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Здесь<span class="wpel-icon wpel-image wpel-icon-6"></span></a> можно увидеть изученный материал в наглядной форме. А лучше работать с клиент-серверными моделями пользователям помогут дистанционные компьютерные курсы.</p>
<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a href="https://otus.ru/?utm_source=oj" target="_blank" rel="noreferrer noopener nofollow external" data-wpel-link="external" class="wpel-icon-right">Otus<span class="wpel-icon wpel-image wpel-icon-6"></span></a>!</em> </p>
</div><!-- .post-content -->
<div class="the-post-foot cf">
<div class="tag-share cf">
<div class="post-tags"><a href="https://otus.ru/journal/tag/programmirovanie/" rel="tag" data-wpel-link="internal">программирование</a></div>
<div class="post-share">
<div class="post-share-icons cf">
<span class="counters">
</span>
<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fotus.ru%2Fjournal%2Fajax-osobennosti-i-primenenie%2F" class="link facebook wpel-icon-right" target="_blank" title="Share on Facebook" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-facebook"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fajax-osobennosti-i-primenenie%2F&text=AJAX%3A%20%D0%BE%D1%81%D0%BE%D0%B1%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8%20%D0%B8%20%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5" class="link twitter wpel-icon-right" target="_blank" title="Share on Twitter" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-twitter"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fotus.ru%2Fjournal%2Fajax-osobennosti-i-primenenie%2F" class="link linkedin wpel-icon-right" target="_blank" title="LinkedIn" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-linkedin"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
<a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fajax-osobennosti-i-primenenie%2F&media=https%3A%2F%2Fotus.ru%2Fjournal%2Fwp-content%2Fuploads%2F2024%2F02%2Foj-1080x720-30.jpg&description=AJAX%3A%20%D0%BE%D1%81%D0%BE%D0%B1%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8%20%D0%B8%20%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5" class="link pinterest wpel-icon-right" target="_blank" title="Pinterest" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-pinterest-p"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
</div>
</div>
</div>
</div>
<div class="post-nav">
<div class="post previous cf">
<a href="https://otus.ru/journal/ustanovka-linux-podrobnaya-instrukciya/" title="Prev Post" class="nav-icon" data-wpel-link="internal">
<i class="fa fa-angle-left"></i>
</a>
<span class="content">
<a href="https://otus.ru/journal/ustanovka-linux-podrobnaya-instrukciya/" class="image-link" rel="previous" data-wpel-link="internal">
<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Установка Linux: подробная инструкция" decoding="async" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-29-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-29-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-29-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-29-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-29-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-29-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="Установка Linux: подробная инструкция" /> </a>
<div class="post-meta">
<span class="label">Prev Post</span>
<div class="post-meta post-meta-b">
<h2 class="post-title">
<a href="https://otus.ru/journal/ustanovka-linux-podrobnaya-instrukciya/" data-wpel-link="internal">Установка Linux: подробная инструкция</a>
</h2>
<div class="below">
<a href="https://otus.ru/journal/ustanovka-linux-podrobnaya-instrukciya/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2024-02-18T12:59:39+00:00">18 февраля, 2024</time></a>
<span class="meta-sep"></span>
<span class="meta-item read-time">6 Mins Read</span>
</div>
</div> </div>
</span>
</div>
<div class="post next cf">
<a href="https://otus.ru/journal/ajax-i-zaprosy-s-ego-pomoshhju-jquery-i-ego-primenenie-dlya-asinhronnyh-zaprosov/" title="Next Post" class="nav-icon" data-wpel-link="internal">
<i class="fa fa-angle-right"></i>
</a>
<span class="content">
<a href="https://otus.ru/journal/ajax-i-zaprosy-s-ego-pomoshhju-jquery-i-ego-primenenie-dlya-asinhronnyh-zaprosov/" class="image-link" rel="next" data-wpel-link="internal">
<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Ajax и запросы с его помощью. jQuery и его применение для асинхронных запросов" decoding="async" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-31-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-31-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-31-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-31-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-31-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2024/02/oj-1080x720-31-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="Ajax и запросы с его помощью. jQuery и его применение для асинхронных запросов" /> </a>
<div class="post-meta">
<span class="label">Next Post</span>
<div class="post-meta post-meta-b">
<h2 class="post-title">
<a href="https://otus.ru/journal/ajax-i-zaprosy-s-ego-pomoshhju-jquery-i-ego-primenenie-dlya-asinhronnyh-zaprosov/" data-wpel-link="internal">Ajax и запросы с его помощью. jQuery и его применение для асинхронных запросов</a>
</h2>
<div class="below">
<a href="https://otus.ru/journal/ajax-i-zaprosy-s-ego-pomoshhju-jquery-i-ego-primenenie-dlya-asinhronnyh-zaprosov/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2024-02-18T15:21:19+00:00">18 февраля, 2024</time></a>
<span class="meta-sep"></span>
<span class="meta-item read-time">14 Mins Read</span>
</div>
</div> </div>
</span>
</div>
</div>
<section class="related-posts grid-3">
<h4 class="section-head"><span class="title">Читать ещё</span></h4>
<div class="ts-row posts cf">
<article class="post col-4">
<a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" title="Уровень готовности CTO к 2026" class="image-link" data-wpel-link="internal">
<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Уровень готовности CTO к 2026" title="Уровень готовности CTO к 2026" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" /> </a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" class="post-link" data-wpel-link="internal">Уровень готовности CTO к 2026</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-11-16T19:50:59+00:00">16 ноября, 2025</time>
</div>
</div>
</article >
<article class="post col-4">
<a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" title="Новые уроки ноября: только топ-темы по программированию" class="image-link" data-wpel-link="internal">
<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Новые уроки ноября: только топ-темы по программированию" title="Новые уроки ноября: только топ-темы по программированию" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" /> </a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" class="post-link" data-wpel-link="internal">Новые уроки ноября: только топ-темы по программированию</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-11-09T23:24:11+00:00">9 ноября, 2025</time>
</div>
</div>
</article >
<article class="post col-4">
<a href="https://otus.ru/journal/schjot-idjot-na-chasy/" title="Счёт идёт на часы" class="image-link" data-wpel-link="internal">
<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Счёт идёт на часы" title="Счёт идёт на часы" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-370x245.png 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png" data-sizes="(max-width: 270px) 100vw, 270px" /> </a>
<div class="content">
<h3 class="post-title"><a href="https://otus.ru/journal/schjot-idjot-na-chasy/" class="post-link" data-wpel-link="internal">Счёт идёт на часы</a></h3>
<div class="post-meta">
<time class="post-date" datetime="2025-10-30T15:04:59+00:00">30 октября, 2025</time>
</div>
</div>
</article >
</div>
</section>
</article> <!-- .the-post -->
</div>
<aside class="col-4 sidebar">
<div class="inner">
<ul>
<li id="search-2" class="widget widget_search"><h5 class="widget-title"><span>Поиск по блогу</span></h5>
<form method="get" class="search-form" action="https://otus.ru/journal/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Введите запрос и нажмите Enter" value="" name="s" title="Search for:" />
</label>
<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>
</li>
<li id="tag_cloud-5" class="widget widget_tag_cloud"><h5 class="widget-title"><span>Метки</span></h5><div class="tagcloud"><a href="https://otus.ru/journal/tag/android-2/" class="tag-cloud-link tag-link-74 tag-link-position-1" style="font-size: 12.472222222222pt;" aria-label="Android (34 элемента)" data-wpel-link="internal">Android</a>
<a href="https://otus.ru/journal/tag/c-3/" class="tag-cloud-link tag-link-91 tag-link-position-2" style="font-size: 10.916666666667pt;" aria-label="C (23 элемента)" data-wpel-link="internal">C</a>
<a href="https://otus.ru/journal/tag/c-2/" class="tag-cloud-link tag-link-81 tag-link-position-3" style="font-size: 12.666666666667pt;" aria-label="C# (35 элементов)" data-wpel-link="internal">C#</a>
<a href="https://otus.ru/journal/tag/c/" class="tag-cloud-link tag-link-20 tag-link-position-4" style="font-size: 12.472222222222pt;" aria-label="c++ (34 элемента)" data-wpel-link="internal">c++</a>
<a href="https://otus.ru/journal/tag/computer-science/" class="tag-cloud-link tag-link-209 tag-link-position-5" style="font-size: 15.972222222222pt;" aria-label="computer science (78 элементов)" data-wpel-link="internal">computer science</a>
<a href="https://otus.ru/journal/tag/css/" class="tag-cloud-link tag-link-288 tag-link-position-6" style="font-size: 8.6805555555556pt;" aria-label="CSS (13 элементов)" data-wpel-link="internal">CSS</a>
<a href="https://otus.ru/journal/tag/data-science/" class="tag-cloud-link tag-link-151 tag-link-position-7" style="font-size: 8pt;" aria-label="Data Science (11 элементов)" data-wpel-link="internal">Data Science</a>
<a href="https://otus.ru/journal/tag/devops/" class="tag-cloud-link tag-link-98 tag-link-position-8" style="font-size: 10.138888888889pt;" aria-label="devops (19 элементов)" data-wpel-link="internal">devops</a>
<a href="https://otus.ru/journal/tag/docker/" class="tag-cloud-link tag-link-143 tag-link-position-9" style="font-size: 8.2916666666667pt;" aria-label="Docker (12 элементов)" data-wpel-link="internal">Docker</a>
<a href="https://otus.ru/journal/tag/gamedev/" class="tag-cloud-link tag-link-25 tag-link-position-10" style="font-size: 11.694444444444pt;" aria-label="gamedev (28 элементов)" data-wpel-link="internal">gamedev</a>
<a href="https://otus.ru/journal/tag/hr/" class="tag-cloud-link tag-link-103 tag-link-position-11" style="font-size: 8pt;" aria-label="hr (11 элементов)" data-wpel-link="internal">hr</a>
<a href="https://otus.ru/journal/tag/html/" class="tag-cloud-link tag-link-217 tag-link-position-12" style="font-size: 11.208333333333pt;" aria-label="HTML (25 элементов)" data-wpel-link="internal">HTML</a>
<a href="https://otus.ru/journal/tag/ios/" class="tag-cloud-link tag-link-101 tag-link-position-13" style="font-size: 8.9722222222222pt;" aria-label="iOS (14 элементов)" data-wpel-link="internal">iOS</a>
<a href="https://otus.ru/journal/tag/it/" class="tag-cloud-link tag-link-50 tag-link-position-14" style="font-size: 10.527777777778pt;" aria-label="IT (21 элемент)" data-wpel-link="internal">IT</a>
<a href="https://otus.ru/journal/tag/java/" class="tag-cloud-link tag-link-75 tag-link-position-15" style="font-size: 15.680555555556pt;" aria-label="Java (73 элемента)" data-wpel-link="internal">Java</a>
<a href="https://otus.ru/journal/tag/javascript/" class="tag-cloud-link tag-link-83 tag-link-position-16" style="font-size: 14.319444444444pt;" aria-label="JavaScript (53 элемента)" data-wpel-link="internal">JavaScript</a>
<a href="https://otus.ru/journal/tag/linux/" class="tag-cloud-link tag-link-141 tag-link-position-17" style="font-size: 11.888888888889pt;" aria-label="Linux (29 элементов)" data-wpel-link="internal">Linux</a>
<a href="https://otus.ru/journal/tag/machine-learning/" class="tag-cloud-link tag-link-167 tag-link-position-18" style="font-size: 8.6805555555556pt;" aria-label="Machine Learning (13 элементов)" data-wpel-link="internal">Machine Learning</a>
<a href="https://otus.ru/journal/tag/otus-book/" class="tag-cloud-link tag-link-261 tag-link-position-19" style="font-size: 9.9444444444444pt;" aria-label="otus book (18 элементов)" data-wpel-link="internal">otus book</a>
<a href="https://otus.ru/journal/tag/php/" class="tag-cloud-link tag-link-45 tag-link-position-20" style="font-size: 10.527777777778pt;" aria-label="PHP (21 элемент)" data-wpel-link="internal">PHP</a>
<a href="https://otus.ru/journal/tag/python/" class="tag-cloud-link tag-link-27 tag-link-position-21" style="font-size: 16.944444444444pt;" aria-label="Python (99 элементов)" data-wpel-link="internal">Python</a>
<a href="https://otus.ru/journal/tag/qa/" class="tag-cloud-link tag-link-155 tag-link-position-22" style="font-size: 11.402777777778pt;" aria-label="qa (26 элементов)" data-wpel-link="internal">qa</a>
<a href="https://otus.ru/journal/tag/sql/" class="tag-cloud-link tag-link-38 tag-link-position-23" style="font-size: 12.861111111111pt;" aria-label="SQL (37 элементов)" data-wpel-link="internal">SQL</a>
<a href="https://otus.ru/journal/tag/team-lead/" class="tag-cloud-link tag-link-364 tag-link-position-24" style="font-size: 9.9444444444444pt;" aria-label="team lead (18 элементов)" data-wpel-link="internal">team lead</a>
<a href="https://otus.ru/journal/tag/unity/" class="tag-cloud-link tag-link-24 tag-link-position-25" style="font-size: 8pt;" aria-label="unity (11 элементов)" data-wpel-link="internal">unity</a>
<a href="https://otus.ru/journal/tag/algoritmy/" class="tag-cloud-link tag-link-30 tag-link-position-26" style="font-size: 9.9444444444444pt;" aria-label="Алгоритмы (18 элементов)" data-wpel-link="internal">Алгоритмы</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh/" class="tag-cloud-link tag-link-40 tag-link-position-27" style="font-size: 10.138888888889pt;" aria-label="Базы данных (19 элементов)" data-wpel-link="internal">Базы данных</a>
<a href="https://otus.ru/journal/tag/matematika/" class="tag-cloud-link tag-link-44 tag-link-position-28" style="font-size: 10.916666666667pt;" aria-label="Математика (23 элемента)" data-wpel-link="internal">Математика</a>
<a href="https://otus.ru/journal/tag/arhitektura-po/" class="tag-cloud-link tag-link-10 tag-link-position-29" style="font-size: 9.4583333333333pt;" aria-label="архитектура ПО (16 элементов)" data-wpel-link="internal">архитектура ПО</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh-2/" class="tag-cloud-link tag-link-251 tag-link-position-30" style="font-size: 10.138888888889pt;" aria-label="базы данных (19 элементов)" data-wpel-link="internal">базы данных</a>
<a href="https://otus.ru/journal/tag/vebinar/" class="tag-cloud-link tag-link-201 tag-link-position-31" style="font-size: 13.930555555556pt;" aria-label="вебинар (48 элементов)" data-wpel-link="internal">вебинар</a>
<a href="https://otus.ru/journal/tag/dajdzhest/" class="tag-cloud-link tag-link-308 tag-link-position-32" style="font-size: 10.722222222222pt;" aria-label="дайджест (22 элемента)" data-wpel-link="internal">дайджест</a>
<a href="https://otus.ru/journal/tag/zapis-vebinara/" class="tag-cloud-link tag-link-226 tag-link-position-33" style="font-size: 14.902777777778pt;" aria-label="запись вебинара (61 элемент)" data-wpel-link="internal">запись вебинара</a>
<a href="https://otus.ru/journal/tag/zapis-uroka/" class="tag-cloud-link tag-link-272 tag-link-position-34" style="font-size: 16.069444444444pt;" aria-label="запись урока (80 элементов)" data-wpel-link="internal">запись урока</a>
<a href="https://otus.ru/journal/tag/informacionnaya-bezopasnost/" class="tag-cloud-link tag-link-232 tag-link-position-35" style="font-size: 10.138888888889pt;" aria-label="информационная безопасность (19 элементов)" data-wpel-link="internal">информационная безопасность</a>
<a href="https://otus.ru/journal/tag/karera-v-it/" class="tag-cloud-link tag-link-292 tag-link-position-36" style="font-size: 9.9444444444444pt;" aria-label="карьера в IT (18 элементов)" data-wpel-link="internal">карьера в IT</a>
<a href="https://otus.ru/journal/tag/podborka/" class="tag-cloud-link tag-link-7 tag-link-position-37" style="font-size: 12.666666666667pt;" aria-label="подборка (35 элементов)" data-wpel-link="internal">подборка</a>
<a href="https://otus.ru/journal/tag/podborka-statej/" class="tag-cloud-link tag-link-219 tag-link-position-38" style="font-size: 15.777777777778pt;" aria-label="подборка статей (75 элементов)" data-wpel-link="internal">подборка статей</a>
<a href="https://otus.ru/journal/tag/programmirovanie/" class="tag-cloud-link tag-link-65 tag-link-position-39" style="font-size: 22pt;" aria-label="программирование (332 элемента)" data-wpel-link="internal">программирование</a>
<a href="https://otus.ru/journal/tag/proekt/" class="tag-cloud-link tag-link-321 tag-link-position-40" style="font-size: 11.888888888889pt;" aria-label="проект (29 элементов)" data-wpel-link="internal">проект</a>
<a href="https://otus.ru/journal/tag/proektnaya-rabota/" class="tag-cloud-link tag-link-310 tag-link-position-41" style="font-size: 11.597222222222pt;" aria-label="проектная работа (27 элементов)" data-wpel-link="internal">проектная работа</a>
<a href="https://otus.ru/journal/tag/seti/" class="tag-cloud-link tag-link-181 tag-link-position-42" style="font-size: 12.958333333333pt;" aria-label="сети (38 элементов)" data-wpel-link="internal">сети</a>
<a href="https://otus.ru/journal/tag/testirovanie/" class="tag-cloud-link tag-link-69 tag-link-position-43" style="font-size: 13.930555555556pt;" aria-label="тестирование (48 элементов)" data-wpel-link="internal">тестирование</a>
<a href="https://otus.ru/journal/tag/upravlenie-komandoj/" class="tag-cloud-link tag-link-63 tag-link-position-44" style="font-size: 11.694444444444pt;" aria-label="управление командой (28 элементов)" data-wpel-link="internal">управление командой</a>
<a href="https://otus.ru/journal/tag/habr-2/" class="tag-cloud-link tag-link-203 tag-link-position-45" style="font-size: 13.930555555556pt;" aria-label="хабр (48 элементов)" data-wpel-link="internal">хабр</a></div>
</li>
</ul>
</div>
</aside>
</div> <!-- .ts-row -->
</div> <!-- .main -->
<footer class="main-footer dark bold">
<section class="lower-footer cf">
<div class="wrap">
<div class="links">
<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div> </div>
<p class="copyright"> © 2015-2026 OTUS </p>
<div class="to-top">
<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> Top</a>
</div>
</div>
</section>
</footer>
</div> <!-- .main-wrap -->
<div class="mobile-menu-container off-canvas" id="mobile-menu">
<a href="#" class="close"><i class="fa fa-times"></i></a>
<div class="logo">
</div>
<ul class="mobile-menu"></ul>
</div>
<div class="search-modal-wrap">
<div class="search-modal-box" role="dialog" aria-modal="true">
<form method="get" class="search-form" action="https://otus.ru/journal/">
<input type="search" class="search-field" name="s" placeholder="Search..." value="" required />
<button type="submit" class="search-submit visuallyhidden">Submit</button>
<p class="message">
Type above and press <em>Enter</em> to search. Press <em>Esc</em> to cancel. </p>
</form>
</div>
</div>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/js/url-span.js" id="wbcr-comments-plus-url-span-js"></script>
<script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra">
/* <![CDATA[ */
var eztoc_smooth_local = {"scroll_offset":"30"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js" id="ez-toc-scroll-scriptjs-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js" id="ez-toc-js-cookie-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js" id="ez-toc-jquery-sticky-kit-js"></script>
<script type="text/javascript" id="ez-toc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js" id="ez-toc-js-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/custom-script.js" id="custom-script-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/magnific-popup.js" id="magnific-popup-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.fitvids.js" id="jquery-fitvids-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/imagesloaded.min.js" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/object-fit-images.js" id="object-fit-images-js"></script>
<script type="text/javascript" id="contentberg-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"custom_ajax_url":"\/journal\/ajax-osobennosti-i-primenenie\/"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theme.js" id="contentberg-theme-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theia-sticky-sidebar.js" id="theia-sticky-sidebar-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.slick.js" id="jquery-slick-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jarallax.js" id="jarallax-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/masonry.min.js" id="masonry-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.masonry.min.js" id="jquery-masonry-js"></script>
</body>
</html>
<!-- Cache served by breeze CACHE - Last modified: Mon, 09 Mar 2026 23:03:22 GMT -->