HTTP Requests and Responses Cycle

In the previous article, we understood how the browser knows the server's address (thanks to DNS). Now, it's time to start a conversation (HTTP request-response cycle)

In this article, we will understand what a request is, what a response is, and how this cycle works.

The Request

After finding the correct IP, the browser sends a request to the server.

1. The method

   The method is the verb of the request. It tells the server the action, client wants to perform :

   • GET: The most common method. This simply asks the server to get a resource, like a webpage, an image, or files.

   • POST: It is used to submit information to a server, (like logging in or Please post this new comment to the blog)

     Unlike get, post request includes a body, which contains the data being submitted.

2. The Path

   The path is the noun. It specifies the exact resource you want from the server. It’s the part of the URL that comes after the domain name.

   www.example.com/about-us.html -> /about-us.html is the path.

3. The Header

   The Header provides extra information that the server needs to handle the request correctly.

   It contains:

   • Host: Specifies the domain of the website browser wants. This is crucial because a single server (IP address) can host many different websites.

   • User-Agent: This tells the server about your browser (e.g., Chrome, Firefox) and OS. This helps the server send back the version of the site that is optimized for your device.

HTTP/1.1 shows that it is using HTTP, and we currently use HTTP/2 a more secure

The Server

Now that the server receives the HTTP request, it gets to work.

The server looks at the method and path (GET/about-us.html), finds the correct file, and prepares to send it back. If it's a more complex request (like a POST), it might process data or query a database. The main point is: the server processes the request and prepares a response.

The Response

1. The Status Code

   Before sending the actual webpage, the server sends a 3-digit status code. This is a quick update on whether the request was successful.

   Cover the main categories:

   • 2xx (e.g., 200 OK): Success! Everything went perfectly.

   • 4xx (e.g., 404 Not Found): Client Error. The user asked for something that doesn't exist. This is the most famous error code.

   • 5xx (e.g., 500 Internal Server Error): Server Error. Something went wrong on the server's end.

2. The Headers: Instructions for the Browser

   Just like the request, the response also has headers. These headers give the browser instructions on how to handle the data it's about to receive.

3. The Body

   This is the actual data you asked for! If you requested a webpage, the body will contain the entire HTML document for that page. If you requested an image, it will contain the image data.

   

The Cycle repeats

The job isn't done. When the browser reads the HTML file, it will find it needs other files, like images, CSS stylesheets, and JavaScript files. For each one, it will start a new HTTP request/response cycle. This is how a complete, complex webpage is assembled from many individual resources.

---

Now that we understand the conversation between the client (your browser) and the server, our next article will dive deeper into their distinct roles. What happens on the 'client-side' versus the 'server-side'? Stay tuned!