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

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

Для использования библиотеки необходимо подключить jQuery, после чего подключается сам скрипт Featherlight:

<link href="featherlight.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="featherlight.min.js"></script>

Инициализация осуществляется вызовом метода .featherlight() на элементе триггера:

$('#openModal').featherlight({
    content: '<p>Пример содержимого модального окна</p>'
});

Опции и методы позволяют управлять поведением модального окна, включая custom HTML, AJAX-загрузку и callback-функции.

Работа с AJAX в Featherlight

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

$('#openAjax').featherlight({
    ajax: '/path/to/content.html'
});

При вызове с опцией ajax библиотека автоматически выполнит GET-запрос к указанному URL и вставит полученный HTML в модальное окно.

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

  • ajaxSettings — объект с настройками jQuery AJAX (type, data, dataType, headers).
  • beforeOpen — callback перед открытием модального окна.
  • afterContent — callback после вставки содержимого, но до отображения окна.
  • afterOpen — callback после полного открытия окна.

Пример расширенной настройки AJAX-запроса:

$('#openAjaxAdvanced').featherlight({
    ajax: '/path/to/content.html',
    ajaxSettings: {
        type: 'POST',
        data: { id: 123 },
        dataType: 'html'
    },
    beforeOpen: function(event) {
        console.log('Модальное окно готовится к открытию');
    },
    afterContent: function(event) {
        console.log('Контент успешно загружен');
    }
});

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

Featherlight позволяет обрабатывать ошибки AJAX через встроенные callback и события jQuery. Основные сценарии:

  1. Ошибки сети или сервера — если запрос возвращает HTTP-статус 4xx или 5xx.
  2. Неверный формат данных — если сервер возвращает данные, которые не соответствуют ожидаемому dataType.

Для обработки ошибок используется стандартная функция ajaxSettings.error, либо глобальные обработчики jQuery AJAX:

$('#openAjaxWithError').featherlight({
    ajax: '/path/to/nonexistent.html',
    ajaxSettings: {
        error: function(jqXHR, textStatus, errorThrown) {
            alert('Произошла ошибка: ' + textStatus + ' — ' + errorThrown);
        }
    }
});

Особенности:

  • jqXHR — объект запроса, содержащий статус, заголовки и тело ответа.
  • textStatus — строковое описание ошибки (timeout, error, abort, parsererror).
  • errorThrown — объект ошибки, возвращённый сервером.

Можно дополнительно использовать beforeOpen или afterContent, чтобы отображать кастомные сообщения внутри модального окна:

$('#openAjaxCustomError').featherlight({
    ajax: '/path/to/content.html',
    ajaxSettings: {
        error: function(jqXHR) {
            this.$content.html('<p>Не удалось загрузить данные: ' + jqXHR.status + '</p>');
        }
    }
});

Подключение индикатора загрузки

Featherlight поддерживает кастомные индикаторы загрузки через CSS или вставку HTML:

$.featherlight.defaults.loading = '<div class="spinner">Загрузка...</div>';

Индикатор отображается автоматически при использовании AJAX и скрывается после получения содержимого или при возникновении ошибки.

Дополнительные методы контроля AJAX

  • $.featherlight.current() — возвращает текущий экземпляр открытого модального окна.
  • $.featherlight.close() — закрывает активное окно программно.
  • $.featherlight.open() — открывает окно с новым контентом.

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

Советы по устойчивости

  • Всегда указывать error callback для AJAX-запросов, чтобы избежать пустых модальных окон при сбоях сервера.
  • Для POST-запросов использовать ajaxSettings.type и проверять возвращаемый dataType.
  • Обновлять индикатор загрузки через beforeOpen и afterContent для улучшения UX.
  • Логировать ошибки через console.error или специализированные сервисы мониторинга.

Пример комплексного применения

$('#openComplex').featherlight({
    ajax: '/path/to/content.html',
    ajaxSettings: {
        type: 'POST',
        data: { userId: 42 },
        dataType: 'html',
        error: function(jqXHR) {
            this.$content.html('<p>Ошибка загрузки: ' + jqXHR.status + '</p>');
        }
    },
    beforeOpen: function() {
        this.$content.html('<div class="spinner">Загрузка...</div>');
    },
    afterContent: function() {
        console.log('Контент загружен успешно');
    }
});

Этот подход обеспечивает:

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

Featherlight остаётся лёгким инструментом, позволяя управлять динамическим контентом и интегрировать модальные окна в сложные веб-приложения без дополнительных зависимостей.

Оглавление