3.1. Введение

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

Каждый раз, когда пользователь посещает страницу в интернете, компьютер использует протокол передачи гипертекста (HTTP) для загрузки этой страницы с другого компьютера.

В HTTP две роли: клиент и сервер. Клиент отправляет запрос. Сервер обрабатывает его, а потом отвечает на запрос и прерывает соединение. Дальше запросы выполняются при новом соединении, словно предыдущего не существовало.

Сообщения между клиентом и сервером передаются в формате текста, хотя в теле сообщения могут быть фото, аудио, видео или другие форматы. Далее посмотрим упрощённый путь.

Шаг 1. Адреса

Разные типы устройств (ноутбуки, настольные компьютеры, смартфоны) используют приложение браузера. Пользователь вводит в браузере URL — Uniform Resource Locator или «Унифицированный Указатель Ресурса»:

Обратите внимание на этот URL: он начинается с http. Это сигнал браузеру, что ему необходимо использовать протокол HTTP.

Шаг 2. Браузер ищет IP

Домен — это тот же IP-адрес, только написанный в понятном человеку формате. Браузер обращается к DNS и получает IP-адрес:

Шаг 3. Браузер отправляет HTTP-запрос

Как только браузер определил IP-адрес, он отправляет HTTP-запрос:

Заголовки HTTP — основная часть протокола HTTP. Они позволяют клиентам и серверам передавать дополнительную информацию вместе с данными второй стороне. Благодаря этому клиенты и серверы могут правильно получать и обрабатывать данные. Например, заголовки HTTP могут включать информацию о размере (Content-Length) и типе (Content-Type) данных в теле HTTP-сообщения. Заголовки HTTP содержат текстовую информацию в форме ключ-значение и включаются в каждый HTTP-запрос и ответ.

Посмотрим на простой HTTP-запрос:

GET /courses HTTP/1.1
Host: www.htmlacademy.ru

HTTP-запрос — это действие, которое должно быть выполнено над данным ресурсом. Первая строка сообщения HTTP-запроса начинается с имени метода — в данном случае GET. Далее указывается путь: /courses. Сервер хранит содержимое всего веб-приложения, поэтому браузеру необходимо указать, какую страницу загружать. И затем следует версия протокола: HTTP/1.1.

HTTP определяет различные методы запроса, и каждому назначается конкретная цель. Каждый метод запроса определяет отдельное действие, выполняемое над ресурсом: GET — получение ресурса, а POST — отправка.

Во второй строке указывается домен запрошенного URL. Это важно, когда на главном сервере хранится контент для нескольких веб-приложений.

Шаг 4. Хост отправляет ответ HTTP

Как только хост-компьютер получает HTTP-запрос, он отправляет ответ с содержанием и данными о нём.

HTTP-ответ — это то, что клиент получает от сервера в ответ на свой HTTP-запрос. Цель HTTP-ответа — предоставить клиенту запрошенный ресурс или сообщить, что запрошенное действие было успешно выполнено, либо сообщить об ошибке.

Первая строка ответа HTTP начинается с версии протокола, выбранной сервером на основе запроса клиента. Далее идёт код состояния и краткое описание.

Код состояния HTTP представляет собой трёхзначное число, указывающее на состояние HTTP-запроса. Например, 200 означает, что операция была завершена успешно. Подробнее о статусах мы поговорим в одной из следующих частей курса.

Ответы HTTP могут иметь необязательное тело, которое может включать запрошенный ресурс (например, запрошенную веб-страницу) и заголовки HTTP, которые содержат важную информацию о данных (например, их размер и тип).

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 208

Чтобы отобразить эту страницу, браузер сначала отправил запрос на htmlacademy.ru, чтобы получить HTML-документ, а затем ряд запросов на изображения, файлы JavaScript и файлы CSS.

Если серверу не удалось получить документ, коды состояния предоставляют дополнительную информацию. Такое бывает, если сбой произошёл из-за ошибки пользователя или ошибки сервера. Наиболее известный код состояния — 404 («Файл не найден»). Мы сталкиваемся с ним каждый раз, когда клиент запрашивает путь, которого нет на сервере.

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

Указанные ниже заголовки — общие для большинства запросов:

Content-Type: text/html; charset=UTF-8
Content-Length: 208

Первый заголовок, Content-Type, сообщает браузеру, какой тип документа он отправляет обратно. Распространённым типом в интернете является text/html, поскольку все веб-страницы представляют собой текстовые файлы HTML. Также могут встречаться изображения image/png, видео video/mpeg, скрипт script/javascript и другие.

Заголовок Content-length информирует о длине документа в байтах, что помогает браузеру рассчитать время загрузки файла.

Наконец, HTTP-ответ записывает фактический запрошенный документ. К примеру, страница представляет собой простой HTML-файл:

<!DOCTYPE html>
<html>
  <head>
    <title>Курсы HTML Academy</title>
  </head>
  <body>
    <h1>HTML Academy</h1>
    <p>интерактивные онлайн-курсы</p>
  </body>
</html>

Шаг 5. Браузер отображает ответ

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

Посмотрим в браузере

Многие браузеры включают инструменты отладки, которые позволяют просматривать HTTP-запросы и их ответы. Посмотрим на примере Google Chrome.

Откройте инструменты разработчика. Выберите вкладку Network:

Затем введите URL-адрес в строке браузера: http://www.htmlacademy.ru/courses. HTTP-запрос отображается в консоли, и браузер отображает страницу.

Покликайте по разным запросам. Появится интерфейс с вкладками. По умолчанию используется вкладка Headers:

Headers включает в себя различные заголовки, такие как Content-Type и Content-Length, а также множество других.

Фактическое HTML-содержимое ответа — это другая вкладка, Response.

Итак, мы посмотрели содержимое HTTP-запроса и ответа. В следующей статье рассмотрим возможности и недостатки протокола, чтобы понять появление HTTPS, HTTP/2 и HTTP/3.