Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>5 июн 2025</li>

3 <li>0</li>

4 </ul>Учимся перерисовывать интерфейсы без единой перезагрузки.

5 Иллюстрация: Polina Vari для Skillbox Media

6 Техник-программист, помогает IT-компаниям говорить просто о сложных вещах. Коммерческий редактор, автор статей для "Хабра" и технических сайтов.

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

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

9 Содержание

10 <ul><li><a>Что такое AJAX и как он появился</a></li>

11 <li><a>Как работает AJAX</a></li>

12 <li><a>Инструменты для работы с AJAX</a></li>

13 <li><a>Отправляем примеры AJAX-запросов</a></li>

14 <li><a>Что дальше</a></li>

15 </ul>AJAX - это технология, которая позволяет обновлять данные на веб-странице без её полной перезагрузки. С помощью AJAX браузер может отправлять запросы на сервер и получать новые данные в фоновом режиме, делая сайты более быстрыми и удобными для пользователей.

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

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

18 AJAX впервые появился в 1999 году, когда разработчики Microsoft внедрили его в<a>Internet Explorer 5.0</a>под названием<a>XMLHttpRequest</a>. На тот момент технология позволяла выполнять простые задачи - например, мгновенно проверять доступность email-адреса во время заполнения формы регистрации. А вот сам термин "AJAX" получил распространение только в 2005 году, после публикации статьи UX-дизайнера Джесси Гарретта "<a>Ajax: A New Approach to Web Applications</a>".

19 AJAX (произносится как "эйджакс") - аббревиатура от Asynchronous JavaScript And XML, что в переводе означает "асинхронный JavaScript и XML". Вот как Джесси Гарретт объясняет введённый им термин:

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

21 <ul><li>стандартизированное представление с использованием XHTML и CSS;</li>

22 <li>динамическое отображение и взаимодействие с использованием объектной модели документа;</li>

23 <li>обмен данными и манипулирование ими с использованием XML и XSLT;</li>

24 <li>асинхронный поиск данных с использованием XMLHttpRequest;</li>

25 <li>JavaScript, связывающий всё воедино.</li>

26 </ul>Схема из статьи Джесси Гарретта, на которой показана разница между классической моделью веб-приложений и моделью на AJAX.В верхней части изображена классическая схема: каждое действие пользователя отправляет запрос на сервер. Ответ приходит после обработки данных - и только тогда обновляется интерфейс. Пока сервер занят, пользователь вынужден ждать - сайт словно "замирает".В нижней части показана асинхронная модель: между интерфейсом и сервером работает промежуточный слой - AJAX-движок. Он перехватывает действия пользователя и самостоятельно определяет моменты обращения к серверу. Благодаря этому интерфейс работает без пауз и перезагрузок, а данные загружаются в фоновом режиме.Изображение:<a>Jesse James Garrett</a>/<a>Adaptive Path</a>До появления асинхронных технологий веб-приложения работали медленно и неудобно. Например, в старых интернет-магазинах, чтобы отфильтровать товары, нужно было нажать кнопку Применить. После этого страница полностью перезагружалась: сбивались настройки фильтров, сбрасывалась прокрутка и приходилось ждать, пока всё загрузится заново. Браузер отправлял запрос на сервер и получал в ответ совсем новую HTML-страницу со всем её содержимым и оформлением.

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

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

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

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

31 Схема из статьи Джесси Гарретта, которая показывает, как устроен обмен данными в классической модели и при использовании AJAX.Слева - традиционный подход. При каждом действии пользователя браузер отправляет HTTP-запрос и получает в ответ полностью готовую HTML-страницу. Интерфейс и данные поступают единым "пакетом".Справа - модель AJAX. Интерфейс уже загружен, а JavaScript отправляет фоновые запросы к серверу через встроенный AJAX-движок. В ответ сервер возвращает только необходимые данные в формате JSON или XML - вместо полной HTML-страницы. Эти данные подставляются прямо в интерфейс, и страница обновляется без полной перезагрузки.Изображение:<a>Jesse James Garrett</a>/<a>Adaptive Path</a>В основе технологии AJAX лежит объект XMLHttpRequest (XHR) - специальный API браузера, который выступает посредником между JavaScript-кодом на странице и сервером. Именно он позволяет отправлять и получать данные в фоновом режиме, не прерывая работу интерфейса. Пока выполняется XHR-запрос, вы можете продолжать взаимодействовать с сайтом - в этом и заключается асинхронность.

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

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

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

35 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(); // Отправляем запрос<a>jQuery</a>долгое время считалась одной из самых популярных библиотек для работы с AJAX. Она появилась во времена несовместимых браузеров и значительно упростила работу разработчикам, предоставив единый интерфейс для взаимодействия с DOM и асинхронными запросами.

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

37 $.ajax({ url: 'https://api.example.com/data', // Добавляем адрес запроса method: 'GET', // Указываем тип запроса success: function (data) { // Сообщаем, что делать с полученными данными console.log(data); } });<a>Fetch API</a> - современный встроенный инструмент для отправки AJAX-запросов. Он входит в стандарт JavaScript и не требует подключения внешних библиотек, поэтому отлично подходит для новых проектов.

38 В отличие от XMLHttpRequest, Fetch использует<a>промисы</a> - специальные объекты для работы с асинхронным кодом. Промисы позволяют избежать сложной вложенности функций обратного вызова (колбэков), при которой код становится трудным для чтения.

39 Примерно так выглядит нагромождение кода с колбэками:

40 callback1(() => { callback2(() => { callback3(); }); });А так этот же код выглядит с промисами:

41 doSomething() .then(doNext) .then(doFinal);Используем Fetch для нашего GET-запроса:

42 fetch('https://api.example.com/data') // Отправляем GET-запрос .then(response => response.json()) // Превращаем ответ в объект JavaScript (если он пришёл в формате JSON) .then(data => console.log(data)); // Выводим полученные данные<a>Axios</a> - современный инструмент для отправки запросов к серверу на основе промисов. Он работает как в браузере, так и в среде <a>Node.js</a>. По сравнению с Fetch API, Axios предлагает больше функций: например, автоматическую конвертацию JSON-данных, встроенную защиту от XSRF-атак и удобную систему обработки ошибок через перехватчики:

43 axios.get('https://api.example.com/data') // Отправляем GET-запрос .then(response => console.log(response.data)); // Сразу получаем данные в нужном видеЧтобы лучше понять работу AJAX, давайте рассмотрим несколько простых примеров. В качестве инструмента мы будем использовать <a>JSONPlaceholder</a> - бесплатный тестовый API, который разработан специально для обучения. Он позволяет отправлять и получать фейковые данные, имитируя таким образом поведение настоящего сервера.

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

45 fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(data => console.log(data));В ответ сервер вернёт вам массив из 100 ненастоящих постов:

46 Скриншот:<a>JSONPlaceholder</a>/ Skillbox MediaА теперь для сравнения вы можете вставить немного изменённый код и получить в ответ только один отдельный пост:

47 fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.json()) .then(data => console.log(data));Подобным образом можно выполнять и другие запросы: получать список пользователей, комментарии, создавать новые записи или обновлять существующие. Например, с помощью тестового POST-запроса можно отправить фейковый пост - сервер имитирует его сохранение и вернёт объект с уникальным id, временем создания записи и статусом операции. Другие примеры доступных маршрутов (эндпоинтов) и форматов запросов вы найдёте в <a>документации JSONPlaceholder</a>.

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

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

50 <ul><li>"<a>Как конвертировать HTML-документ в JSON: пишем рабочую программу на JavaScript</a>" - этот материал познакомит вас с форматом JSON, который чаще всего используется в AJAX-запросах.</li>

51 <li>"<a>Создаем чат для сайта: HTML, JS, PHP и AJAX</a>" - здесь вы создадите простой чат с обменом сообщениями без перезагрузки страницы.</li>

52 <li>"<a>Загрузка файлов на сайт: PHP, AJAX, HTML5 и Drag’n’Drop</a>" - в этой статье вы узнаете, как создать форму загрузки файлов с функцией drag-and-drop и отправкой через AJAX, а также как обрабатывать загруженные данные на стороне сервера с помощью PHP.</li>

53 </ul>Если во время работы над проектами у вас возникнут сложности - предлагаем несколько полезных ресурсов и инструментов:

54 <ul><li><a>MDN Web Docs: AJAX</a> - вводная статья по работе с AJAX от Mozilla с понятными примерами и подробным объяснением основ.</li>

55 <li><a>Ajax | jQuery API Documentation</a> - официальная документация по AJAX-методам в jQuery с примерами использования.</li>

56 <li><a>Axios Docs</a> - официальная документация по работе с Axios на русском языке с примерами и описанием всех возможностей библиотеки.</li>

57 <li><a>Public APIs</a> - огромный список бесплатных публичных API, с которыми можно тренироваться в работе с сетевыми запросами.</li>

58 <li><a>HTTPbin</a> - сервис для тестирования HTTP-запросов с поддержкой различных методов и форматов данных.</li>

59 <li><a>Postman</a> - популярный инструмент для тестирования API с графическим интерфейсом. С его помощью вы можете создавать и отправлять HTTP-запросы, автоматизировать тестирование, а также организовывать запросы в коллекции и делиться ими с командой.</li>

60 <li><a>JSON Server</a> - удобный инструмент для быстрого создания тестового REST API на основе JSON-файла. Можно использовать для прототипирования и тестирования веб-приложений.</li>

61 </ul><a>Курс с трудоустройством: "Профессия Разработчик + ИИ" Узнать о курсе</a>