Что такое AJAX и как он помогает обновлять контент на странице

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

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

Содержание

• Что такое AJAX и как он появился
• Как работает AJAX
• Инструменты для работы с AJAX
• Отправляем примеры AJAX-запросов
• Что дальше

Что такое 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

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

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

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

Например, когда вы выбираете параметры в фильтре интернет-магазина (цену, размер, цвет) и нажимаете Применить, браузер отправляет запрос на сервер через AJAX. В ответ приходит только обновлённый список подходящих товаров, который JavaScript сразу показывает на странице. При этом фильтры остаются активными, прокрутка не сбрасывается, и вы можете продолжать взаимодействовать со страницей.

А теперь представьте новое просторное кафе. Вы делаете заказ, получаете номер и занимаетесь своими делами: ищете столик, общаетесь с друзьями, листаете ленту в телефоне. Когда заказ готов, вас просто вызывают по номеру. Взаимодействие не прерывается: всё происходит параллельно, без ожидания и пауз. Так работают современные сайты.

Инструменты для работы с AJAX

В основе технологии AJAX лежит объект XMLHttpRequest (XHR) — специальный API браузера, который выступает посредником между JavaScript-кодом на странице и сервером. Именно он позволяет отправлять и получать данные в фоновом режиме, не прерывая работу интерфейса. Пока выполняется XHR-запрос, вы можете продолжать взаимодействовать с сайтом — в этом и заключается асинхронность.

Несмотря на слово XML в названии XMLHttpRequest, современный AJAX поддерживает разные форматы данных — от JSON и HTML-фрагментов до обычного текста и бинарных файлов. Однако чаще всего сервер отвечает в формате JSON: он легче по размеру, JavaScript обрабатывает его быстрее, и по сути он стал стандартом в современных веб-приложениях.

Читайте также:

JSON: что это за формат и как с ним работать

Чтобы упростить работу с AJAX, разработчики создали множество инструментов. Ниже мы рассмотрим основные из них и для наглядности покажем, как с их помощью можно отправить запрос к серверу по адресу https://api.example.com/data. Этот адрес лишь заглушка, он не работает в реальности. Мы просто сравним синтаксис разных подходов, а протестировать реальные запросы вы сможете уже в следующем разделе.

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

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(); // Отправляем запрос

Читайте также:

Что такое XML-формат и где его применяют

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

Например, метод $.ajax() предоставляет гибкое управление запросами с более простым и понятным синтаксисом, чем XMLHttpRequest:

$.ajax({
  url: 'https://api.example.com/data', // Добавляем адрес запроса
  method: 'GET', // Указываем тип запроса
  success: function (data) { // Сообщаем, что делать с полученными данными
    console.log(data);
  }
});

Читайте также:

Библиотека jQuery: что это такое и как её подключить

Fetch API — современный встроенный инструмент для отправки AJAX-запросов. Он входит в стандарт JavaScript и не требует подключения внешних библиотек, поэтому отлично подходит для новых проектов.

В отличие от 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 — современный инструмент для отправки запросов к серверу на основе промисов. Он работает как в браузере, так и в среде Node.js. По сравнению с Fetch API, Axios предлагает больше функций: например, автоматическую конвертацию JSON-данных, встроенную защиту от XSRF-атак и удобную систему обработки ошибок через перехватчики:

axios.get('https://api.example.com/data') // Отправляем GET-запрос
  .then(response => console.log(response.data)); // Сразу получаем данные в нужном виде

Читайте также:

Методы GET и POST в HTTP

Запросы AJAX

Чтобы лучше понять работу AJAX, давайте рассмотрим несколько простых примеров. В качестве инструмента мы будем использовать JSONPlaceholder — бесплатный тестовый API, который разработан специально для обучения. Он позволяет отправлять и получать фейковые данные, имитируя таким образом поведение настоящего сервера.

Перейдите на указанный сайт, откройте консоль и вставьте этот код:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data));

В ответ сервер вернёт вам массив из 100 ненастоящих постов:

А теперь для сравнения вы можете вставить немного изменённый код и получить в ответ только один отдельный пост:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data));

Подобным образом можно выполнять и другие запросы: получать список пользователей, комментарии, создавать новые записи или обновлять существующие. Например, с помощью тестового POST-запроса можно отправить фейковый пост — сервер имитирует его сохранение и вернёт объект с уникальным id, временем создания записи и статусом операции. Другие примеры доступных маршрутов (эндпоинтов) и форматов запросов вы найдёте в документации JSONPlaceholder.

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

Читайте также:

Как разработать идеальный Web API: советы и ошибки на этом пути

Что дальше

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

• «Как конвертировать HTML-документ в JSON: пишем рабочую программу на JavaScript» — этот материал познакомит вас с форматом JSON, который чаще всего используется в AJAX-запросах.
• «Создаем чат для сайта: HTML, JS, PHP и AJAX» — здесь вы создадите простой чат с обменом сообщениями без перезагрузки страницы.
• «Загрузка файлов на сайт: PHP, AJAX, HTML5 и Drag’n’Drop» — в этой статье вы узнаете, как создать форму загрузки файлов с функцией drag-and-drop и отправкой через AJAX, а также как обрабатывать загруженные данные на стороне сервера с помощью PHP.

Если во время работы над проектами у вас возникнут сложности — предлагаем несколько полезных ресурсов и инструментов:

• MDN Web Docs: AJAX — вводная статья по работе с AJAX от Mozilla с понятными примерами и подробным объяснением основ.
• Ajax | jQuery API Documentation — официальная документация по AJAX-методам в jQuery с примерами использования.
• Axios Docs — официальная документация по работе с Axios на русском языке с примерами и описанием всех возможностей библиотеки.
• Public APIs — огромный список бесплатных публичных API, с которыми можно тренироваться в работе с сетевыми запросами.
• HTTPbin — сервис для тестирования HTTP-запросов с поддержкой различных методов и форматов данных.
• Postman — популярный инструмент для тестирования API с графическим интерфейсом. С его помощью вы можете создавать и отправлять HTTP-запросы, автоматизировать тестирование, а также организовывать запросы в коллекции и делиться ими с командой.
• JSON Server — удобный инструмент для быстрого создания тестового REST API на основе JSON-файла. Можно использовать для прототипирования и тестирования веб-приложений.