Understand How The Web Works(part2): what do you need to know about http?

Today, we’re diving into HTTP — the backbone of web communication. Let’s break it down in simple terms!

What is HTTP?

HTTP stands for Hypertext Transfer Protocol, created in the early 1990s and has been extended several times. Think of it as the language that web browsers and web servers use to talk to each other. When you type a URL into your browser, you’re essentially asking to start an HTTP conversation with a web server.

How does HTTP work?

HTTP works on a request-response model:

1. Your browser sends an HTTP request to a server
2. The server processes that request
3. The server sends back an HTTP response

It’s like ordering food at a restaurant. You (the client) ask for a dish (the request), and the kitchen (the server) prepares and sends it back (the response).

HTTP Methods:

HTTP uses different ‘verbs’ or methods to specify what kind of action we want to perform. The most common ones are:

1. GET: Ask for data from a server. Like saying, “Can I see the menu?”
2. POST: Send data to a server. Like placing an order.
3. PUT: Update existing data on a server. Like asking to change your order.
4. DELETE: Remove data from a server. Like cancelling your order.

And these methods are used to perform the actions: create, read, update and delete

There are others like PATCH, HEAD, OPTIONS, but these four are the main ones you’ll encounter.

HTTP Requests and Responses: A Closer Look

HTTP Requests:

When you type a URL in your browser or click a link, your browser sends an HTTP request to the server. This request is like a carefully formatted letter, and it contains several parts:

1. Request Line: This is the first line of the request. It includes:

• The HTTP method (GET, POST, etc.)
• The path of the resource being requested
• The HTTP version being used

Example: GET /index.html HTTP/1.1

2. Headers: These are additional pieces of information about the request. Some common headers include:

• Host: The domain name of the server (e.g., www.example.com)
• User-Agent: Information about the browser making the request
• Accept: The types of content the client can understand
• Cookie: Any cookies the client has for this site

3. Body: This is optional and usually used with POST or PUT requests. It contains data being sent to the server, like form data.

Here’s what a simple HTTP request might look like:

HTTP Responses:

After the server receives and processes the request, it sends back an HTTP response. This response also has a specific structure:

1. Status Line: This is the first line of the response. It includes:

• The HTTP version
• A status code
• A reason phrase (a brief description of the status)

Example: HTTP/1.1 200 OK

2. Headers: Similar to request headers, these provide additional information about the response. Common headers include:

• Content-Type: The type of data in the response (e.g., text/html for web pages)
• Content-Length: The size of the response body
• Date: When the response was generated
• Server: Information about the server software

3. Body: This contains the actual content of the response, like the HTML of a web page.

Here’s what a simple HTTP response might look like:

HTTP Status Codes:

When a server responds, it includes a status code to let you know what happened. These codes are grouped into categories:

• 100–199: Informational responses
• 200–299: Successful responses
• 300–399: Redirection messages
• 400–499: Client error responses
• 500–599: Server error responses

Some common ones you might see:

• 200 OK: Everything worked!
• 404 Not Found: The page doesn’t exist
• 500 Internal Server Error: Something went wrong on the server

Why is understanding HTTP important?

As a web developer, knowing HTTP helps you:

1. Debug issues when things go wrong
2. Build more efficient and secure web applications
3. Understand how APIs work (they use HTTP too!, Fetch Api…etc.)

That’s HTTP in a nutshell! Next time you’re browsing the web, remember there’s a whole conversation happening behind the scenes. Cool, right?

In our next post, we’ll dive deeper into how other client server architecture applications are structured. Stay curious!

Resources:

https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/HTTP_Basics.html