Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
Протокол HTTP

Отправка форм

В этом уроке мы рассмотрим особенности отправки форм в HTTP. Работать будем с локально поднятым сервером, так как со сторонними серверами, при тестировании на них наших уроках, возникают сложности. В принципе, вы можете поэкспериментировать на любом доступном сервере. Только убедитесь что он работает по HTTP, а не по HTTPS, так как там взаимодействие происходит немного по другому и одного telnet будет недостаточно.

При отправке формы мы отправляем какие-то данные и так как в HTTP не предусмотрены специальные места для отправки данных из форм, они отправляются в теле запроса. При этом в зависимости от того какой заголовок Content-Type установлен интерпретируется то, как будут закодированы данные при отправке. Обычно используется следующий формат Content-Type: application/x-www-form-urlencoded. Это простой формат — ключ равно значение и амперсанд между ними.

login=user&password=12345678

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

$ telnet localhost 8080
POST /login HTTP/1.1
Host: hexlettesthost.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 28

login=user&password=12345678 # отправляем данные
HTTP/1.1 200 OK
X-Powered-By: Express
Connection: close
Content-Type: text/html; charset=utf-8
Content-Length: 7
ETag: W/"c-r0WEeVxJ7IpMIG20rN7HX9ndB4c"
Date: Thu, 09 Jul 2020 03:32:54 GMT

Done!
Connection closed by foreign host.

После отправки сервер, получив те 28 символов, которые мы указали в Content-Length сразу отправляет нам ответ HTTP/1.1 200 OK в body которого одно слово Done!. Как видим в ответе также присутствует Content-Length равный 7.

Есть еще несколько особенностей, которые нужно знать когда мы работаем с формами в HTTP. Первая из них связана с кодированием. Поскольку это текстовый формат, то в нём очень легко допустить различные неоднозначности. Предположим в пароле используется знак =.

login=user&password=1234=5678

Каким образом правильно распарсить этот результат? Не исключено, что сервер поймёт то что мы отправляем, так как парсинг происходит слева направо, но это ничем не гарантировано. Более того, в названии поля также могут быть специальные символы. Поэтому все что отправляется на сервер должно быть закодировано. Обычно кодированием занимаются браузеры. Но в целом, если вы пишете какие-то скрипты и используемые библиотеки об этом не заботятся, это должны сделать вы. Закодированный символ = выглядит так — %3D и не важно какой это запрос POST или GET. Такие закодированные последовательности символов вы можете часто видеть в адресной строке браузера. body с закодированным = приводится в примере ниже:

login=user&password=1234%3D5678

Еще одна особенность связана с тем, что иногда нам нужно отправить данные вложенные друг в друга. Например, массив опций. В таком случае тело может выглядеть так:

Кодирование данных формы

user[login]=user&user[password]=12345678

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

Другие способы кодирования

Помимо обычного кодирования ключ=значение существуют и другие форматы, но самым популярным на сегодняшний день является формат JSON. У него достаточно много преимуществ, в числе которых:

  • JSON представляет из себя строку, что и необходимо при передаче данных по сети
  • Не зависит от языка
  • С его помощью можно описывать сложные иерархические структуры
  • Легко читается человеком

В данный момент он считается стандартом для обмена информацией между сервисами в интернете. Строка JSON выглядит следующим образом:

{
    "firstName": "John",
    "lastName": "Smith",
    "children": [
        {
            "firstName": "Max",
            "lastName": "Smith",
        },
        {
            "firstName": "Annie",
            "lastName": "Smith",
        }
    ]
}

Для отправки данных в этом формате используется заголовок Content-Type: application/json.


Дополнительные материалы

  1. Формы в HTML
  2. Отправка данных по HTTP
  3. JSON

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».