Miguel Miranda

Posted on May 17

HTTP? 🤔 The Web's Unsung Hero Explained

#networking #beginners #webdev

🌍 A Bit of History — Where HTTP Came From

Back in 1989, Tim Berners-Lee invented the World Wide Web (WWW). But it wasn’t just websites — it was a system of protocols, and one of them was HTTP: the HyperText Transfer Protocol.

HTTP was designed as a simple way to send hypertext (HTML) documents between computers. This allowed the user to experience a more dynamic and interactive way to access information.

Since then, HTTP has evolved (currently at HTTP/3), but its core idea hasn’t changed:

"Let the client ask, and let the server answer."

That basic principle powers nearly every web app today. Without HTTP, the internet would not look, feel, or behave as it does.

Request vs response:

📡 What Is an HTTP Request and Response?

When your browser opens a website, it sends an HTTP request.

The server replies with an HTTP response.

🟦 Request Structure

An HTTP request typically includes:

Start line: Method (GET, POST, PUT, DELETE), path, protocol version
Headers: Info like content type, length, user-agent, tokens.
Body: Optional — used in methods like POST or PUT to send information to the server.

🟨 Response Structure

A server sends back:

Start line: Protocol version + status code like so:

1xx - Informational

2xx – Success

3xx – Redirection

4xx – Client Error

5xx – Server Error

Headers: Metadata like content-type, caching rules
Body: Often contains the HTML or JSON payload

📸 Request vs Response diagram:

💻 Example: Making an HTTP Request in TypeScript

Let’s say we want to send a POST request with JSON to an API:

async function sendData() {
  const response = await fetch("https://api.example.com/data", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name: "Miguel", email: "miguel@example.com" }),
  });

  if (!response.ok) {
    console.error("Request failed with status:", response.status);
    return;
  }

  const data = await response.json();
  console.log("Response data:", data);
}

As we can see the fetch sent a Post Request:

{
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name: "Miguel", email: "miguel@example.com" }),
  }

This includes, of course the three main parts of a HTTP request.

📶 TCP/IP Model (Where’s HTTP?)

HTTP sits at the Application layer of the TCP/IP model:

Application ← HTTP lives here 🌐
Transport ← TCP handles the delivery 📦
Internet ← IP takes care of addresses 📮
Link ← Ethernet/WiFi physically connects ⚡

Key Things to Keep in Mind:

HTTP is a stateless protocol.

Each request is independent. The server doesn’t remember the last thing you asked.
The connection is not bidirectional meaning the server cannot send request by himself to the client.
If you want persistent connections, you need tools like WebSockets, which are also another type of protocol we use daily, like in videogames, videocalls or chats.

🧠 Final Thoughts
HTTP may feel invisible, but it’s everywhere. It silently handles the exchange of information between browser and server.

📚 References

MDN Web Docs – HTTP Overview – The most complete and reliable documentation for web protocols.
MDN Web Docs – fetch() API – Official reference for making HTTP requests in JavaScript and TypeScript.

👋 If you found this article interesting or want to get in touch, I’m active on X @mirchezz

DEV Community