Практическая работа №14

AJAX-интерактивность с использованием Fetch API

Цель работы:

изучить принцип работы AJAX-запросов;
реализовать обмен данными между JavaScript, PHP и MySQL;
настроить JSON-ответы на стороне PHP;
добавить минимум три действия без полной перезагрузки страницы;

Основные теоретические положения

Что такое AJAX?

AJAX позволяет странице обмениваться данными с сервером без полной перезагрузки.

Что такое Fetch API?

fetch('/api/search.php?q=test')
    .then(response => response.json())
    .then(data => console.log(data));

Общая схема

JavaScript → Fetch API → PHP → MySQL → JSON → обновление интерфейса

Производственная ситуация

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

Основные требования к практической работе

В рамках практической работы необходимо:

Реализовать минимум 3 ajax-действия.
Использовать fetch api.
Создать php-обработчики для ajax.
Возвращать json-ответы.
Обновлять интерфейс без полной перезагрузки.
Обрабатывать ошибки.
Дать пользователю визуальную обратную связь.

Задания для выполнения

Задание 1. Выбор AJAX-действий

Выберите минимум 3 действия: поиск, фильтрация, проверка email, отправка формы, удаление объекта, изменение статуса.

Задание 2. Папка API

Создайте /public/api и разместите там PHP-обработчики.

Задание 3. JSON-ответы

Используйте функцию jsonResponse() или аналогичный код для возврата JSON.

Задание 4. AJAX-поиск или фильтрация

Реализуйте поиск или фильтрацию объектов каталога без перезагрузки страницы.

Задание 5. AJAX-отправка формы

Реализуйте отправку формы основного действия через fetch и FormData.

Задание 6. AJAX-изменение статуса

В административной панели реализуйте изменение статуса без полной перезагрузки страницы.

Задание 7. Обработка ошибок

Обработайте пустые поля, недостаток прав, неавторизованного пользователя, объект не найден.

Задание 8. Визуальная обратная связь

Добавьте сообщение об успехе/ошибке, индикатор загрузки, отключение кнопки на время отправки.

Задание 9. Проверка

Убедитесь, что страница не перезагружается, данные сохраняются, JSON корректный.

Задание 10. Коммит результатов

Выполните коммит с сообщением add ajax interactions with fetch api.

Требования к результату

К завершению практической работы должны быть подготовлены:

минимум 3 AJAX-действия;
JavaScript-код с Fetch API;
PHP-обработчики;
JSON-ответы;
обновление интерфейса без перезагрузки;
обработка ошибок;
визуальная обратная связь;

Контрольные вопросы

Что такое AJAX?
Для чего используется Fetch API?
Что такое JSON?
Почему AJAX улучшает пользовательский опыт?
Какие ошибки нужно обрабатывать при AJAX-запросах?