Что такое AJAX

AJAX, или Аякс в русскоязычном профессиональном сленге, — это аббревиатура от Asynchronous JavaScript and XML, что переводится как «асинхронный JavaScript и XML».

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

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

Прежде всего разберемся в видах запросов браузера к серверу — они бывают синхронные и асинхронные.

При использовании синхронных запросов:

1. пользователь совершает действие на странице, например ставит лайк;
2. браузер отправляет на сервер запрос;
3. сервер его обрабатывает, а затем передает ответ в браузер;
4. в ситуации с синхронными запросами ответ — целиком обновленная страница. Для того чтобы пользователь увидел результат, браузер перезагружает страницу с учетом новых данных.

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

В чем неудобство подхода:

• увеличивается время работы со страницей: после каждого действия нужно ждать перезагрузки;
• большая нагрузка на сервер — а значит, он выдерживает меньше единовременных запросов;
• пониженная отзывчивость сервера из-за большого объема передаваемых данных.

Асинхронные запросы позволяют браузеру обмениваться данными с сервером в фоновом режиме:

1. после каждого действия на странице на сервер отправляется точечный запрос;
2. сервер обрабатывает его и дает ответ в виде нужного фрагмента обновленных данных;
3. фрагмент добавляется на страницу без перезагрузки. Например, подгружаются новые записи в ленте новостей.

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

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

В чем преимущества подхода:

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

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

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

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

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

Почтовые онлайн-сервисы — Google, Яндекс, Mail.ru и другие — тоже используют асинхронный обмен данными, благодаря чему только что пришедшие письма отображаются моментально. Также за счет AJAX они позволяют сохранять черновики писем и сворачивать окно с недописанным письмом — например, чтобы уточнить информацию в более ранней переписке.

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

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

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

Подход использует несколько технологий, которые реализуют асинхронное взаимодействие браузера с сервером:

• JavaScript. Это язык программирования, с помощью которого можно обратиться к каждому отдельному объекту на странице, чтобы поменять его содержимое или свойства. В AJAX JavaScript используется для создания запросов, отправки их на сервер, получения и обработки ответа и обновления элементов страницы.
• XMLHttpRequest. Этот объект — основа AJAX, именно он отвечает за запросы HTTP или HTTPS к серверу и добавление данных ответа сервера на страницу без перезагрузки. XMLHttpRequest доступен на JS и поддерживается большинством современных браузеров, поэтому используется многими сайтами для создания динамичных приложений.
• XML. Это язык разметки, он используется для хранения и передачи данных. XML — один из основных форматов, но не единственный, и ответ от сервера может прийти также в текстовом формате, в виде объекта HTML или JSON.
• DOM. Это сокращение от Document Object Model, что означает «объектная модель документа». Такая модель содержит все элементы страницы, связи и взаимодействия между ними, их свойства и реакции на действия пользователя. Благодаря этой структуре к каждому отдельному объекту можно обратиться через JS, что и используется в AJAX.

Подведем итог: что такое AJAX? Это подход, который реализуется на языке JavaScript через объект XMLHttpRequest и обеспечивает асинхронный обмен данными между браузером и сервером. XMLHttpRequest отправляет запросы к серверу в формате HTTP или HTTPS, получает от него ответ в формате XML, HTML, JSON или другом и добавляет новые данные на страницу. Работает с отдельными объектами DOM, поэтому новую информацию подгружает в фоновом режиме, без перезагрузки страницы.

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

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

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

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

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

Во всех этих случаях возникают проблемы с ранжированием, что негативно влияет на SEO: поисковые системы могут скрывать такие страницы из выдачи как нерелевантные.

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

Разработка любой сложности под ключ

• Индивидуальная разработка и оптимизация сайтов, интернет-магазинов, мобильных приложений, корпоративных платформ, баз данных.
• Готовая команда разработчиков на аутсорсе для создания кастомизированных программных решений.
• Разработка на JavaScript, Python, PHP с использованием фреймворков Vue. js, Angular, Laravel, Django, Express. js и других.

Получить бесплатную консультацию