HTTP Made Easy: Understanding the Web Client-Server Communication

Written by shreyaghate | Published 2020/05/23
Tech Story Tags: web-development | client-server-architecture | servers | web | technology | internet | backend | beginners

TLDR The most widely used HTTP methods are GET, POST, PUT & DELETE. Each of these methods performs the operation required and returns success or failure on its completion. HTTP is stateless because each request is executed independently, without any knowledge of the requests that were executed before it. HTTP Cookies make this connection stateful by sending a cookie along with every request. The most commonly used method is GET and PUT, which is used to read the data and retrieve it, and return that to the client.via the TL;DR App

If you are anywhere related to web development, understanding the concepts of HTTP plays a vital role. So let us understand more about HTTP and its concepts in brief. 

What is HTTP?

HTTP or HyperText Transfer Protocol, as the name suggests it is a protocol, it is a set of rules that the server needs to follow to transmit all kinds of files like images, text, audio, video, and other kinds over the world wide web (www).
The internet is made up of clients and servers. So when you are accessing the internet through a web client like browsers like google chrome, Mozilla, IE, etc. When you enter the name of any website you want to visit, you are sending a request to a web server. Suppose, you type amazon.in, you (the browser which is the web client) is requesting the web server and often requesting a bunch of documents from that server.
Maybe it is an HTML, CSS, images, video, JSON. You make a request and the server responds, that is the basic relationship. This request is made using the HTTP protocol. A protocol is just a set of rules or standards that everyone on the internet has agreed to.
This is the client-server request-response model. HTTP is an application layer protocol and usually communicates with the server using the Transmission Control Protocol (TCP).

HTTP is stateless

Yes, originally, HTTP is a stateless protocol. This is because each request is executed independently, without any knowledge of the requests that were executed before it, which means once the transaction ends the connection between the browser and the server is lost. This could be a problem for certain websites where you need to have yourself authenticated to perform any transaction. But HTTP Cookies make this connection stateful by sending a cookie along with every HTTP request. Thus, your experience of browsing and performing any transaction over the internet becomes better and secure.
Since now we have understood the relationship between the client and the server and some basics about HTTP. Client (You) make a request and the server responds, that happens every single time you enter a link and press enter on your browser. Many protocols are used like DNS, FTP, HTTP, SMTP (simple mail transfer protocol), SSL (Secure sockets layer). HTTP is the most used one and is simple to be read and understood by normal users as well.

HTTP Methods

So a client makes a request to the server, how would the server know which operation to perform?
HTTP uses methods to inform the server what actions need to be performed when the client sends a request. It is also called as HTTP verbs. Each of these methods performs the operation required and returns success or failure on its completion. 
The most widely used HTTP methods are GET, POST, PUT & DELETE. There are some others as well, like HEAD, OPTIONS, TRACE. Let’s understand what the four widely used methods do :
GET
GET requests are read only, they are used to read the data, retrieve it, and return that to the client. It is the simplest among all the requests since it provides the required resource without any modifications. 
POST
POST requests are used to create or add a new item to the requested URL. For example, creating a new account or posting a new blog o medium. Based on your URL, it posts the data to a specific location. Once done, it responds with the status code 201 (CREATED), along with the location link of the posted data. 
PUT
PUT requests are used to modify or replace the current data with the requested data. For example, change the password on a website. It can also be used to create a new item like POST, but POST is used for that purpose. 
DELETE
DELETE request is used to delete all the data from the target location requested by the client. It is a risky operation because once deleted, it cannot be retrieved again. 
If the above requests are a success, it returns the data asked by the client along with the status code 200 (SUCCESS). Else, returns with the status code 404 (PAGE NOT FOUND) or returns status code 500 (Server error).

HTTP Status Codes

So a client makes a request to the server, how would the client know about the status of the request?
Status codes let us know whether the request we made to the server was a success or a failure or something in between.
They are divided into 5 groups:
  • 1xx — Informational: The server has not fully completed the request, it is still thinking and is in a transitional phase
  • 2xx — Successful: The server has successfully completed the request
  • 3xx — Redirects: This block is for redirections, it means you requested an address but you were sent somewhere else
  • 4xx — Client Errors: There is some error from your side
  • 5xx — Server Errors: There is some error on the server-side.
You can read about all the status codes here!

HTTP Requests and Responses

You can view how these HTTP requests look like by accessing the web developer tools from Mozilla Firefox or Chrome browser. Mozilla Firefox gives a better tool to inspect through the web console.
Here you can visit the Network section to view all the requests that are sent when you enter a particular name to be searched. You can see all the details of the requests sent with status code, method, domain name, type of file, size.
When you click on any request, it will open the header and all the related information of that particular request.
HTTP Headers for a Request Message looks like this:
Requests consist of the following elements:
  • Request URL - the path which is to be fetched, containing the protocol (https://) and the domain address (google.com).
  • HTTP Method - usually it is GET or POST a resource or any operation that the client wants to perform.
  • Remote Address (IP Address and Port Number) of the website the client is visiting. If the port number is 80, then it is HTTP, and if the port number is 443, it is using HTTPS. 
  • Status Code - denoting the status of the operation the client is trying to perform.
  • The version of the HTTP protocol.
  • Any Optional Headers that convey some information related to the request or the server.
  • Referrer-Policy containing the information if it is the origin or cross-origin.
Responses consist of the following elements:
  • The version of the HTTP protocol they follow.
  • All the Content Related Headers, denoting the type, length, and related information.
  • A status message, a non-authoritative short description of the status code.
  • Access-control related information. 
  • HTTP headers, similar to the request header.
  • In some cases, a body containing the fetched data.
  • HTTP vs HTTPS

    While browsing over the web you must have come across http:// and https://
    HTTP request or response is not encrypted and is vulnerable to various types of security attacks and uses port 80.

    HTTPS request, on the other hand, is a more secure way of communicating with the web server that is encrypted and uses the port 443. HTTPS, here S stands for HTTP over TLS/SSL.

    Conclusion

    HTTP plays a crucial role in how the web works and the client - server relationship. Even though HTTP is stateless, it is easier to scale. All the related session data for that state is received with every request and response, through which the job of maintaining a state for that particular request cycle is done. 
    So as you saw, HTTP is a vast topic, it has so much more to it. I have tried covering some basic & essential topics to give you an easy entry into the web world. I hope this article was helpful. If you have any doubts or suggestions, do comment below.

Written by shreyaghate | Member of Technical Staff at www.udgama.com
Published by HackerNoon on 2020/05/23