Что происходит при выполнении HTTP-запросов в браузере? Протокол HTTP ...

Программирование, разработка, тестирование

→

HTTP протокол (для web страниц), FTP/FTPS протокол (для передачи файлов), TCP протокол (для соединения между компьютерами), IP-адрес ...

→

Что происходит при выполнении HTTP-запросов в браузере? Протокол HTTP ...

Посмотрели 8580 раз(а)

Что происходит при выполнении HTTP-запросов в браузере? Протокол HTTP ...

последнее обновление: 16 июня 2020

Когда мы вводим URL-адрес в адресной строке Google Chrome и нажали кнопку Enter

Например вводим адрес сайта https://dir.by и нажали кнопку Enter
тогда браузер Google Chrome выполняет запросы к серверам с использованием протокола HTTP/1.1.

Шаг 1. DNS Lookup
то есть браузер ищет IP-адрес сервера

Браузер ищет IP-адрес сервера (IP-адрес компьютера где находится сайт с доменным именем dir.by):

a) Чтобы выяснить IP-адрес сервера, браузер заглядывает в локальный DNS-кэш.
В браузере Google Chrome, есть удобный способ посмотреть локальный DNS-кэш, введя в адресной строке: chrome://net-internals/#dns

b) Если в локальном DNS-кэше нет, то браузер использует системный вызов функции gethostbyname
для того, чтобы узнать IP-адрес сервера

Функция gethostbyname чтобы узнать IP-адрес сервера

1) проверяет файл hosts, который в Windows можно найти по адресу: C:/Windows/System32/drivers/etc/hosts.

2) Если в файле hosts нет сведений об IP-адреса сервера то, система выполняет запрос к DNS-серверу.
Запрос к DNS-серверу выполняется с использованием UDP протокола.

Вот DNS-сервера:
8.8.8.8 DNS-сервер Google
1.1.1.1 DNS-сервер CloudFlare

Адреса DNS-серверов хранятся в настройках системы.

3) Если DNS-сервер не нашел, то он обратится к корневому DNS-серверу.
Система корневых DNS-серверов состоит из 13 серверов, от которых зависит работа всего интернета.
Надо отметить, что корневому DNS-серверу неизвестны соответствия между всеми существующими в мире доменными именами и IP-адресами.
Корневому DNS-серверу известны адреса DNS-серверов верхнего уровня для таких доменов, как: .com, .it, .pizza, и так далее.

4) Корневой DNS-сервер направляет запрос к DNS-серверу домена верхнего уровня это так называемый TLD-сервер (Top-Level Domain).
У TLD-серверов есть IP-адреса NS серверов (Name Server).

5) NS сервер (Name Server) может узнать IP-адрес по URL.
Откуда NS-сервера берут эти сведения?
Дело в том, что если вы покупаете домен, доменный регистратор отправляет: IP-адрес, имя домена к NS-серверу.

Шаг 2.
Установление TCP-соединения

В прошлом шаге был найден IP-адрес сервера
Теперь клиент инициирует процедуру TCP-подключения к серверу по IP-адресу сервера.

В процессе установления TCP-соединения клиент и сервер передают друг другу некоторые служебные данные.

После установления TCP-соединения клиент сможет отправить запрос серверу.

Шаг 3.
после установленного соединения клиент отправляет запрос к серверу

Запрос к серверу это структурированный текст из трёх частей:
• Строка запроса
• Заголовок запроса
• Тело запроса

То есть запрос к серверу это формат HTTP протокола.

Строка запроса представляет собой одну текстовую строку, в которой содержатся следующие сведения:
• Метод HTTP
• Адрес ресурса
• Версия протокола

Пример строки запроса: GET / HTTP/1.1

Заголовок запроса представлен набором пар вида поле: значение.

Существуют 2 обязательных поля заголовка:
• Host
• Connection

Остальные поля необязательны.

Заголовок может выглядеть так:
Host: dir.by
Connection: close

Поле Host указывает на доменное имя, которое интересует браузер.

Поле Connection установленное в значение close, означает, что соединение между клиентом и сервером держать открытым не нужно.

Среди других часто используемых заголовков запросов можно отметить следующие:
• Origin
• Accept
• Accept-Encoding
• Cookie
• Cache-Control
• Dnt

На самом деле, их существует гораздо больше.

Заголовок запроса завершается пустой строкой.

Тело запроса необязательно, в GET-запросах оно не используется.

Тело запроса используется в POST-запросах, а также в других запросах. Оно может содержать, например, данные в формате JSON.

Так как сейчас речь идёт о GET-запросе, тело запроса будет пустым.

Шаг 4.
сервер отправляет ответ клиенту

После того, как сервер получает запрос от клиента, сервер обрабатывает запрос и сервер отправляет клиенту ответ.

Ответ начинается с кода состояния и с соответствующего сообщения.
Если запрос выполнен успешно, то начало ответа будет выглядеть так:
200 OK

Если что-то пошло не так, тут могут быть и другие коды.
Например, следующие:
● 404 Not Found
● 403 Forbidden
● 301 Moved Permanently
● 500 Internal Server Error
● 304 Not Modified
● 401 Unauthorized

Далее в ответе содержится:
• HTTP-заголовок
• тело ответа (HTML-код)

Шаг 5.
разбор HTML-кода

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

На заметку!
Когда браузер загружает страницу и страница содержит следующие ресурсы:
• CSS-файлы.
• Изображения.
• Значок веб-страницы (favicon).
• JavaScript-файлы.
Браузер при загрузке страницы повторяет вышеописанный процесс (шаг1, шаг2, шаг 3, шаг 4, шаг 5) для каждого такого ресурса.

Вывод: запрос к серверу и получение данных используется не только для HTML-кода, но и для изображения и других вышеуказанных объектов (CSS-файлы, изображения, значок веб-страницы (favicon), JavaScript-файлы).

Пример. Смотрим в Google Chrome какие ресурсы грузятся при загрузке страницы

Когда мы загружаем страницу например: https://dir.by/developer
чтобы увидеть какие ресурсные файлы грузятся нужно в Google Chrome браузере нажать на:

→ More tools → Developer tools
выбрать вкладку Network

и увидим что грузятся:

js файлы

https://dir.by/images_css_js/jquery/jquery/jquery-1.7.2.min.js
https://dir.by/images_css_js/jquery/jquery.easing.1.3.js
https://dir.by/images_css_js/jquery/jquery.fancybox-1.2.1.pack.js
...

картинки

https://dir.by/images_css_js/images/login/enter.png
https://dir.by/images_css_js/images/login/new_user.gif
https://dir.by/images_css_js/images/find.png
https://dir.by/images_css_js/images/find.png
...

css стили

https://dir.by/images_css_js/css/text.css
...

Смотрим в Google Chrome: запрос серверу и ответ от сервера

Нажимаем левой клавишей мыши под колонкой Name на developer/

Видим:

Response Headers это запрос серверу

Request Headers это ответ от сервера

HTTP/1.1 200 OK
Server: nginx/1.18.0
Date: Mon, 15 Jun 2020 10:46:21 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: PHP/5.3.29
Content-Encoding: gzip

GET /developer/ HTTP/1.1
Host: dir.by
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*; q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,ru;q=0.8
Cookie: _ga=GA1.2.1072153314.1590154613; _ym_d=1590156845; _ym_uid=1590156845247264617; _ym_isad=2; _ym_visorc_49335463=w; _ym_visorc_567924=w

На заметку! PUT, DELETE и POST запросы

Выполнение PUT-запросов и DELETE-запросов выглядит так же, как и выполнение POST-запросов.
Главное отличие, помимо смыслового наполнения таких операций, заключается в значении свойства method объекта options.

← Предыдущая тема
TCP протокол

Следующая тема →
FTP / FTPS протокол. Создаем локальный FTPS сервер используя Docker. Пишем программу на c# чтения файлов из FTPS сервера

Ваши Отзывы ... комментарии ...

Объявления

• Что такое IP адрес компьютера?

• Что такое URL адрес ?

Схема протоколов

• Сетевая модель OSI 7 уровней: физический, канальный, сетевой, транспортный, сеансовый, представления, прикладной

TCP протокол

• TCP протокол

HTTP / HTTPS протокол

• Что происходит при выполнении HTTP-запросов в браузере? Протокол HTTP ...

FTP / FTPS протокол

• FTP / FTPS протокол. Создаем локальный FTPS сервер используя Docker. Пишем программу на c# чтения файлов из FTPS сервера