How the Internet Works (HTTP concept)

Abhijeet Chatterjee
Feb 4 · 4 min read
HTTP Concept

Everyone uses the Internet on a daily basis whether it is for checking emails, watching YouTube videos, uploading images and status on social media, or visiting a website on the browser.

But have you ever wondered what happens at the backend when entering the website URL and hit enter??

Let me walk you through, when you enter a URL in a browser and hit enter, the browser automatically generates an HTTP (HyperText Transfer Protocol) request and send it to the server on which the required website is stored. Then the server returns an HTTP Response which is read by the browser and rendered as web pages. Each of the images, CSS file, JavaScript file or any other resource the website uses requires an HTTP request each.

Let's do an activity-:

Step1- Open another tab and open any website (eg. your GitHub) and open the Developer tools (ctrl+shift+i), go to the Network tab and reload the page.

Screenshot

You would see something like this.

At the bottom you can see the number of requests made, size of file transferred. Also, you can see the headings like- name, status, type, the initiator.

What are these??

Name- It is the resource name returned by the server to the browser.
Type- It is the type of resource returned by the server (eg. JSON, HTML etc.)
Initiator- The file name that causes the request.
For example-: if you put an image URL in the <img>tag of HTML then the HTML file will make a request to particular URL for the image and display it.

Step2- Completed the above task lets move on to another, click on the first request and go to the response tab.

Screenshot
Screenshot

You will see an HTML document. This is the HTML document returned in the server response. The browser reads this HTML document and renders the website in the browser which we see. You can see how the website preview of this HTML Document by clicking the Preview tab.

Step3- Now click on the Headers tab

Screenshot
Screenshot

Here we can see the General and Response Headers.

General shows the details HTTP request.

1. Request URL - URL of the resource fetched
2. Request Method - denotes the action to be done. "GET" is for fetching some resource
3. Status Code - denotes how the server responded to the request.
4. Remote Address- This denotes the IP address of the Host and port number

Response Headers shows the server details like-:

1. content-encoding- shows the file character encoding.
2. content-type- shows the file type of the resource returned.
3. server- tells the server on which the server returning response is hosted.
and many more details.

Request methods tell the server what the browser wants to do by using the URL. Either get a resource, create a resource, modify or delete etc. Here are some request methods.

HTML Requests and Description
HTML Requests and Description

So next time you visit a website try to check the request method used by the browser for various activities.

Now let us move on to status codes. What are these??
HTTP response status codes indicate whether a specific HTTP request has been successfully completed. They provide an acknowledgement to the request of the browser.

Responses are grouped into five classes:

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

The common status response codes are-:

200- denoting the request was successful depending on the request method.
301- The URL of the requested resource has been changed permanently. The requested URL has been moved to a new address.
404- The server cannot find the requested resource.
500- The server has encountered a situation it doesn’t know how to handle.

There is a whole list to them and you can get the complete list of the codes.

That is just one half of the puzzle the other is API. But let's keep some of it for the next time.
Till then see you.
Happy Learning.

Connect with me on-:
LinkedIn-:https://www.linkedin.com/in/abhijeet-chatterjee-445aa2195
GitHub-:https://github.com/abhijeet007rocks8
and let's have some geeky talks.

DSCVITBhopal

Be a part of Change

DSCVITBhopal

Developer Student Clubs are university-based community groups for students interested in developer technologies. By joining a DSC, students grow their knowledge in a peer-to-peer learning environment and build solutions for local businesses and their community.

Abhijeet Chatterjee

Written by

A tech-geek

DSCVITBhopal

Developer Student Clubs are university-based community groups for students interested in developer technologies. By joining a DSC, students grow their knowledge in a peer-to-peer learning environment and build solutions for local businesses and their community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store