📨 HTTP Request/Response Cycle

What Is HTTP?

HTTP (HyperText Transfer Protocol) is the set of rules that governs how clients and servers exchange messages on the web. It defines the exact shape of a request, the exact shape of a response, and the vocabulary — methods, status codes, headers — they use to understand each other.

Invented by Tim Berners-Lee in the early 1990s, HTTP has grown through several versions — HTTP/1.1 (the readable text-based workhorse), HTTP/2 (binary and multiplexed for speed), and HTTP/3 (built on QUIC for lower latency). The semantics you'll learn here — methods, status codes, headers — are the same across all of them.

One property matters more than any other: HTTP is stateless. The server remembers nothing between requests. Each message must carry everything the server needs to fulfil it — which is exactly why tokens and cookies exist.

The Mail System Analogy

HTTP maps neatly onto sending a letter through the post:

Status codes are the delivery notifications: 200 OK is "delivered, here's the reply"; 301 is "the recipient moved, I forwarded it"; 404 is "no one at this address"; 500 is "the recipient got it but had a breakdown answering." Like the post, HTTP relies on everyone following the same agreed formats.

Anatomy of a Request

Every HTTP request has the same four parts, in order:

• Start line — the method, the path, and the HTTP version (e.g. GET /api/products HTTP/1.1).
• Headers — metadata: Host, Accept, Authorization, Content-Type, and more.
• Blank line — a single empty line marking the end of the headers.
• Body — the payload, present on requests that send data (POST, PUT, PATCH).

HTTP methods

The method declares your intent. Two properties matter: a safe method doesn't change server state, and an idempotent method has the same effect whether you send it once or ten times.

A sample POST that creates a user:

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

{
  "name": "John Doe",
  "email": "john.doe@example.com"
}

Anatomy of a Response

A response mirrors the request's structure — the only difference is the first line, which reports the outcome instead of stating a method.

• Status line — HTTP version, a status code, and a reason phrase (e.g. HTTP/1.1 200 OK).
• Headers — metadata about the response: Content-Type, Content-Length, Cache-Control, Set-Cookie…
• Blank line — separates headers from the body.
• Body — the actual content: HTML, JSON, an image, or nothing at all (as with 204 No Content).

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 165
Cache-Control: max-age=3600

{
  "id": 42,
  "name": "Wireless Headphones",
  "price": 99.99,
  "inStock": true,
  "categories": ["electronics", "audio"]
}

Status Codes

Status codes fall into five ranges. Learn the ranges first, then the handful of specific codes you'll meet daily.

The ones you'll actually use

• 200 OK — success (GET, PUT, PATCH).
• 201 Created — a POST created a new resource.
• 204 No Content — success with nothing to return (often DELETE).
• 301 / 302 — moved permanently / found (temporary redirect).
• 304 Not Modified — your cached copy is still good.
• 400 Bad Request — malformed or invalid input.
• 401 Unauthorized — you're not authenticated (log in).
• 403 Forbidden — authenticated, but not allowed.
• 404 Not Found — no such resource.
• 429 Too Many Requests — you've been rate-limited.
• 500 Internal Server Error — an unhandled server-side failure.
• 503 Service Unavailable — server temporarily overloaded or down.

Headers in Depth

Headers are the knobs and dials of an HTTP exchange. A few you'll reach for constantly:

• Content-Type — the format of the body (application/json, text/html, multipart/form-data).
• Accept — the formats the client can handle in the response.
• Authorization — credentials, usually Bearer <token>.
• Cache-Control — how (and whether) the response may be cached.
• Set-Cookie / Cookie — how servers and clients pass small state back and forth.
• Location — where to go on a 3xx redirect or after a 201 Created.

Security headers you should know

The Full Cycle

Typing a URL and pressing Enter kicks off a chain of steps far longer than "send request, get response." Here's the whole journey.

1. DNS resolution — translate the domain name into an IP address.
2. Connection — a TCP handshake, and for HTTPS a TLS handshake to encrypt the channel.
3. Request — the browser sends the HTTP request over that connection.
4. Server processing — the server routes the request, runs logic, and queries data stores.
5. Response — the server sends back a status code, headers, and a body.
6. Client processing — the browser parses the response, renders it, and fires off new requests for CSS, JS, and images.

With HTTP/2 and HTTP/3, steps 3–5 can be multiplexed — many requests and responses share one connection at once, eliminating the "wait in line" delays of HTTP/1.1.

Handling HTTP in Code

Here's the same small API — list users and create a user — in each backend language, so you can see how the concepts map to real handlers. Notice how the pieces line up: read query params or the body, validate, then respond with the right status code.

Node.js (Express)

import express from 'express';
const app = express();
app.use(express.json());

// GET with query parameters
app.get('/api/users', (req, res) => {
  const page  = Number(req.query.page)  || 1;
  const limit = Number(req.query.limit) || 10;
  res.status(200).json({
    users: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }],
    page, limit, total: 100,
  });
});

// POST with validation -> 201 Created
app.post('/api/users', (req, res) => {
  const { name, email } = req.body;
  if (!name || !email) {
    return res.status(400).json({ error: 'Name and email are required' });
  }
  res.status(201).json({ id: 3, name, email });
});

app.listen(3000, () => console.log('Listening on http://localhost:3000'));

Python (Flask)

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/users', methods=['GET'])
def get_users():
    page  = request.args.get('page', 1, type=int)
    limit = request.args.get('limit', 10, type=int)
    return jsonify(
        users=[{'id': 1, 'name': 'John'}, {'id': 2, 'name': 'Jane'}],
        page=page, limit=limit, total=100
    ), 200

@app.route('/api/users', methods=['POST'])
def create_user():
    data = request.get_json() or {}
    name, email = data.get('name'), data.get('email')
    if not name or not email:
        return jsonify(error='Name and email are required'), 400
    return jsonify(id=3, name=name, email=email), 201

if __name__ == '__main__':
    app.run(port=3000)

PHP

<?php
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];
$path   = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);

if ($method === 'GET' && $path === '/api/users') {
    $page  = (int)($_GET['page']  ?? 1);
    $limit = (int)($_GET['limit'] ?? 10);
    http_response_code(200);
    echo json_encode([
        'users' => [['id' => 1, 'name' => 'John'], ['id' => 2, 'name' => 'Jane']],
        'page' => $page, 'limit' => $limit, 'total' => 100,
    ]);
} elseif ($method === 'POST' && $path === '/api/users') {
    $data  = json_decode(file_get_contents('php://input'), true) ?? [];
    $name  = $data['name']  ?? null;
    $email = $data['email'] ?? null;
    if (!$name || !$email) {
        http_response_code(400);
        echo json_encode(['error' => 'Name and email are required']);
        exit;
    }
    http_response_code(201);
    echo json_encode(['id' => 3, 'name' => $name, 'email' => $email]);
} else {
    http_response_code(404);
    echo json_encode(['error' => 'Route not found']);
}

Hands-on Exercise

POST /api/login HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "username": "john.doe",
  "password": "secretpassword123"
}

Summary & Quiz

📚 Further Reading

• MDN Web Docs — HTTP
• MDN — HTTP status codes
• MDN — Cross-Origin Resource Sharing (CORS)

🚀 What's Next?

You now know the shape of every HTTP message. Next we go deeper into the vocabulary itself in HTTP Methods, Headers, and Status Codes — sharpening your instinct for choosing exactly the right ones.