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

Принципы взаимодействия клиента и сервера в вебе

HTTP‑протокол

Принципы взаимодействия клиента и сервера в вебе

Веб работает в архитектуре клиент‑сервер. С одной стороны веб‑сервер, с другой — клиент: браузер, программа или даже другой веб‑сервер. Клиент и веб‑сервер понимают друг друга с помощью протокола HTTP (Hypertext Transfer Protocol) — специального языка и набора правил. Поэтому в адресной строке мы видим используемый протокол — http:// или его безопасную зашифрованную версию https://

Когда мы открываем сайт в браузере, браузер посылает запрос, буквально пишет серверу «Дай мне страницу index.html» или «Дай мне cat.jpg»:

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome

Здесь GET — это метод запроса, /index.html — путь к тому, что мы запрашиваем, а HTTP/1.1 — версия протокола. Дальше идут заголовки — набор строк в формате ключ: значение. Это дополнительная информация, которая помогает серверу узнать больше о клиенте и его запросе.

Сервер на это отвечает «Вот страница, держи» или «Вот cat.jpg»:

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
  ...
</html>

200 — это код, статус ответа. Браузеры опираются на эти коды, чтобы понять ответ сервера и решить, что делать дальше:

Коды в интервале от 200 до 299 — это ок, всё хорошо, можно показать пользователю.

Коды в интервале от 300 до 399 — это перенаправления, редиректы, указание браузеру перейти куда‑то ещё.

Коды в интервале от 400 до 499 — это ошибки на стороне клиента. Например, 404 Not Found — указанной страницы нет.

Коды в интервале от 500 до 599 — ошибки сервера. Например, 500 Internal Server Error — внутренняя ошибка сервера, проблема в коде.

Браузер и веб‑сервер обмениваются запросами и ответами под капотом, пользователь не видит этих сообщений. Но за диалогом браузера и веб‑сервера можно подсмотреть в веб‑инспекторе. Для этого нужно открыть веб‑инспектор с помощью ⌘+Option+I на Маке и Ctrl+Shift+I или F12 в других ОС. Переключиться во вкладку Сеть и выбрать запрос:

Кроме GET‑запросов «дай» бывают и другие: POST — «прими от меня», PUT — «замени», PATCH — «обнови», DELETE — «удали». Но браузеры используют только GET и POST для действий пользователя со страницей. Не получится воспользоваться другими методами без программирования и отправки запросов вручную.

Браузеры используют GET для получения данных от веб‑сервера — страниц и их ресурсов. Запросы POST используются для отправки данных на веб‑сервер, например, отправки формы или файла.

GET и POST принципиально отличаются тем, как с помощью них передаются данные, параметры на сервер. В случае с GET данные идут в адресе, урле, а в случае с POST — в теле запроса:

GET /search?text=динамические+опердени HTTP/1.1
Host: ya.ru

POST /search HTTP/1.1
Host: ya.ru
Content-Type: application/x-www-form-urlencoded

text=динамические+опердени

Отсюда и берутся их различия:

GET

Запрос данных с сервера

POST

Отправка данных на сервер

GET

Параметры передаются в урле, видны в адресе

POST

Параметры передаются в теле запроса, не видны в адресе

GET

Поиск, фильтрация, загрузка страниц и их ресурсов

POST

Отправка форм, например логина, регистрации или формы заказа, и загрузка файлов на сервер

GET

Остаётся в истории браузера, можно добавить в закладки

POST

Не остаётся в истории браузера, нельзя добавить в закладки

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.