Talking in browser language: Introduction to HTTP
Tags: beginners, crio, webdev, cwod
Published: 2021-01-30 16:35:10

## **Introduction**

Developers often forget to pay attention to the nuances of the internet and how it works. A thorough understanding of how various requests are handled, processed, and displayed is necessary for any developer working with the internet and developing applications for it.

In this article, we are going to dive into how the link you type on your browser can fetch what you see on your screen so seamlessly that we often take it for granted. We will study the basics of HTTP, various HTTP methods, status codes, and how to make your HTTP requests through telnet.  

### **HTTP**

The internet is a worldwide system of interconnected networks, apart from being connected its primary goal is to communicate over the connected network. A uniform method of communication has to be defined such that it’s not affected by the internal structure or design of any individual computers over the network. This is where protocols come into action, they are a set of rules followed universally to determine how data will be transmitted between devices connected over a network.  

One such popularly used protocol is the HyperText Transfer Protocol (HTTP), these are a set of rules followed while transferring multimedia files over the internet. HTTP contains a set of rules that define how a client should request data from a server and how a server is supposed to respond based on the request message received from the client. The entire process is illustrated as given below:  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6xrd4ao9f8a3h7pd63s3.png)  
Since everyone doesn’t know how to manually create and parse such requests and responses the developers created applications called browsers which can be used to ease the process of such complex tasks. When you enter a URL in your web browser, your browser creates an HTTP request and sends it to the server which is programmed to identify the request (because it follows the rules mentioned by HTTP) and sends you the appropriate response.   

###**HTTP request** 

Below is an example of what happens in the background when you visit https://www.flipkart.com/  

1. The browser first translates the URL into an IP address using the DNS. Then using this IP address, an HTTP request is created based on the protocol mentioned (in this case HTTPS) and sends the created request to the IP address. 

2. The request messages contain various information about the client requesting data along with various other headers to help the server identify the type of data required by the user. 

3. The following are a few of the headers included in the request message to Flipkart servers.</br>  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mz84hb89xhwb4kqcqv9n.png)  
</br>
4. The server, if online, parse the request and sends data back to the browser based on the request. In this case, it sends HTML files and its resources.  

5. The response from the server also contains various headers that help the browser to identify the type of message received from the server based on which it decides how to parse it display it on the screen. 

6. The following are the few headers included in the response message from the server.>/br>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ugu5rmktgcb3lhzd6ab.png)

  
###**HTTP Methods**  
HTTP along with requesting data from servers can also perform other actions with data on the server provided you have the permission to do so. Such tasks need to be mentioned through request methods which are used to specify the desired action to be performed by the request. Various request methods are specified below: 

* GET
The GET method as the name suggests is used to “GET” (retrieve) data from the server based on request. Requests using GET should only retrieve data.

* HEAD
The HEAD method asks for the headers and status line of the response instead of the entire response body. It’s used to identify the specific features of the response body.

* POST
The POST method is used to send data to the server e.g. Submitting form data or uploading profile files to the server. It causes a change in the state of the server.

* PUT
The PUT method is used to replaces existing entries on the server of a specific resource with new data sent to it.

* DELETE
The DELETE method deletes the specified resource.  

* CONNECT
The CONNECT method establishes a tunnel to the server identified by the target resource.

* OPTIONS
The OPTIONS method is used to describe the HTTP methods allowed by the target resource. 

* TRACE
The TRACE method performs a message loop-back test along the path to the target resource. It’s used for troubleshooting purposes. 

* PATCH
The PATCH method is used to apply partial modifications to a resource.

###**HTTP Status Code**

HTTP status codes are used to identify the status of the request sent to the server. They are three-digit numbers that signify what happened to the request. They are divided into various classes based on the similarity of their meanings:

 1. Informational responses (100–199)
 2. Successful responses (200–299)
 3. Redirects (300–399)
 4. Client errors (400–499)
 5. Server errors (500–599)

The status code also contains a reason-phrase which are used to provide a textual description of the meaning of the status code. Some of the common status codes and their meanings are given below:

* 200 OK
The request was successfully responded to.

* 301 Moved Permanently
The URL of the requested resource has been changed permanently. The new URL is given in the response.

* 400 Bad Request
The server could not understand the request due to invalid syntax.

* 401 Unauthorised
It means the client is not authorized to make the request. The client must authenticate itself to get the requested response.

* 404 Not Found
The server cannot find the requested resource. 

* 500 Internal Server Error
The server has encountered a situation it doesn't know how to handle.


###**Creating an HTTP Request from scratch**

Now since you know what happens in the background of the browser you can replicate it on your own to ensure a thorough understanding. We’ll do so by creating our HTTP request using telnet. If you don’t have telnet installed in your terminal you can use [this](http://telnet.browseas.com/) online tool.

 An HTTP request consists of the following major elements:

* An HTTP method
* The path of the resource to fetch; the URL of the resource.
* The version of the HTTP protocol.
* Optional headers that convey additional information for the servers.
* Or a body, for some methods like POST, similar to those in responses, which contain the resource sent.

**1. Enter the following text in the text box of the telnet client. Press the button below the text box “Telent”.**  


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i1nfatnlh6mmdd73nd6d.png)  


Responses consist of the following elements:
* The version of the HTTP protocol they follow.
* A status code, indicating if the request was successful, or not, and why.
* A status message, a non-authoritative short description of the status code.
* HTTP headers, like those for requests.
* Optionally, a body containing the fetched resource.  

**2. The following response is received from the above request.** 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7hi1x3je5zmj0xvae6cm.png)


###**Key Takeaways**

1. HyperText Transfer Protocol HTTP contains a set of rules that define how a client should request data from a server and how a server is supposed to respond based on the request message received from the client.

2. HTTP along with requesting data can also perform actions with data on the server. Such tasks need to be mentioned through request methods.

3. HTTP status codes are used to identify the status of the request sent to the server. They have a reason-phrase meant for the user and the code meant for the machine

 * 1XX: Informational 
 * 2XX: Success
 * 3XX: Redirection 
 * 4XX: Client Error
 * 5XX: Server Error


###**References**

[HTTP Basics](https://personal.ntu.edu.sg/ehchua/programming/webprogramming/HTTP_Basics.html)
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
[W3 Rules](https://www.w3.org/Protocols/HTTP/1.0/spec.html)