Understanding the Basics of Web Interaction

If you try to think of a life without the web, it seems unimaginable right? Have you ever paid attention to what happens when we view a webpage in our phones and computers? My blog will take you through what client-server architecture is, how the web interacts, how HTTP protocol plays a role in it ?

Imagine you’re at a restaurant. You’re the customer (the client), and you have a menu full of choices. But to get your meal, you don’t head straight to the kitchen and cook it yourself. Instead, you place an order with a server (the waiter). The server takes your order, passes it along to the chef in the kitchen, who prepares the dish (processes your request), and then the server brings it back to you.

What is a Client and a Server?

They are nothing but anything which is connected to the internet is a client which needs to have a browser to connect to the server, and server can be thought of as a storage which provide services such as access to sites, files etc (simply fulfilling your request).

A real world example would be the DNS(Domain Name System) which is nothing but an address book for websites, When you type a website name in your browser, your browser sends a request to a DNS server, which then translates the name into the IP(a unique address for every device) and sends back the response. We will take about this in details in our next blog.

Now for the communication both the parties need to use the same set of rules and language to understand and this is where a set of rules comes into the picture, which we call as protocols, here comes the client-server interaction which follows a request-response pattern, which allows the information to flow through the system and to facilitate the communication we rely on HTTP protocol.

HTTP Protocol: the magic that makes communication possible

To put simply, it puts up rules about how messages should be sent around the internet. It helps us in fetching resources such as HTML documents, images, videos, scripts, and more. It is a stateless protocol, each request is independent and not related to previous requests.

HTTP Request and Response

When a “client” (like your web browser) wants information from a server, it sends a data package called a request. Each request includes important parts, but let’s focus on two key ones: the verb and the path.

Verb and Path

Every request needs to tell the server two things: what it’s looking for and how it wants to interact with that information.

• The path is the “what”—it shows the server which specific resource the client is referencing.

The verb is the “how”—it tells the server what action to take with the resource. While the path will vary by application HTTP Request and Response

There are five main HTTP verbs that follow a common pattern:

• • GET – Retrieve information for reading.

    * POST – Create a new resource using data in the request.

    * PUT – Update an entire resource with new data.

    * PATCH – Update part of a resource.

    * DELETE – Remove a resource, usually from a database.

Together, these verbs enable the main CRUD operations (Create, Read, Update, Delete), which allow us to fully manage resources in a database. For instance in a to-do application –

· GET /tasks

• Verb: GET

• Path: /tasks

• Action: This retrieves a list of all tasks. The server sends back all tasks for the client to display.

· POST /tasks

• Verb: POST

• Path: /tasks

• Action: This creates a new task. The client sends task details in the request, and the server adds it to the database.

· PUT /tasks/4

• Verb: PUT

• Path: /tasks/4

• Action: This updates the entire task with an ID of 4. The client sends updated information, and the server replaces the existing task with this new data.

· PATCH /tasks/4

• Verb: PATCH

• Path: /tasks/4

• Action: This updates only part of task 4. The client might send just one field (like changing the task's status to "complete"), and the server updates only that part of the task.

· DELETE /tasks/4

• Verb: DELETE

• Path: /tasks/4

• Action: This deletes the task with an ID of 4. The server removes this specific task from the database.

HTTP response is the response sent by the server to the client. It has three main parts –

• A status line which includes a HTTP version number – HTTP- Version = HTTP/1.1, a three digit status code that indicates the result of the request.

• A response header field.

• A message body.

HTTP Status Codes

These are the three digit numbers that the server use to communicate the outcome of the client’s request.

Here are the main categories-

• 1xx informational response – the request was received, continuing process

• 2xx successful – the request was successfully received, understood, and accepted

• 3xx redirection – further action needs to be taken to complete the request

• 4xx client error – the request contains bad syntax or cannot be fulfilled

• 5xx server error – the server failed to fulfill a valid request

I found a really fun website for this. Take a look! - HTTP Cats

Request/Response Cycle

1. You open your browser (the client), type in a website address like http://hashnode, and press enter.

2. The browser takes this address and creates an HTTP request, directing it to the server that hosts http://hashnode

3. This request travels from your computer to your Internet Service Provider (ISP), then through various networks across the internet (wires, fiber optics) until it reaches the correct server.

4. The server receives the request and, since it’s formatted as an HTTP request, can understand what the browser is asking for.

5. The server then generates an HTTP response containing the data or page requested.

6. The server sends the response back through its ISP, routing it across the internet until it reaches your computer.

7. Once the browser receives this response, it reads it (since it’s formatted as an HTTP response) and then displays the requested content on your screen.

This cycle happens within moments, allowing you to see the website almost instantly after you hit enter!

I hope this blog helped you to understand how the web communicates in a beginner friendly way. Any feedbacks are appreciated. Stay tuned for more such blogs.Thank you for reading, and happy browsing!