jQuery и AJAX: живые элементы без перезагрузки страницы

Помните, как раньше на многих сайтах работала форма обратной связи? Нажимаешь «Отправить», страница белеет, долго грузится, и в итоге открывается отдельная страница с надписью «Спасибо, ваше сообщение получено». Если в форме была ошибка, приходилось возвращаться назад, а введённые данные часто пропадали. Сейчас такое поведение выглядит архаично: пользователи привыкли, что сайт реагирует мгновенно и не перезагружается по каждому поводу.

За этой «живостью» стоит технология AJAX — способ обмениваться данными с сервером в фоне. А долгое время самым популярным инструментом для её использования была библиотека jQuery. Она до сих пор работает на огромном числе сайтов, включая многие сайты на WordPress и других популярных CMS. В этой статье разберёмся, что это такое, где эти технологии полезны бизнесу, какие у них ограничения и когда стоит выбирать более современные подходы.

Что такое AJAX и зачем он нужен

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

Название исторически расшифровывается как «асинхронный JavaScript и XML», но XML сейчас почти не используется: данные обычно передаются в формате JSON или сразу готовыми кусками HTML. Слово «асинхронный» здесь главное — оно означает, что пользователь может продолжать работать со страницей, пока запрос идёт на сервер и обратно.

Как это выглядит со стороны посетителя

Вы наверняка сталкивались с AJAX десятки раз за день, даже не замечая этого:

• начинаете вводить запрос в поиск, и под строкой появляются подсказки;
• нажимаете «В корзину», и счётчик в шапке меняется с 2 на 3, а страница остаётся на месте;
• прокручиваете каталог вниз, и товары подгружаются сами;
• выбираете фильтр «до 5 000 рублей», и список сразу обновляется;
• ставите оценку статье звёздочками, и голос учитывается без перехода;
• вводите адрес доставки, а система подсказывает варианты улиц.

Всё это — обмен данными с сервером в фоне. Человек не видит самого запроса, он просто получает быстрый отклик.

jQuery: библиотека, которая упростила веб

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

Во-первых, разные браузеры по-разному понимали один и тот же JavaScript-код. То, что работало в одном, ломалось в другом, и разработчикам приходилось писать отдельные варианты кода. jQuery сглаживала эти различия: пишешь один раз — работает везде. Во-вторых, она сильно сокращала код. Задачи, которые требовали десяти строк на «чистом» JavaScript, на jQuery укладывались в одну. В-третьих, вокруг неё выросла огромная экосистема плагинов: слайдеры, галереи, маски ввода, календари, всплывающие окна.

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

jQuery сегодня

Со временем браузеры стали гораздо более единообразными, а сам JavaScript получил встроенные удобные функции для работы с элементами страницы и запросами к серверу. Многое из того, ради чего раньше подключали jQuery, теперь делается стандартными средствами. Поэтому в новых проектах её всё чаще не используют.

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

Где живые элементы приносят деньги

Интерактивность ради интерактивности — плохая идея. Но в ряде мест фоновая подгрузка заметно улучшает пользовательский опыт и напрямую влияет на конверсию.

Формы заявок

Форма, которая отправляется без перезагрузки, показывает ошибки прямо рядом с полем и сохраняет введённые данные, теряет заметно меньше заявок. В одном из наших проектов — сайте небольшой логистической компании, которая возит грузы между Калининградом и материковой Россией, — после переделки формы расчёта на фоновую отправку с мгновенной проверкой полей количество завершённых заявок выросло примерно на 18% за полтора месяца.

Корзина интернет-магазина

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

Фильтры и сортировка каталога

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

Калькуляторы и конфигураторы

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

Бронирование и запись

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

Подводные камни, о которых редко говорят

Фоновая загрузка данных делает сайт удобнее, но при неаккуратной реализации создаёт проблемы, которые не видны сразу.

Поисковая индексация

Если важный контент — описания товаров, отзывы, статьи — подгружается только скриптом после открытия страницы, поисковый робот может его не увидеть. Современные роботы Яндекса и Google умеют выполнять JavaScript, но делают это не всегда, с задержкой и не во всех случаях. Основное содержание страницы должно приходить сразу в HTML, а подгружаться в фоне — только дополнительное.

Бесконечная прокрутка

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

Отсутствие обратной связи

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

Обработка ошибок

Сервер может не ответить, соединение может пропасть, особенно на мобильном интернете в дороге. Если скрипт никак не обрабатывает такую ситуацию, пользователь остаётся в неведении: отправилась заявка или нет. Нужно явное сообщение об ошибке и возможность повторить попытку.

Безопасность

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

jQuery или современный JavaScript: что выбрать

Этот вопрос мы слышим регулярно, и ответ зависит от ситуации.

Сама jQuery весит около 30 килобайт в сжатом виде — это немного по сравнению с одной фотографией. Проблемы со скоростью обычно создаёт не она, а то, что на неё навешано: несколько версий библиотеки на одной странице, устаревшие плагины, скрипты, загружаемые на всех страницах, хотя нужны на одной.

Как заказать интерактивность и не переплатить

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

Полезно заранее продумать ответы на несколько вопросов:

1. Что видит пользователь, пока идёт загрузка?
2. Что он видит, если что-то пошло не так?
3. Должен ли результат сохраняться при обновлении страницы или переходе назад?
4. Должен ли этот контент индексироваться поисковиками?
5. Как элемент работает на телефоне?
6. Куда уходят данные — на почту, в CRM, в 1С?

По нашему опыту, простая фоновая отправка формы с проверкой полей занимает от 3 до 6 часов работы. Фильтр каталога с изменением адреса — от 2 до 5 дней в зависимости от количества параметров и CMS. Сложный конфигуратор с расчётом и сохранением заказа может потребовать две-три недели. Стоимость пропорциональна: от нескольких тысяч рублей за форму до нескольких десятков тысяч за серьёзный инструмент.

Что запомнить

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

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