Урок 3. Что происходит после нажатия кнопки
В «Кружке» вы видите страницы проектов, формы и кнопки. За каждым изменением страницы стоит обмен между браузером и сайтом. В этом уроке разберём один такой обмен от нажатия до результата.
Что отправил браузер
Запустите лабораторию, откройте раздел «Проекты», введите в поиск robot и нажмите «Найти». Страница покажет карточку «Робот-сортировщик».
Самостоятельно искать запрос в DevTools пока не нужно. Ниже находится подготовленная запись именно того обмена, который вызвала форма поиска.
1 — действие поиска; 2 — появившийся запрос; 3 — метод и результат в Headers.
Свяжите поиск с HTTP-обменом
Уровень: базовое закрепление.
В «Кружке» найдите проекты по слову robot, а затем изучите подготовленную карточку HTTP-обмена в уроке.
Заполните отдельные поля под заданием: метод, путь, код ответа, тип содержимого и заголовок проекта. Проверка оценивает каждое наблюдение отдельно.
Первая строка найденного запроса состоит из метода и адреса внутри сайта:
GET /projects?q=robot HTTP/1.1
GET обозначает получение данных, /projects — путь, а q=robot — переданный поисковый параметр.
Одно действие создаёт запрос, сайт возвращает ответ, а браузер обновляет страницу.
Из каких частей состоит ответ
Сайт принимает запрос, находит подходящие проекты и возвращает HTTP-ответ. В нём есть три разные части:
- код состояния сообщает, как обработан запрос;
- заголовок
Content-Typeобъясняет формат данных; - тело содержит сам HTML, из которого браузер строит страницу.
Код 200 сам по себе не содержит карточку проекта. Текст «Робот-сортировщик» находится в теле ответа, а браузер превращает этот HTML в видимый элемент.
Где работают интерфейс, сервер и хранилище
Поле поиска и карточки относятся к клиентской части, или frontend. Серверная часть, или backend, принимает HTTP-запрос и решает, какие данные вернуть. Сведения о проектах лежат в хранилище, к которому обращается сервер.
Браузер обращается к серверу, а сервер читает данные из хранилища.
Изменение HTML в браузере не меняет серверное правило. И наоборот, серверный ответ ещё нужно отобразить, прежде чем пользователь увидит результат.
Почему ответы могут отличаться
Откройте карточку проекта с номером 2, а затем замените номер в адресе на 999. Сравните метод, путь, код состояния и текст страницы.
Сравните существующий и отсутствующий проект
Уровень: базовое закрепление.
Откройте карточку проекта 2, затем замените номер на 999. Здесь «второй ответ» — это ответ сервера именно на запрос /projects/999.
Заполните отдельные поля под заданием. Для значения «не знаю» есть только один честный результат: фактические коды можно указать, но задание не будет завершено, пока не выбраны подтверждённые смысл и основание вывода.
Оба адреса имеют одинаковую форму /projects/{id}. Для существующего номера сайт возвращает карточку. Для отсутствующего номера тот же обработчик сообщает, что объект не найден. Поэтому код ошибки нужно читать вместе с путём и телом ответа.
Где это пригодится на олимпиаде
В задаче «Коллективные документы» для 9 класса на региональном этапе ВсОШ 2025 года участник входил как гость, находил GET /api/messages/{m_id}, читал JSON-ответ и повторял запрос с другим идентификатором (источник: официальный разбор задачи, стр. 1–3). Поиск robot — другой сюжет, но он тренирует тот же первый шаг: связать действие в интерфейсе с методом, путём и ответом сервера.
Вывод
Действие в интерфейсе создаёт HTTP-запрос, а результат определяется не одним кодом состояния: нужно сопоставить метод, путь, параметры, тип и тело ответа. Браузер показывает полученное тело, сервер обрабатывает запрос, а данные берёт из своего хранилища — изменение одной из этих частей не заменяет работу остальных.
Следующий урок разберёт, где браузер размещает значения: в строке запроса, обычном теле формы, JSON или multipart.