Простая схема «Как загружается веб-страница с API-запросом к серверу»

Когда пользователь открывает веб-страницу, браузер выполняет несколько этапов, включая загрузку HTML, запросы к API и отрисовку контента. Давайте разберём этот процесс по шагам.

Диаграмма последовательности

1. Пользователь запрашивает страницу

Действие Пользователь вводит URL в браузере или переходит по ссылке.

Что происходит

• Браузер отправляет GET-запрос на веб-сервер (например, GET /index.html).
• Сервер возвращает HTML-документ.

2. Браузер загружает дополнительные данные через API

После получения HTML браузер анализирует его и обнаруживает, что нужны дополнительные данные. Компонент содержит в себе код, в котором он запрашивает даннные (например, список выпусков) используя API-запрос.

Запрос списка выпусков

• Браузер отправляет AJAX-запрос.
• API-сервер, получив запрос, обращается к базе данных, получает данные и возвращает их клиенту в браузер в формате JSON.

AJAX (Asynchronous JavaScript and XML) — это технология, позволяющая браузеру асинхронно обмениваться данными с сервером без перезагрузки страницы. Например, когда вы вводите текст в поисковой строке Google, и подсказки появляются динамически — это работает благодаря AJAX.

JSON (JavaScript Object Notation) — это лёгкий текстовый формат обмена данными между браузером и API-сервером, похожий на структуру объектов JavaScript.
Например, API может отправить данные о пользователе в таком виде:

{ "name": "Иван", "age": 30, "city": "Москва" }

Вместе AJAX и JSON позволяют быстро и удобно загружать и обновлять данные на веб-страницах.

3. Отрисовка страницы

• Когда все данные получены, браузер рендерит страницу.
• Пользователь видит полностью загруженный интерфейс.

4. Альтернативные сценарии

✅ Успешная загрузка Это когда сервер отдал код 200 OK и JSON с данными

⚠️ Данные в кэше (304 Not Modified) Это когда сервер отдал код 304 Not Modified

❌ Ошибка сервера (500 Internal Error) Это когда сервер вернул код 500

Вывод

1. Браузер сначала загружает HTML с сервера.
2. Затем делает API-запросы для динамических данных.
3. После получения всех данных отрисовывает страницу.

Такой подход позволяет быстро показывать пользователю основную структуру страницы, а затем дополнять её актуальными данными из API.