Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>19 янв 2024</li>

3 <li>0</li>

4 </ul>Как они работают, когда используются и чем отличаются друг от друга.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

7 HTTP - основной интернет-протокол современного веба. В основе его работы лежат запросы и их методы, определяющие, что именно будет происходить с данными на серверах. Ключевые из них - GET и POST.

8 Из этой статьи вы узнаете:

9 <ul><li><a>как работает протокол HTTP</a>;</li>

10 <li><a>что такое метод GET</a>;</li>

11 <li><a>что такое метод POST</a>;</li>

12 <li><a>чем они отличаются друг от друга</a>.</li>

13 </ul>Основа передачи данных в вебе - это<a>HTTP</a>(HyperText Transfer Protocol), клиент-серверный протокол взаимодействия. Работает он следующим образом.

14 Клиент, обычно веб-браузер, инициирует запрос к серверу. В ответ он получает необходимый документ - HTML-страницу - или сообщение об ошибке, если запрос сформирован неправильно или документа нет на сервере.

15 Взаимодействие клиента и сервераИллюстрация:<a>Polina Vari для Skillbox Media</a>Сам HTTP-запрос состоит из трёх частей:

16 <ul><li>Строка запроса (request line) c указанием метода HTTP, URL сайта и версии протокола.</li>

17 <li>Заголовок (message header): набор данных в виде имён и их значений.</li>

18 <li>Тело сообщения (entity body) с информацией о запросе или ответе сервера. Например, в нём передаётся HTML-код страницы для отрисовки его браузером.</li>

19 </ul>В этой статье мы рассмотрим два HTTP-метода - GET и POST. С их помощью сайт получает данные с сервера и отправляет содержимое форм (например, имя, фамилию и номер телефона).

20 Важно!

21 Не путайте терминызапроси методмежду собой. Запрос - это сообщение, которое отправляется клиентом на сервер для выполнения на нём каких-либо действий. Обычно в нём несколько строк. Метод - это одна из частей запроса, определяющая, что именно мы хотим сделать с сервером. Например, получить содержимое веб-страницы или удалить контент.

22 GET используется для получения данных от сервера. Чтобы создать запрос, введите в адресную строку браузера любой URL сайта. Например, skillbox.ru.

23 Клиент, то есть наш браузер, получив этот URL-адрес, сгенерирует HTTP-запрос и передаст серверу такой пакет информации:

24 GET / HTTP/1.1 Host: skillbox.ru User-Agent: Mozilla/5.0 (Windows NT 6.1) Gecko/20853 Firefox 20.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflateРазберём построчно этот HTTP-запрос:

25 <ul><li>GET / HTTP/1.1 - указания на метод и версию используемого протокола;</li>

26 <li>Host - собственно хост, к которому идёт обращение. В данном случае по адресу skillbox.ru;</li>

27 <li>User-Agent - характеристики клиента, с которого осуществляется выход, например название и версия браузера;</li>

28 <li>Accept определяет, какие типы данных может обработать клиент;</li>

29 <li>Accept-Language указывает на принимаемые языки;</li>

30 <li>Accept-Encoding обозначает форматы и кодировку файлов.</li>

31 </ul>В реальности строк может быть намного больше. Но для нашего примера этих будет достаточно.

32 В ответ на такой запрос сервер отправляет браузеру данные главной страницы сайта, её текст, картинки и скрипты в соответствии с запрашиваемыми форматами.

33 При отправке HTTP-запроса браузер получает HTML-страницуИллюстрация:<a>Polina Vari для Skillbox Media</a>К любому поисковому запросу можно добавить дополнительные GET-параметры в формате "имя - значение" (name-value). Это помогает получить более точный и релевантный ответ, например, когда мы ищем товары в интернет-магазине, настраивая фильтры по производителю, цене и так далее.

34 Главное - правильно задать дополнительные параметры. У них простой синтаксис:

35 <ul><li>начало строки обозначается вопросительным знаком ?;</li>

36 <li>все параметры разделяются между собой амперсандом &.</li>

37 </ul>Правильный список параметров метода GET будет выглядеть так: ? name1=value1& name2=value2& name3=value3, где name - имя параметра, а value - его значение.

38 Посмотрим, как это используется на практике. Откроем Google и введём в поисковую строку запрос кот бегемот. Если посмотреть на URL открывшейся страницы, то мы увидим такой текст: https://www.google.ru/search?q=кот+бегемот& hl=ru& tbm=isch

39 Что означают дополнительные параметры в этом случае? q - поисковый запрос кот бегемот, параметр hl отвечает за язык интерфейса, а вот tbm определяет, среди какого типа контента идёт поиск. У него значение isch - искать среди картинок.

40 Поиск с указанием параметра на поиск среди изображенийСкриншот: Google / Skillbox MediaЕсли ввести этот же запрос в браузер без tbm - https://www.google.ru/search?q=кот+бегемот& hl=ru, то Google выдаст результат в общем поиске, а не только среди изображений:

41 Поиск без указания параметра ischСкриншот: Google / Skillbox MediaДополнительные параметры формируются сайтом автоматически в ответ на действия пользователя. Например, когда он настраивает фильтры отображения результатов поисковой выдачи или перечня товаров, доступных в онлайн-магазине к заказу. Но их можно менять вручную, листая страницы каталога или форума через адресную строку, а не интерфейс.

42 В отличие от метода GET, который используется для получения данных, POST служит для их отправки на сервер. При этом они передаются не с URL, а в теле HTTP-запроса. Поэтому их нельзя увидеть в поисковой строке браузера, истории посещённых страниц или кэше.

43 Проанализировать методы POST можно в специальных утилитах, например в браузерных инструментах разработчика. Если у вас Google Chrome, нажмите клавишуF12или сочетаниеCtrl+Shift+Iна Windows и ⌘+Option+Iна macOS. Это откроет окно DevTools в браузере.

44 Нас интересует вкладка Сеть (Network). Здесь отображаются все запросы, в том числе с методом POST. Посмотрим на один из них:

45 Инструмент разработчика в Google Chrome с методом POSTСкриншот: Google Chrome / Skillbox MediaМы видим URL запроса, его метод - POST и код статуса. Статус 200 говорит нам о том, что запрос выполнен успешно.

46 Разберём работу метода на примере. Посмотрим на HTML-код формы для сбора личных данных от посетителей сайта:

47 <form name="form" method="post" action="post.php">Мы видим, что в качестве метода указан post. После заполнения полей формы и нажатия на кнопку отправки, все данные от браузера передаются на сервер скрытыми в теле HTTP-запроса.

48 Если бы пользователь вводил логин и пароль для авторизации на сайте, то POST мог бы выглядеть так:

49 POST / HTTP/1.0 Host: www.bestsite.ru … login=Olga&password=12345878Обратите внимание, что синтаксис методов HTTP-запросов схож - параметры отделяются друг от друга с помощью &, как и в случае с GET.

50 Начинающие разработчики могут путать методы между собой. Но они различаются несколькими параметрами:

51 - СвойствоGETPOSTСпособ передачи данныхЧерез URLВ теле HTTP-запросаНаправление передачиОт клиента к серверуОт сервера к клиентуЗащита данныхДанные видны всем в адресной строке браузера, истории браузера и кэшеДанные можно увидеть только с помощью инструментов разработчика, расширений браузера, специализированных программДлина методаНе более 2048 символовНе ограничена, но ограничения могут быть со стороны сервераСохранение в закладки и отправка ссылок с заданными параметрамиВозможнаНевозможнаВозможность передачи файлов с методомНетДаПоддерживаемые типы кодированияapplication/x-www-form-urlencodedapplication/x-www-form-urlencodedmultipart/form-data

51 + СвойствоGETPOSTСпособ передачи данныхЧерез URLВ теле HTTP-запросаНаправление передачиОт сервера к клиентуОт клиента к серверуЗащита данныхДанные видны всем в адресной строке браузера, истории браузера и кэшеДанные можно увидеть только с помощью инструментов разработчика, расширений браузера, специализированных программДлина методаНе более 2048 символовНе ограничена, но ограничения могут быть со стороны сервераСохранение в закладки и отправка ссылок с заданными параметрамиВозможнаНевозможнаВозможность передачи файлов с методомНетДаПоддерживаемые типы кодированияapplication/x-www-form-urlencodedapplication/x-www-form-urlencodedmultipart/form-data

52 text/plain

53 Различия между методами определяют их использование:

54 <ul><li>GETприменяют в фильтрах интернет-магазинов, поисковиков и других сайтов. Они полезны для передачи данных, которые не нуждаются в защите от злоумышленников.</li>

55 <li>POSTиспользуют для передачи конфиденциальной информации: паролей, банковских карт и так далее. Кроме этого, они подходят для отправки файлов, фотографий или большого объёма текста.</li>

56 </ul>Резюме по тому, о чём рассказали в статье:

57 <ul><li>HTTP-запросы - это сообщения, которые отправляются клиентом на сервер для выполнения на нём каких-либо действий.</li>

58 <li>В любом запросе есть метод - указание на конкретное действие, которое необходимо выполнить. Например, вернуть код HTML-страницы или удалить контент.</li>

59 <li>GET - метод для получения данных с сервера. Он передаётся с URL, поэтому виден в адресной строке браузера или истории посещений сайтов. Применяется в фильтрах поисковиков и онлайн-магазинов.</li>

60 <li>POST - метод отправки данных на сервер, например, после заполнения формы регистрации или авторизации на сайте. Информация передаётся в теле запроса и не может быть перехвачена злоумышленниками.</li>

61 </ul><a>Курс с трудоустройством: "Веб-разработчик" Узнать о курсе</a>