Анализ запросов

Unpoly — это JavaScript-библиотека, ориентированная на улучшение пользовательского интерфейса без необходимости полной перезагрузки страниц. Центральная концепция заключается в том, чтобы заменять только определённые части DOM на основе AJAX-запросов, сохраняя состояние страницы и минимизируя перезагрузки. Основной объект библиотеки — up, через который выполняются все действия, связанные с запросами и обновлением интерфейса.

Инициация запросов

Запросы в Unpoly можно инициировать несколькими способами:

  • с помощью HTML-атрибутов (up-target, up-method, up-transition), которые задают поведение ссылок и форм;
  • через прямые вызовы JavaScript-функций up.visit(url, options) для перехода или up.submit(form, options) для отправки форм.

Ключевым моментом является сопоставление запроса с целевым контейнером, куда будет вставлен новый HTML. Контейнер определяется через CSS-селектор в атрибуте up-target или через опцию target в JavaScript.

Типы запросов и методы HTTP

Unpoly поддерживает стандартные методы HTTP: GET, POST, PUT, PATCH, DELETE. Метод можно указать явно через атрибут up-method или через объект options.method при вызове API.

Пример использования Jav * aScript:

up.visit('/users/42', {
  method: 'GET',
  target: '#user-profile',
  transition: 'fade'
});

Запрос GET подгружает HTML с сервера и плавно заменяет содержимое контейнера #user-profile с применением перехода fade.

Обработка ответов

Ответ сервера в Unpoly может быть как чистым HTML, так и JSON, если требуется дополнительная логика. Основная задача библиотеки — определить, какие части DOM нужно обновить.

  • Если сервер возвращает HTML, Unpoly автоматически вставляет его в целевой контейнер.
  • Если требуется выполнить дополнительные действия после загрузки, используется коллбэк up.on('up:content-updated', callback).

Пример:

up.on('up:content-updated', (event) => {
  console.log('Контент обновлён в контейнере:', event.target);
});

event.target указывает контейнер, в который был вставлен новый HTML.

Настройка заголовков и параметров запроса

Каждое посещение или отправка формы сопровождается набором заголовков HTTP. Unpoly добавляет стандартные заголовки:

  • X-Up-Target — идентификатор целевого контейнера;
  • X-Up-Fragment — если обновляется только фрагмент страницы;
  • X-Requested-With: XMLHttpRequest — позволяет серверу определять AJAX-запрос.

Дополнительно можно добавить пользовательские заголовки через опцию headers:

up.visit('/settings', {
  headers: { 'X-CSRF-Token': 'token_value' }
});

Параметры запроса можно передавать через data, что позволяет динамически добавлять GET или POST-параметры.

Работа с кэшированием и историей

Unpoly автоматически управляет историей браузера, интегрируясь с pushState. Каждое обновление контейнера может создавать запись в истории, если используется переход. Для полного контроля над историей можно использовать опцию history: false:

up.visit('/notifications', { history: false });

Также поддерживается кэширование запросов. Уникальные URL и параметры позволяют Unpoly хранить результат и использовать его повторно без нового запроса.

События запросов

Unpoly предоставляет широкую систему событий, позволяющую отслеживать жизненный цикл запроса:

  • up:request-start — запрос отправлен;
  • up:request-success — успешный ответ получен;
  • up:request-error — ошибка запроса;
  • up:request-end — завершение запроса, независимо от результата.

Пример подписки:

up.on('up:request-error', (event) => {
  alert(`Ошибка запроса: ${event.xhr.status}`);
});

События полезны для логирования, показа индикаторов загрузки или обработки ошибок без перезагрузки страницы.

Манипуляции с целевыми контейнерами

Целевой контейнер — ключевой элемент при работе с Unpoly. Можно указывать несколько контейнеров, передавая массив селекторов, или динамически определять контейнер через коллбэки target:

up.visit('/messages', {
  target: () => document.querySelector('#chat-window')
});

Unpoly умеет делать частичное обновление DOM, оставляя скрипты, слушатели и состояния интерактивных элементов нетронутыми, что делает библиотеку особенно удобной для сложных SPA-подобных интерфейсов.

Работа с формами

Для форм доступен метод up.submit(form, options), который автоматически сериализует данные и отправляет их на сервер. Важные возможности:

  • Поддержка enctype="multipart/form-data";
  • Возможность использовать AJAX даже с кнопками submit;
  • Автоматическое отображение ошибок валидации, если сервер возвращает HTML с полями форм.

Пример:

const form = document.querySelector('#edit-profile');
up.submit(form, {
  target: '#profile-container',
  transition: 'slide'
});

Управление переходами

Переходы (transitions) — это визуальные эффекты замены контента. Unpoly поддерживает встроенные переходы (fade, slide, cross-fade) и позволяет создавать кастомные через CSS. Переход задаётся через up-transition или опцию transition в JavaScript.

up.visit('/dashboard', { transition: 'cross-fade' });

Важный момент: transitions применяются только к контейнеру, не затрагивая остальную страницу. Это снижает нагрузку на браузер и сохраняет интерактивность элементов.

Эти механизмы делают Unpoly мощным инструментом для создания динамических веб-приложений без полной перезагрузки страниц, с точным контролем запросов, обновлений и визуальных эффектов.

Оглавление