logo
drill

HTTP basics

- posted 22/12/2024

The ‘Why’ behind this blog

To explain as simply as possible, what happens when you make a request to a web server.

Note: This is a simplified explanation designed to give readers a feel/understanding of what’s happening when they make a request to a server. Because of this, I will not be including architectural details such as CDNs, load balancers, cache, etc.

HTTP

HTTP is the most popular sets of rules(protocols) that computers use to communicate with one another. It stands for Hypertext Transfer Protocol.

How does it work?

HTTP works as a simple request-response system, so essentially a Q&A system. The computer sending the request is called a client, and the computer sending a response is called a server.

Each time that we are accessing a website, our computer is sending a request to the server which returns the HTML/CSS and JavaScript. HTML defines the structure and the content of the website, CSS contains the style and layout for the website and JavaScript makes it interactive and dynamic.

How does the client know where to send the request to access the website?

As mentioned before, to access a website, the client would need to make a request to the server, but how does the client know where to make the request to?

When the server is hosted on the internet. The server typically has a public IP address that the users can access. An IP address essentially tells us where the server lives on the internet. A simple analogy to this is to think of the IP address as an actual address in the physical world. Each IP address is unique to a server, just like how your physical address is unique to your house, although, there can be multiple IP addresses that point to the same server.

At the time of this writing, an example of one of Google's many IP addresses is 142.250.191.78. The reason why servers typically have multiple IP address is to ensure speed and availability

As you’ve noticed as an internet user. When you want to access a website say google.com, you don’t type 142.250.191.78. You’d most likely just type google.com. This google.com, is called a Domain Name. A domain name is a name that maps to one or more IP addresses. i.e. google.com maps to 142.250.191.78.

You might now be wondering. But how do we know which domain name maps to which IP address? This is the job for the DNS(Domain name system).

A DNS is essentially the phone book of the internet, it stores the mapping of domain names to IP address. When you make a request say google.com, the request gets sent to the DNS which then says ‘ah google.com goes to 142.250.191.78’ and sends the request to 142.250.191.78. An analogy would be a librarian. Say you want to borrow ‘The Hitchhikers guide to the galaxy’. You’d ask the librarian where the book is, the librarian checks the book in the database and says ‘ah the book is in aisle 1 row 2’ (or something like that) and then you’d go to aisle 1 row 2 to get the book.

To wrap things up in this section here is a simple diagram that shows what’s going on when you make a request.

httpbasics-image.png

Making a HTTP Request

A HTTP request consists of several components.

  1. Endpoint
  2. HTTP methods
  3. Parameters
  4. Request Headers
  5. Request Body

Endpoint

Endpoint is a dedicated URL that provides access to that specific resource that we are looking for, for example, I have a server hosted on test.com. I have made a endpoint on test.com/products which contains the logic for dealing with requests that are associated with products.

Check out https://blog.postman.com/what-are-the-components-of-an-api/ for more information.

HTTP methods

HTTP defines a set of method that is used to make a request to the server. These methods maps to CRUD operations which stands for ‘Create’, ‘Read’, ‘Update’ and Delete. These methods tells the server about what types of operations that we are trying to use to interact with the resource on the endpoint.

  1. POST(Create): This method specifies that we are adding new data to the resources on that route.
  2. GET(Read): This method specifies that we are just trying to read the data from that route.
  3. PUT(Update): This method says that we are trying to replace the targeted resource with the content from the body.
  4. Delete(Delete): This method says that we are intending to delete some data on that route.

Notable mention: PATCH, a patch request is a request in which the intention is partially modify the data.

Parameters

These are variables that are passed to an API endpoint to provide more specific instructions for that route. Take this GET route, test.com/product/${id}.

We will specify here that this route takes in an id and returns more information about the product.

The parameter here would be id which is a dynamic value depending on what id of product the user is requesting details from.

There are other types of parameters such as search parameters which looks something like this test.com/product?search=term.

Request Headers

These are key-value pairs that provide more information about the request. An example would be Content-Type which lets the server knows what type of format is in the body and Authorization, which contains authorization details about the client(in which the server can check and approve or reject the request).

Request Body

This contains the actual data that is used to either POST(create), PUT(update), or delete a resource. Note that I did not mention GET as with get we are just reading the results and not modifying it in the server.

HTTP Response

This is the response that the server sends back to the client based on the request. The response object typically includes:

  1. Status code
  2. Response-header
  3. Body

Status code

The status code indicates the status of the client’s request. These values generally have a pattern.

  • 100-199: Informational responses. These are very rare.
  • 200-299: Successful responses. Hopefully, most responses are 200's!
  • 300-399: Redirection messages. These are typically invisible because the browser or HTTP client will automatically do the redirect.
  • 400-499: Client errors. You'll see these often, especially when trying to debug a client application
  • 500-599: Server errors. You'll see these sometimes, usually only if there is a bug on the server.

Taken from https://www.freecodecamp.org/news/http-full-course/

Response header

The response header gives more information about the server’s response. Things like whether to store the data as a cookie, or how long to cache the data for.

Body

Similar to the request body, the response body is the meat of the response object. It returns data that is returned by the API server.