Hello everyone, welcome to my blog again. 🤓 Today, we will be learning how HTTP protocol works and how browsers send and receives data from server to client.

So, before moving to HTTP protocol, let's see what is a protocol in computer networks???

A network protocol is an established set of rules that determine how data is transmitted between different devices in the same network. Essentially, it allows connected devices to communicate with each other, regardless of any differences in their internal processes, structure or design.

Now, let’s see what HTTP is - HTTP stands for HyperText Transfer Protocol. HTTP is the TCS/IP based application-layer communication protocol which standardizes how the client and server communicate with each other. It is the most popular application protocol on the internet, which makes actions like internet browsing happen. Whenever we open any website on our browser, we can see that the URL of every website begins with either http:// or https://( which is similar to HTTP with added encryption and different port number). Read more about the difference between HTTP and HTTPS here: keycdn.com/blog/difference-between-http-and..

It basically works on a client-server architecture model where a client is a browser(like google chrome, Mozilla, etc) which the end-user is using on his/her device while server(like AWS, GCP, personal computer, etc) is where the website is hosted. It is responsible for communication between web servers and clients. It starts with a client machine sending requests in the HTTP format. The server machine receives the request, understands it and takes appropriate action. The response again has to be formatted in a specific manner adhering to the HTTP protocol for the client to make sense of it.

So, When we enter the URL of the website we want to visit, we are asking the browser to make a request on our behalf and send it to the webserver on which that website is hosted. The server then responds with a bunch of documents(like HTML file, CSS, images, js, etc) which is then read by the browser and renders it to our screen in a presentable form instead of raw HTML code.

Each request can be seen as a transaction between client and server, and all requests are completely independent of each other. We can only specify a single resource in HTTP request line at a time meaning that we need a separate HTTP request for fetching any related files(like images, CSS, js, etc) the HTML document needs.

HTTP REQUEST METHODS — Now, let’s understand what are HTTP methods. Suppose the client has to perform the following operations —

1. Upload some data to the server.
2. Update some data that is already present in the server.
3. Delete some data present in the server.

Just think how would the server know what the client wants from it?🤔

That’s why HTTP uses methods to inform the server what action to perform when the client sends a request. According to the method the client used to send request server responses with success or failure(which is denoted with different status codes. Read more about status here — developer.mozilla.org/en-US/docs/Web/HTTP/S...

Let’s look at the most frequently used methods —

1.GET request: GET requests are used to get resources from the server. Eg- fetch Html file from the server. It only retrieves the requested data from the server and doesn’t make any changes in the already present data in the server.

Here, we can see as when we enter a URL in the browser, we are making a GET request to the server to return us the resources of that website(which is the HTML document in this case).

2.POST request: Post request is used to post some data into the server. Eg- Upload some data through an Html form. It basically submits the data into the server without making changes in the data which is already present. In the first screenshot, we can see that we are posting some data that will go to the server and return appropriate data according to the credentials entered by the user.

3.PUT request: Put request is used for both creating a new resource and updating the data already present in the server. Eg- changing our profile picture on social media. It makes changes in the data present in the server. Here, we are changing the profile picture which will update the already present picture in the server database. This is how PUT request works.

As both POST request and PUT request can be used to create a new resource in the server. What is the difference between the two????

The key difference between PUT request and POST request is that PUT request is idempotent. Idempotency means that multiple identical requests will have the same outcome. So it does not matter if a request is sent once or multiple times. So, when we send 10 identical PUT requests, it will still be updating the existing resource only while 10 similar POST request will result in 10 new identical resources on the server. Read more about the difference between the POST request and PUT request here — restfulapi.net/rest-put-vs-post.

4.DELETE request: Delete request is used to delete some data from the server that is already present there. Eg- deleting a LinkedIn post. The resource will be deleted from the server. The DELETE request is also idempotent, which means that multiple identical DELETE requests should have the same effect as a single request.

REFERENCES —

• hackernoon.com/http-made-easy-understanding..
• khanacademy.org/computing/computers-and-int..
• crio.do (Web Developer essentials track)
• restfulapi.net/http-methods
• developer.mozilla.org/en-US/docs/Web/HTTP/B..

I appreciate the time you spent reading this post. Thanks 🙂

Connect with me at LinkedIn, Twitter, Instagram