Basics of HTTP request & response.

So what is HTTP really?

According to MDN:

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests.

Simple explanation:

It is a protocol that is agreed upon among the parties for the communication to take place between a client & server. Think of it as a language that is widely understood throughout the planet e.g. English.

Basic workings of a request & response:

A client (browser) sends a request to the server and the server responds with the resources requested.

Let's take a look at what kind of information is passed between client and server using HTTP:

Request:

Elements	Example
Method	GET, POST, PUT, DELETE
Resource	/index.html
Header	Accept-Language: en-US,en;q=0.5
Body	`{name: "John Doe", profile:'picture.jpg'}`

Method:

Methods are the needed action to be taken. For example GET is to get a resource, where POST is to (you guessed it) post (pass) some data, PUT is to replace (edit) some existing data and last DELETE doesn't even needs explaining.

Resource:

Simple put it is the complete path (address) of the requested resource e.g. index.html, /assets/logo.png etc

Header:

Headers let clients and servers pass additional information. A good example would be sending and receiving session information, cookies or acceptable encoding etc.

Body:

Body let's us pass the main data (if any) now for a simple GET request we wouldn't want to pass unnecessary data but for POST or PUT request we can definitely leverage the body to send and receive meaningful data.

Response:

Elements	Example
Header	Content-Type: text/html; charset=utf-8
Body	`{message: 'Welcome!!!', pic: 'smiley.png'}`
Status Code	200

Header:

Just like sending additional data from a request using header, a server can send back additional data in a response using header.

Body:

In body of the response, server sends the data needed e.g. html,css,js or json responses.

Status Code:

Status code is like a flag. For example a flag of 200 when everything is okay,a flag of 404 when the requested resource is not found or 500 when there is an internal server error.

Conclusion

So, that is a little introduction to HTTP request and response concepts and working. Hope you like it, I would really appreciate your feedback and responses in the comment section. :)

Cover Photo by visuals on Unsplash