How does HTTP protocol work ?

Recommended to first go through the earlier article

Anywhere I have mentioned “client” read it as “Browser”.

HTTP is a stateless protocol. What does that mean?

HTTP being a stateless protocol plays a very important role in the introduction of cookies.

When a Browser has to make an HTTP request to the server. A Request connection is opened with the Server. The server accepts the connection request and then the client (Browser) sends HTTP request metadata (Read further to understand more about this metadata) to the server. The server processes this metadata and responds to the given request accordingly. Once the server responds to the client’s request, the connection opened by the client gets closed from the server end. To fetch further resources from the server, the client has to create a new connection to the server for every individual resource (CSS, JavaScript, Image, Font & video).

By default HTTP protocol doesn’t have any implicit provision for the server to identify a unique browser client (user). That’s because HTTP protocol doesn’t provide any inherent mechanism to maintain the state between multiple requests originating from the same client. Hence it’s been called a stateless protocol.

HTTP cookies have been widely used to establish this state between client and server, since the early days. With the introduction of browser-side storage in recent years, that’s another mechanism that facilitates the state between client and server. (How Cookies are being used to establish the state between server and client will be covered in the next article.)

Let’s look at what this request metadata looks like and what all data is sent from browser to server as part of request metadata.

Follow below steps

1. Open a new tab in incognito mode (if you already have an incognito tab open close all such tabs and create a new tab).
2. open dev tools (refer to the below screenshot)

3. Make sure to open dev tools and then hit the following URL https://www.ugaoo.com/live-plants.html. Inside the “Network” tab of the devtools panel, you will find similar request data as displayed in the below screenshot.

Let’s now dissect the request that we made.

We made a request to https://www.ugaoo.com/live-plants.html from the browser address bar. This is the very first request you will find inside the “Network” section initiated by the browser. Subsequent below requests made by the browser are a result of other resources that the browser starts fetching when it starts processing the HTML response of the first request (as explained in the first article).

Inside the “Network” section of dev tools, you will find the following details.

HTTP Request

URL — https://www.ugaoo.com/live-plants.html

Request Metadata ( You will find below metadata about the request under the “Request Headers” section. Refer above “Network” section screenshot).

Method — GET (Indicates this is a fetch data request from the server). There are different methods defined as part of the HTTP protocol refer for more details. By default, every request we make by hitting the URL in the browser is made with the “GET” method.

URL Path & Query parameter — /live-plants.html — This is the path requested by us. Query parameters are additional inputs we can pass to the server appended to this path.

Headers — Under “Request Headers” all the key values except those start with “:” are considered to be part of the HTTP request headers.

some of the headers e.g.

accept: Indication of response formats supported by the client (Browser).

user-agent: This is a header sent by the client which indicates the type of the client (Browser). This is the header that gets used for device targeting for any ad campaign.

You can ignore other request headers for now.

Body — As the current request is to fetch the data (GET) there is no data being sent through the body of the request. However when the browser makes a request to save data on the server (method: POST or PUT) that data will be sent to the server through the body.

HTTP Response (Refer above “Network” section screenshot)

Response status code — Response status code indicates how the server is responding to the request. In this case, it is 200. It indicates a valid request with a successful response. There are other various status codes suggested by HTTP protocol (refer) to indicate different response situations.

e.g.

200 series — Successful response

300 series — Redirection suggestion by the server. These response codes are used by the server to signal the client to follow the new URL suggested by the server.

400 series — Indicates some error on the client-side either invalid URL, invalid request, or not authorized.

500 series — Indicates some error on the server-side. There are different 500 series to indicate different kinds of server errors.

Headers — Similar to request headers (used by the server to process the request) these are the response headers that are used by the client to process the response.

Some of the common response headers are

content-type: This response header indicates the format of the response body itself. In the context of the current request, it is “text/html”. Which indicates the response is in HTML format.

set-cookie: Here we go, this is the response header sent by the server to set a cookie inside the browser. In this case, it’s a PHP server, and this cookie (PHPSESSID=<unique identifier>) is created to uniquely identify the user browser. For now, let’s just understand that this cookie is created and saved on the browser side (even if you close the browser, it will remain persistent on the browser side till it doesn’t get expired). It will be sent with each subsequent request made by this browser to the same domain www.ugaoo.com (Server). (we will discuss cookies in detail in the next article).

If you refresh the page and look at the request headers in the network tab again. This time you will find the “cookie” request header is being sent by the browser to the server. This is the same cookie “PHPSESSID” that was sent as part of the response header in an earlier request. You will find there are more cookies that are being sent this time. These cookies are created by some of the analytics or advertising javascript code on this site. These cookies are created with JavaScript code on the browser side itself. ( we will talk about this in detail in the next article.)

Body — If you switch the tab to “Response” from “Headers” as shown in the below screenshot. You will find the response body, which is an HTML page returned by the server.

To summarise with HTTP request browser sends the input through different request metadata sections (method, headers, path, query parameters, and body). The server responds with response metadata in the form of status code, headers, & body.

HTTP protocol specification defines the standard that every browser is expected to follow. As well as developers who are building web applications need to pay attention to these standards and implement the application in compliance with these specifications (Which is not always the case, and results in bugs as well as security loopholes).