How does the Internet work?

If there is one thing that has revolutionized the world in the 20th century, it is the internet. It has completely changed the way humans communicates and has impacted a lot of lives. Most of us have been a consumer on the internet for the most part of our lives. As web developers we are becoming a creator on the internet. Hence it becomes very essential for us to know how the internet works from a web-developer's point of view. Let's begin!

At a bottom level, what the internet really is your browser or your machine is making requests to a server and is getting responses back. Browser can be on your PC, Mac, phone or any other multimedia device. The server is just another machine with server software running on it. Every device connected to the internet have an IP address assigned to them. In this case both the server and the machine running the browser have an IP address assigned to them. Now when we type an URL(www.xyz.com) on the browser, the browser does not know the server's IP address associated to the URL. Hence it goes to the ISP for the server's address. The ISP does something known as a DNS lookup which is nothing but a search of association of the URL to the server's address. Once the association is found, it returns the IP address of the server to the browser. Now the browser can send direct requests to the server and gather responses.

Now to browser sends connection requests to the server and in return, the server sends a response back to the browser. The response is a file and its content type. The file can be an image file, CSS file or JavaScript file. Usually, the file is index.html and the type is text/html. Now the browser knows what to do with it, so it starts parsing the HTML file provided by the server. During parsing, it usually goes top to bottom and pauses when it finds a request for any asset. An asset is another request that has to be made by the browser to procure that file and its content type. These assets are mostly CSS stylesheets and JavaScript files that are required to ensure the proper functioning of the webpage.

Once the assets are procured from the server, anything on the HTML file that has a reference of the asset files, the assets files are consulted for that. CSS files are referred to add styling to HTML components and JS files are referred to add functionality to HTML components on the webpage. Usually, the CSS files are linked inside the head tag of the HTML files so that the CSS file is procured before parsing components inside the body tag. This step is taken by most web developers to avoid something known as Flash of Unstyled Content (FOUC). Similarly, JavaScript files are sourced at the end inside the body tag because these kinds of files are usually heavy in size and take time to request, procure and parse. Moreover, JavaScript files can request stylesheets and images. This process should not slow down the loading of the webpage because parsing is paused whenever a request for an asset is sent. It is always recommended to club CSS and JS files so that less request is sent by the browser.

Now lets us have a closer look at the requests and responses in which the browser is involved.

The request header consists of few parameters as mentioned in the diagram. Let us discuss each parameter one by one.

1.Host: It is nothing but the request URL to which the browser wants to connect.
1.Request Method: It can be anything from GET, POST, PUT or DELETE. Request using GET should only retrieve data from the server. The POST method is used to submit entities to specified resources on a server. The PUT method replaces all current representations of the target resource with the request payload. The DELETE method deletes the specified resource.

1. Path: It is the path of the resource to which the browser is requesting to access or procure.
2. Cookies: It is a string that the browser stores to improve the users experience on the website. It is been sent to the server in a hope that the response will be curated as per the user.
3. User String: It is a string that contains information about your web browser and the device you are using.
4. Content Type: It is the type of content that that the browser is expecting the server to give.
5. Payload: When we use the POST method we send data to the server in JSON or XML format. It is known as the payload with your request.

The response consist of a header and a response body. The header contains the response information and the body contains the resource from the server.

1. Content Type: It is the information about the content type of the resource sent by the server. Using this the browser parses the resource file.
2. Status Code: It is a message from the server in form of a code. Code 200 means Successful response, 404 means not found, 500 means internal server error. These were a few common codes.
3. Response Body: The response body consist of a file that the browser requested or a result that the server has sent to the browser. The file can be a HTML file, CSS file, a JS file or an image file. Results are mostly in form of JSON or XML format.

Comments

[Marc Ziel]

the browser does not know the server's IP address associated to the URL. Hence it goes to the ISP for the server's address.

The browser goes to the OS and asks for an IP address associated with a particular hostname. If the OS can't resolve it itself (by using cache or local hosts file) it goes to a default DNS server configured in the system.

Where did you find this request/response diagram? It's a bit wrong.
An HTTP request consists of a start line, optional headers and optional body. HTTP method, path (request target) and HTTP version are part of the start line, not headers.

A host can be an IP address, a host name or a domain. It's not a URL. The URL must at least consist of a scheme and a path to a resource.