Что такое AJAX
AJAX, или Аякс в русскоязычном профессиональном сленге, — это аббревиатура от Asynchronous JavaScript and XML, что переводится как «асинхронный JavaScript и XML».
Сам по себе AJAX — это не технология, а подход, использующий несколько инструментов для реализации асинхронного обмена данными между браузером и сервером.
В этой статье рассмотрим принципы работы и области применения Аякса, а также преимущества и недостатки этого подхода.
Синхронные и асинхронные запросы
Прежде всего разберемся в видах запросов браузера к серверу — они бывают синхронные и асинхронные.
При использовании синхронных запросов:
- пользователь совершает действие на странице, например ставит лайк;
- браузер отправляет на сервер запрос;
- сервер его обрабатывает, а затем передает ответ в браузер;
- в ситуации с синхронными запросами ответ — целиком обновленная страница. Для того чтобы пользователь увидел результат, браузер перезагружает страницу с учетом новых данных.
Такой подход к обмену данными называется синхронным, так как сервер дает ответ синхронно с загрузкой новой страницы. То есть перезагрузка происходит в ответ на любой запрос — даже на незначительный, например проставление галочки в нужном поле.
В чем неудобство подхода:
- увеличивается время работы со страницей: после каждого действия нужно ждать перезагрузки;
- большая нагрузка на сервер — а значит, он выдерживает меньше единовременных запросов;
- пониженная отзывчивость сервера из-за большого объема передаваемых данных.
Асинхронные запросы позволяют браузеру обмениваться данными с сервером в фоновом режиме:
- после каждого действия на странице на сервер отправляется точечный запрос;
- сервер обрабатывает его и дает ответ в виде нужного фрагмента обновленных данных;
- фрагмент добавляется на страницу без перезагрузки. Например, подгружаются новые записи в ленте новостей.
Подход называется асинхронным, так как новая информация не загружается в виде новой страницы, а добавляется по мере запросов. В результате пользователь может совершать другие действия на странице, пока идет обмен данными между сервером и браузером — работа не прерывается перезагрузкой.
Асинхронный обмен данными реализуется через AJAX: с помощью объектной модели документа и JavaScript он осуществляет динамическое обращение к серверу и обновление отдельных объектов без перезагрузки страницы.
В чем преимущества подхода:
- работа проходит быстрее: результат действий отображается сразу, не нужно каждый раз ждать перезагрузки;
- уменьшение трафика за счет обработки точечных запросов вместо обновления страницы целиком;
- снижение нагрузки на сервер, благодаря чему он может обрабатывать больше запросов.
Для чего используется AJAX
AJAX полезен при работе с web-приложениями, для которых важны интерактивность и отзывчивость. Рассмотрим несколько примеров таких задач.
Проверка и отправка форм
Форма обратной связи на orbitsoft.com
Пользователи часто пользуются веб-формами: заполняют анкеты, формы регистрации или обратной связи, оформляют подписки. С помощью AJAX сайт может сразу проверить, свободен ли выбранный никнейм, в правильном ли формате введен номер телефона или электронный адрес. А после отправки формы пользователь может остаться на той же странице и продолжить читать статью, например.
Если для этой же задачи использовать синхронный обмен данными, то сообщение о занятом никнейме или некорректном формате данных пользователь получит уже после отправки формы — и ему придется заполнять все заново. Если же все заполнено верно, пользователь попадет на страницу подтверждения отправки. Тогда для возвращения на предыдущую страницу придется совершать дополнительные действия.
Чаты и почтовые сервисы
При общении в чатах на сайтах или в соцсетях AJAX помогает отображать разговоры в реальном времени. Когда пользователь пишет сообщение, оно сразу отправляется на сервер и также при помощи AJAX выводится в интерфейс чата на странице собеседника.
Почтовые онлайн-сервисы — Google, Яндекс, Mail.ru и другие — тоже используют асинхронный обмен данными, благодаря чему только что пришедшие письма отображаются моментально. Также за счет AJAX они позволяют сохранять черновики писем и сворачивать окно с недописанным письмом — например, чтобы уточнить информацию в более ранней переписке.
Ленты новостей и онлайн-витрины
Лента в блоге OrbitSoft с автоматической подгрузкой статей
Соцсети, маркетплейсы и онлайн-магазины используют 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 есть и ограничения при реализации подхода. Они связаны именно с динамическим контентом и его обработкой. Рассмотрим эти сложности подробнее.
Необходимость JavaScript в браузере
AJAX требует включенного в браузере JS — именно с его помощью реализуются запросы и получение ответов. Если пользователь отключает JavaScript в браузере или использует программу чтения с экрана, динамический контент ему будет недоступен.
Ошибки из-за нестабильной связи или работы сервера
При нестабильной работе сервера могут возникать ошибки с обработкой запросов: ответы могут пропадать или приходить в неправильном порядке. Если нестабильно интернет-соединение, браузер может не дождаться ответа от сервера или в принципе не сможет отправить запрос. В обоих случаях логика работы нарушится и страницу придется перезагружать, чтобы начать все заново.
Сложность поисковой оптимизации
Поисковые системы не видят контент, который подгружается динамически с помощью AJAX, поэтому он не индексируется — например, списки товаров на страницах категорий. Такой контент не попадет в результаты поиска, так как поисковик не может обнаружить его на сайте.
Также поисковые системы не всегда понимают структуру ссылок — например, если AJAX используется для загрузки разных разделов продуктовой страницы. Если же с помощью AJAX по одной ссылке открываются разные версии страницы в зависимости от локации пользователя, система может определить их как дублированный контент.
Во всех этих случаях возникают проблемы с ранжированием, что негативно влияет на SEO: поисковые системы могут скрывать такие страницы из выдачи как нерелевантные.
Повышенные требования к бэкенду
Для корректной обработки асинхронных запросов необходимо предусмотреть разные ситуации и варианты действий пользователя. Для каждого нужен сценарий: как поведет себя сервер при разных запросах, какие ответы он выдаст, сможет ли обработать несколько запросов подряд в правильном порядке. Такая работа усложняет проект и требует высокой квалификации программистов.