Understanding HTTP using Browsers

For understanding what is HTTP and how does it work we need to first understand how the Web Server works and requests go to the server and how the server responds to that request after that we will be able to understand what is HTTP.

HTTP :

HTTP is a client-server protocol that means when a request is sent by any client entity, then the user-agent (That means the proxy number on the behalf of the user) or generally most of the time the user-agent can be a Web browser, but we can say it can be anything (Maybe it is a browser or another application which is sending request threw API), in our case it can be a robot that crawls the Web to populate and maintain a search engine index.

Here each individual request will be sent to a server, which will handle it and provides an answer or give the response back. Here all the process which is happening threw the client and the server there are numerous entities, collectively will be called proxies, which will perform different operations and will act as gateways or caches in the whole process.

Steps for Understanding HTTP using Browsers :

• First, open a new window on Google Chrome on your computer and navigate to the https://www.geeksforgeeks.org/   in the Incognito mode (To avoid inconsistencies due to caching of all the process).
• Then you will open Chrome Developer Tools or will inspect the page both are the same with pressing the keys Ctrl + Shift + i  or Cmd + Shift + i  in the browser window and then select the Network tab.
• Now press F5 for Refreshing the page to start the recording network activities from Chrome and observe the HTTP requests made to load the website.
• When you will refresh the page then all kinds of earlier activities of the website will be removed and new activities will be loaded again.
• Now your turn begins to check how many HTTP requests were made by your browser and then
• Check how much data was transferred over the network and how the server has responded to your request.

Note –

Now you will notice that each of the images, CSS and JavaScript files or any other resources which are used on the website for making a required HTTP request, and each request always provide us equivalent resonance,

Example of Understanding HTTP using Browsers :

Now in this to-do part of this article, we will use the geeks for geeks website for our activity regarding the HTTP request and response process as follows. 

• Now search geeksforgeeks in the new tab of browser and go into the geeksforgeeks home page and then press ctrl +shift+i  after this action you will go into the inspect part of site and then refresh the site after that follow  the process given below
• Now scroll to the top of the network activity and click on the first request made to open up its details. (Find the entry In the Name tab, you should see www.geeksforgeeks.org with Type as document   // This is mandatory ).
• Now you will observe the following details for this HTTP request in the “General” section which will give you all the details mandatory.
• Now you will Request the URL – URL of the resource fetched
• Request Method denotes the action to be done.  Which is “GET”  and is used for fetching some resources or details related to that document.
• Status Code denotes how the server responded to the request. For example “200 OK” means a successful request and as this is a “GET” request, the server will have sent f the data back for example website’s HTML content
• Now Check the “Remote Address” value in the “ General” section – The port number used is 443. Is this a special port number? Is there any relationship between the port number used and the Request URL? You can consider an example where there a lock icon in the address bar on your browser? 
• Now Check out some Response Headers and see if you can find out what they mean. An example is like Co  Content-Type, Server
• Find out the HTTP request-line sent by your browser to the GeeksforGeeks server (Hint: Click on view source next to Request Headers)
• Now Goto https://www.geeksforgeeks/practice in a new tab. What do you think would be the changes in the HTTP request-line? Verify by checking the request-line sent for retrieving the new HTML page as you did in the previous step. 
• You’ll have found that the request line will now be asking for the resource at /practice instead of the resource at the root (/) when you visited https://www.geeksforgeeks/. The Host request-header tells where to fetch this resource from.