Introduction to HTTP and REST API || Crio.do

This blog summarizes what I have learned about HTTP and RESTful API during Crio.do Winter of Doing program.

Deepti Tiwari
6 min readJan 24, 2021

--

Ever wondered how the Internet works??

Ever wondered what actually happens when you enter a URL on a browser??

Ever wondered where and how every media object is coming from??

First..what is a URL? [1]

>>URL is the address of file/webpage you are looking for.>>There are 4 parts in a URL.
protocol://hostname:port/path-and-file-name
PROTOCOL: rules used for client-server data transmission.
HOSTNAME: server where web-files are stored.
PORT: specifies the port at which server is recieving requests.
PATH/FILE_NAME: specifies the location of page you are requesting.

Now we know how to locate our webpage Next step is how to bring the webpage to our local browser, how to bring the files and resources to our local browser. To understand that we will discuss HTTP PROTOCOL and RESTful API in detail.

What is an HTTP request??

HT: Hypertext (a text with hyperlinks = webpage)

T: Transfer (exchange of information/data)

P: Protocol (Set of rules / Procedure)

Meaning of HTTP: Set of rules or method by which client and server transfer information.

— — —

We all know, that the contents, images, videos visible on webpages are not stored in our local system. They are present far somewhere and we get that on our browser with the help of “internet”. To bring a webpage to you, the browser makes an HTTP request to GET the components from the server. Then the server will send back a response with the required files. This is a brief explanation of how client-server communicate.

Created By: Deepti Tiwari

Now let's come to language and format how they communicate.

There are various methods in an HTTP, denoted by different keywords in a request, that serves different purposes.

1. GET METHOD

As the word simply means, it is used to “GET” something from the server. For every component in a webpage, every image, video, HTML, or CSS file, a different HTTP request is made. A demo is given in the below image.

Developer’s Mode (Ctrl+Shift+i); Flipkart’s Homepage
In the red box: 
It is showing the kind of file
In the purple box:
It shows the number of HTTP requests made for that page.
In the pink box:
It shows the amount of data downloaded.

2. POST METHOD

Post method is used when we send a new set of information to save on the server. For example, when you are creating a new account, you are sending your information for the first time. This is when the POST method is used.

3. PUT METHOD

There are cases when you modify the data already stored in the server, like editing the status, post, or a comment. Since you are modifying something the PUT method will be used.

We have discussed a few, and you can check more at [3].

What do we get in return for an HTTP Request?

The server sends back a RESPONSE filled with loads of information as a reply to our request. You get an HTML file, a CSS file, multimedia, etc.

A RESPONSE consists of… ???

There are mainly two components of a response: Response Header and Response Body.

Source: [1]

-Response Message Header:

This section consists of a Status Line that informs about the status of the request process and a Response Header that consists of metadata of the response sent. As shown in the image, the metadata mainly has information like date, server, content-type, etc. We will discuss Status Code later in detail.

-Response Body Header:

This section contains the main content of the files. It can be an image, HTML code, CSS code, or JS code. As we can see in the image below, the response to the request made was an HTML code (Content-type: text/html).

Developer’s Mode (Ctrl+Shift+i); Flipkart’s Homepage

What is a STATUS CODE?

During the entire process of making a request and receiving the response, there is a huge possibility of various events occurring. Every event is denoted by a unique number, on the basis of following division.

Source: [2]

The basic division of events is done as shown in the image. The informational range (1XX) includes the event when the request is processed by the server after receiving it. The range of 2XX contains when the request is successful, e.g. accepted, created, etc. There are cases when the site address is changed, permanently or temporarily. In these events code in a range of 3XX is returned. Sometimes there can be issues from your side (range 4XX) and sometimes there can be issues on the server-side including, gateway timeout, internal errors, etc.(Range 5XX).

Detail list of server code and their reason are listed at [1].

What is REST API??

(REpresentational State Transfer — Application Programming Interface)

Whenever you need to perform any task on server, get an information from server, run a command on server terminal, you don't go to the server and do it manually. You from your browser is connected to server through an API.

The most basic example of API usage is, when you login into an account. You don't enter the credentials directly in server, you enter in textbox provided and then the API will take that to verify them. Also “Log in via Google”,“Log in via Facebook”, etc are also example of API usage.

REST-API is just an API that follows REST arcitecture. The client-server model REST follows is where one program sends a request (usually uses HTTP request)and the other responds with some data.

How HTTP is different with REST-API ?

The response in HTTP is usually HTML, CSS, JS files which is then rendered by and displayed on browser. But in REST API, response is some data which is then processed by requesting program. JSON, XML are some standard data format which is easily understood by application.

For eg, this API brings the data of all cities having subtile “son” in JSON format, as shown in image below. Now this data can be parsed and used for multiple purposes by applications. To figure what sort of value we are supposed to pass in query argument, we need to read documentation.

JSON Data as a response of REST-API

A REST-API Resquest consists of :-

  • REQUEST URL:

It is a web address that locates and display the data fetched by REST-API. A Request-URL consists of four parts:

>> PROTOCOL: it shows that request is made using HTTP Protocol(safer version: HTTPS)
>> ROOT-END POINT: host address of api provider.
>> PATH: locates the particular imformation requested.
>> QUERY: In case any additional value has to sent, to filter data, then that is send as a query.
  • REQUEST METHOD:

REST-API is build over HTTP. Method describes the kind of action being performed. “GET” method is used to fetch the data in JSON format to client.

  • REQUEST HEADERS:

Header describes the metadata, as shown in the image below.

REQUEST HEADER FOR https://www.metaweather.com/api/location/search/?query=san
  • REQUEST BODY:

Any additional information is added here.

Along with sending REST Request from browser, we can also send request using program in various language, and also from command line terminal using cURL command.

Happy Reading ❤❤❤…

--

--