Submitting Forms — HTTP Protocol

In this lesson, we'll look at what it's like sending forms in HTTP. We will work with a local server, as it is difficult to use third-party servers to test our lessons on them. Basically, you can experiment on any available server. Just make sure that it works over HTTP and not HTTPS, because the interaction happens a little differently with HTTPS and telnet alone won't be enough.

When submitting a form, we send some data and, since HTTP doesn't provide any special places for sending data from forms, they get sent in the request body. However, the way the data will be encoded when sending is interpreted depending on which Content-Type header is set. The following format is usually used - Content-Type: application/x-www-form-urlencoded. This is a simple format — the key is equal to the value and the ampersand between them.

login=smith&password=12345678

This simple method allows us to continue the string, passing as much data as we want. Now let's try to make a request to our local server.

telnet localhost 8080

POST /login HTTP/1.1
Host: hexlettesthost.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 29

login=smith&password=12345678 # sending the data
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.

After sending, the server, having received the 29 characters that we specified in Content-Length, immediately sends us an HTTP/1.1 200 OK, in body response, with the word Done!. in the body As you can see, the response also has Content-Length equal to 7.

There are a few more features that you need to know when working with forms in HTTP. The first of them is related to encoding. Since this is a text format, you may accidentally let ambiguities slip through. Suppose a password uses the = sign.

login=smith&password=1234=5678

How do you parse this result correctly? It's possible that the server will understand what we're sending, since parsing occurs from left to right, but this isn't guaranteed by anything. Moreover, there may also be special characters in the field name. Therefore, everything sent to the server must be encoded. Usually, it's browsers that do the encoding. But in general, if you write some scripts and the libraries you use don't care about it, you should do the coding. The encoded symbol = looks like this — %3D and it doesn't matter whether the request is POST or GET. You can often see such encoded sequences of characters in the browser's address bar. A body with an encoded = sign is given in the example below:

login=smith&password=1234%3D5678

Another feature is related to the fact that sometimes we need to send nested data. For example, an array of options. In this case, the body may look like this:

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

The catch is that HTTP doesn't know how to work with this sort of data. Their processing is handled by middleware. But if, for example, you're writing your own server implementation, you will have to parse this data yourself.

Other encoding methods

In addition to the usual key=value encoding, there are other formats, but the most popular one nowadays is the JSON format. It has quite a lot of advantages, including:

• JSON is a string, which is necessary when passing data over the network
• It doesn't depend on the language
• It can be used to describe complex hierarchical structures
• It's easy for a person to read

At the moment, it's considered the standard for the exchange of information between services on the Internet. A JSON string looks like this:

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

To send data in this format, we use the Content-Type: application/json.

Recommended materials

1. Sending data over HTTP
2. JSON

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.