Учимся перерисовывать интерфейсы без единой перезагрузки.
Раньше при клике по ссылке страница полностью перезагружалась: экран на мгновение становился белым, сбрасывалось положение прокрутки, и пользователь ждал, пока загрузится новый контент. Теперь всё происходит плавно, без мерцания и полной перезагрузки. Это стало возможным благодаря развитию асинхронных технологий, которые позволяют обмениваться данными с сервером в фоновом режиме.
В этой статье мы познакомимся с одной из таких технологий, которая называется AJAX. Вы узнаете, что это такое и как она помогает создавать интерактивные веб-приложения. Материал рассчитан на фронтендеров, которые изучают JavaScript и только знакомятся с асинхронностью.
Что такое AJAX и как он появился
AJAX — это технология, которая позволяет обновлять данные на веб-странице без её полной перезагрузки. С помощью AJAX браузер может отправлять запросы на сервер и получать новые данные в фоновом режиме, делая сайты более быстрыми и удобными для пользователей.
Чтобы было понятно, представьте кнопку Лайк в любой соцсети. Когда вы на неё нажимаете, браузер с помощью AJAX отправляет запрос на сервер, чтобы зафиксировать лайк и получить обновлённое число. Сервер обрабатывает запрос и возвращает новое значение счётчика. При этом изменяется только цифра — сама страница не перезагружается.
Точно так же работают и другие интерактивные элементы сайта. Когда вы добавляете товар в корзину, оставляете комментарий, применяете фильтры в каталоге интернет-магазина или подгружаете новые посты при прокрутке ленты — всё это выполняется с помощью AJAX-запросов.
AJAX впервые появился в 1999 году, когда разработчики Microsoft внедрили его в Internet Explorer 5.0 под названием XMLHttpRequest. На тот момент технология позволяла выполнять простые задачи — например, мгновенно проверять доступность email-адреса во время заполнения формы регистрации. А вот сам термин «AJAX» получил распространение только в 2005 году, после публикации статьи UX-дизайнера Джесси Гарретта «Ajax: A New Approach to Web Applications».
AJAX (произносится как «эйджакс») — аббревиатура от Asynchronous JavaScript And XML, что в переводе означает «асинхронный JavaScript и XML». Вот как Джесси Гарретт объясняет введённый им термин:
AJAX — это не технология. На самом деле это несколько технологий, каждая из которых процветает сама по себе, объединяясь в новые мощные способы. AJAX включает в себя:
- стандартизированное представление с использованием XHTML и CSS;
- динамическое отображение и взаимодействие с использованием объектной модели документа;
- обмен данными и манипулирование ими с использованием XML и XSLT;
- асинхронный поиск данных с использованием XMLHttpRequest;
- JavaScript, связывающий всё воедино.
Схема из статьи Джесси Гарретта, на которой показана разница между классической моделью веб-приложений и моделью на AJAX.
В верхней части изображена классическая схема: каждое действие пользователя отправляет запрос на сервер. Ответ приходит после обработки данных — и только тогда обновляется интерфейс. Пока сервер занят, пользователь вынужден ждать — сайт словно «замирает».
В нижней части показана асинхронная модель: между интерфейсом и сервером работает промежуточный слой — AJAX-движок. Он перехватывает действия пользователя и самостоятельно определяет моменты обращения к серверу. Благодаря этому интерфейс работает без пауз и перезагрузок, а данные загружаются в фоновом режиме.
Изображение: Jesse James Garrett / Adaptive Path
Как работает AJAX
До появления асинхронных технологий веб-приложения работали медленно и неудобно. Например, в старых интернет-магазинах, чтобы отфильтровать товары, нужно было нажать кнопку Применить. После этого страница полностью перезагружалась: сбивались настройки фильтров, сбрасывалась прокрутка, и приходилось ждать, пока всё загрузится заново. Браузер отправлял запрос на сервер и получал в ответ совсем новую HTML-страницу со всем её содержимым и оформлением.
Представьте старое переполненное кафе. Вы подходите к кассе, делаете заказ, оплачиваете — и просто стоите, ожидая, пока его приготовят. Всё это время вы не можете ни искать свободный столик, ни общаться с друзьями. Вы просто стоите и ждёте. Примерно так работали многие сайты в недалёком прошлом: каждое действие тормозило весь процесс.
А вот с появлением AJAX каждый пользователь мог свободно работать с загруженным интерфейсом, пока новые данные загружаются в фоновом режиме. JavaScript в браузере отправляет асинхронный запрос и получает от сервера только ту информацию, которая действительно нужна.
Например, когда вы выбираете параметры в фильтре интернет-магазина (цену, размер, цвет) и нажимаете Применить, браузер отправляет запрос на сервер через AJAX. В ответ приходит только обновлённый список подходящих товаров, который JavaScript сразу показывает на странице. При этом фильтры остаются активными, прокрутка не сбрасывается, и вы можете продолжать взаимодействовать со страницей.
А теперь представьте новое просторное кафе. Вы делаете заказ, получаете номер и занимаетесь своими делами: ищете столик, общаетесь с друзьями, листаете ленту в телефоне. Когда заказ готов, вас просто вызывают по номеру. Взаимодействие не прерывается: всё происходит параллельно, без ожидания и пауз. Так работают современные сайты.
Схема из статьи Джесси Гарретта, которая показывает, как устроен обмен данными в классической модели и при использовании AJAX.
Слева — традиционный подход. При каждом действии пользователя браузер отправляет HTTP-запрос и получает в ответ полностью готовую HTML-страницу. Интерфейс и данные поступают единым «пакетом».
Справа — модель AJAX. Интерфейс уже загружен, а JavaScript отправляет фоновые запросы к серверу через встроенный Ajax-движок. В ответ сервер возвращает только необходимые данные в формате JSON или XML — вместо полной HTML-страницы. Эти данные подставляются прямо в интерфейс, и страница обновляется без полной перезагрузки.
Изображение: Jesse James Garrett / Adaptive Path
Инструменты для работы с AJAX
В основе технологии AJAX лежит объект XMLHttpRequest (XHR) — специальный API браузера, который выступает посредником между JavaScript-кодом на странице и сервером. Именно он позволяет отправлять и получать данные в фоновом режиме, не прерывая работу интерфейса. Пока выполняется XHR-запрос, вы можете продолжать взаимодействовать с сайтом — в этом и заключается асинхронность.
Несмотря на слово XML в названии XMLHttpRequest, современный AJAX поддерживает разные форматы данных — от JSON и HTML-фрагментов до обычного текста и бинарных файлов. Однако чаще всего сервер отвечает в формате JSON: он легче по размеру, JavaScript обрабатывает его быстрее, и по сути он стал стандартом в современных веб-приложениях.
Чтобы упростить работу с AJAX, разработчики создали множество инструментов. Ниже мы рассмотрим основные из них и для наглядности покажем, как с их помощью можно отправить запрос к серверу по адресу https://api.example.com/data. Этот адрес — лишь заглушка, он не работает в реальности. Мы просто сравним синтаксис разных подходов, а протестировать реальные запросы вы сможете уже в следующем разделе.
const xhr = new XMLHttpRequest(); // Создаём объект запроса xhr.open(‘GET’, ‘https://api.example.com/data’); // Указываем метод и адрес запроса xhr.onload = function () { // Добавляем обработчик успешного ответа if (xhr.status === 200) { // Проверяем статус ответа console.log(xhr.responseText); // Выводим полученные данные } }; xhr.send(); // Отправляем запрос
Например, метод $.ajax () предоставляет гибкое управление запросами с более простым и понятным синтаксисом, чем XMLHttpRequest:
$.ajax({ url: ‘https://api.example.com/data’, // Добавляем адрес запроса method: ‘GET’, // Указываем тип запроса success: function (data) { // Сообщаем, что делать с полученными данными console.log(data); } });
В отличие от XMLHttpRequest, Fetch использует промисы — специальные объекты для работы с асинхронным кодом. Промисы позволяют избежать сложной вложенности функций обратного вызова (колбэков), при которой код становится трудным для чтения.
Примерно так выглядит нагромождение кода с колбэками:
callback1(() => { callback2(() => { callback3(); }); });
А так этот же код выглядит с промисами:
doSomething() .then(doNext) .then(doFinal);
Используем Fetch для нашего GET-запроса:
fetch(‘https://api.example.com/data’) // Отправляем GET-запрос .then(response => response.json()) // Превращаем ответ в объект JavaScript (если он пришёл в формате JSON) .then(data => console.log(data)); // Выводим полученные данныеaxios.get(‘https://api.example.com/data’) // Отправляем GET-запрос .then(response => console.log(response.data)); // Сразу получаем данные в нужном виде
Запросы AJAX
Чтобы лучше понять работу AJAX, давайте рассмотрим несколько простых примеров. В качестве инструмента мы будем использовать JSONPlaceholder — бесплатный тестовый API, который разработан специально для обучения. Он позволяет отправлять и получать фейковые данные, имитируя таким образом поведение настоящего сервера.
Перейдите на указанный сайт, откройте консоль и вставьте этот код:
fetch(‘https://jsonplaceholder.typicode.com/posts’) .then(response => response.json()) .then(data => console.log(data));
В ответ сервер вернёт вам массив из 100 ненастоящих постов:
Скриншот: JSONPlaceholder / Skillbox Media
А теперь для сравнения вы можете вставить немного изменённый код и получить в ответ только один отдельный пост:
fetch(‘https://jsonplaceholder.typicode.com/posts/1’) .then(response => response.json()) .then(data => console.log(data));
Подобным образом можно выполнять и другие запросы: получать список пользователей, комментарии, создавать новые записи или обновлять существующие. Например, с помощью тестового POST-запроса можно отправить фейковый пост — сервер имитирует его сохранение и вернёт объект с уникальным id, временем создания записи и статусом операции. Другие примеры доступных маршрутов (эндпоинтов) и форматов запросов вы найдёте в документации JSONPlaceholder.
После освоения базовых примеров переходите к собственным экспериментам. Например, попробуйте получить посты определённого пользователя, создать запись с вашими данными или отфильтровать комментарии по email. Такая практика поможет лучше понять структуру API и подготовиться к работе с AJAX-запросами в реальных проектах.
Что дальше
Теперь, когда вы в общих чертах познакомились с технологией AJAX, можно двигаться дальше. Вот несколько статей, которые помогут вам лучше разобраться в работе с асинхронными запросами:
- «Как конвертировать HTML-документ в JSON: пишем рабочую программу на JavaScript» — этот материал познакомит вас с форматом JSON, который чаще всего используется в AJAX-запросах.
- «Создаем чат для сайта: HTML, JS, PHP и AJAX» — здесь вы создадите простой чат с обменом сообщениями без перезагрузки страницы.
- «Загрузка файлов на сайт: PHP, AJAX, HTML5 и Drag’n’Drop» — в этой статье вы узнаете, как создать форму загрузки файлов с функцией drag-and-drop и отправкой через AJAX, а также как обрабатывать загруженные данные на стороне сервера с помощью PHP.
Если во время работы над проектами у вас возникнут сложности — предлагаем несколько полезных ресурсов и инструментов:
Чтобы открыть консоль разработчика, воспользуйтесь одним из следующих способов:
— Нажмите клавишу F12 (Windows/Linux).
— Нажмите Cmd + Option + I (Mac).
— Щёлкните правой кнопкой мыши на странице и выберите «Просмотреть код» или «Инспектировать».
После открытия панели разработчика откройте вкладку Console («Консоль») — туда нужно вставлять JavaScript-код из этой статьи.