Отправка форм — Протокол HTTP

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

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

login=smith&password=12345678

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

telnet http.hexlet.app 80

POST /http-protocol/login HTTP/1.1
Host: http.hexlet.app
Content-Type: application/x-www-form-urlencoded
Content-Length: 29

login=smith&password=12345678 # отправляем данные
HTTP/1.1 200 OK
Date: Thu, 03 Oct 2024 11:05:27 GMT
Content-Type: text/plain; charset=utf-8
Content-Length: 5
Connection: keep-alive
CF-Cache-Status: DYNAMIC
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=AeQHldDhaGUY44PDubuTZa4MoQNnd5AKa1ZyAu9irDe%2Fp5T5CKa6bf2GlH5qQzavsYvFUEHq%2BSlocXqeADfGPz3g2jPWiimexs1hwGtirxZIR5ZPZ5mk5%2BQGFPTitcXwyQM%3D"}],"group":"cf-nel","max_age":604800}
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Server: cloudflare
CF-RAY: 8ccc74f21e811cc2-AMS

Done!

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

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

login=smith&password=1234=5678

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

login=smith&password=1234%3D5678

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

user[login]=smith&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.

Вот пример такого запроса к нашему серверу:

telnet http.hexlet.app 80

Trying 188.114.97.0...
Connected to http.hexlet.app.
Escape character is '^]'.
POST /http-protocol/login HTTP/1.1
Host: http.hexlet.app
Content-Type: application/json
Content-Length: 41

{"login": "smith","password": "12345678"}
HTTP/1.1 200 OK
Date: Thu, 03 Oct 2024 11:12:54 GMT
Content-Type: text/plain; charset=utf-8
Content-Length: 5
Connection: keep-alive
cf-cache-status: DYNAMIC
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=GdpHbCRK%2Bcz01BVv%2FQPAOetL%2Fmy6ESoNWQdfU0Lvl4cqfY2Rq8jChxyZ%2FimNqHPN6JW7L9Wco9frqMptFH%2BiDruJ5htbxF6jXtvsPU2Rd95eAfG6K8uF1qn9gg1jIegj0c4%3D"}],"group":"cf-nel","max_age":604800}
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Server: cloudflare
CF-RAY: 8ccc7fd928aa66e1-AMS

Done!

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

1. Отправка данных по HTTP
2. JSON
3. Видеоурок - отправка форм