HTTP & HTTPS: Historia, Anatomía Interactiva y Todos sus Métodos

Cada vez que abres un navegador, ves un emoji o pides comida online — HTTP trabaja silenciosamente detrás. Es el lenguaje de la web. HTTPS es su versión cifrada que protege tus datos. En esta guía veremos su historia, anatomía y demos interactivas en vivo.

🌐 ¿Qué es HTTP?

HTTP (HyperText Transfer Protocol) es un protocolo de la capa de aplicación, basado en mensajes de texto, cliente-servidor y stateless (sin estado): cada petición es independiente. El cliente envía un request, el servidor responde con un response. Punto.

Originalmente diseñado para transferir documentos HTML entre máquinas en CERN, hoy mueve todo: APIs REST/GraphQL, video streaming, IoT, gaming en la nube, modelos de IA. Su simplicidad es su super poder.

🔐 ¿Qué es HTTPS?

HTTPS (HTTP Secure) es exactamente HTTP — pero envuelto en una capa de cifrado TLS (antes SSL). Tres garantías:

• Confidencialidad — nadie en la red puede leer el contenido (cifrado simétrico AES).
• Integridad — ningún atacante puede alterar los datos en tránsito (HMAC).
• Autenticidad — el cliente verifica que está hablando con el servidor real (certificados X.509).

📜 Historia de HTTP

🛡️ Historia de HTTPS / SSL / TLS

🎬 Demo Interactivo: Anatomía de una petición HTTP

Click en cualquier método. Verás el paquete viajar del navegador al servidor, los headers reales que se envían y la respuesta típica. Cada método tiene una semántica distinta:

GET /api/users HTTP/1.1
Host: api.example.com
Accept: application/json
User-Agent: Mozilla/5.0
Authorization: Bearer eyJ...

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 142

[
  {"id":1,"name":"Andrés"},
  {"id":2,"name":"María"}
]

📋 Los Métodos HTTP en Profundidad

Cada método tiene tres propiedades clave: Safe (no modifica recursos), Idempotent (N llamadas = 1 llamada en efecto) y Body (admite cuerpo en el request).

🔐 Demo Interactivo: Handshake TLS 1.3

Cuando entras a una URL https://..., antes del primer byte HTTP ocurre un handshake TLS. En TLS 1.3 toma 1 RTT (round-trip-time). Click Reproducir para ver el flujo paso a paso:

🚦 Códigos de Estado HTTP

Click cualquier código para ver su significado:

Las 5 clases de status codes:

• 1xx Informational — petición recibida, continuando.
• 2xx Success — petición exitosa.
• 3xx Redirection — más acciones necesarias.
• 4xx Client Error — la petición tiene problemas.
• 5xx Server Error — el servidor falló al procesar.

🚄 Demo Interactivo: HTTP/1.1 vs HTTP/2 (Multiplexing)

La diferencia más visible entre HTTP/1.1 y HTTP/2 es cómo manejan múltiples requests. HTTP/1.1 los hace en serie (con head-of-line blocking). HTTP/2 los multiplex en paralelo. Click para ver:

☕ Ejemplos: Backend Spring Boot (Java)

Un controller REST completo en Spring Boot que implementa todos los métodos contra una entidad User:

package com.example.api;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.util.*;

@RestController
@RequestMapping("/api/users")
public class UserController {

    private final Map<Long, User> store = new HashMap<>();

    // ── GET /api/users → listar todos ──
    @GetMapping
    public List<User> listAll() {
        return new ArrayList<>(store.values());
    }

    // ── GET /api/users/{id} → obtener uno ──
    @GetMapping("/{id}")
    public ResponseEntity<User> getOne(@PathVariable Long id) {
        User u = store.get(id);
        return u != null
            ? ResponseEntity.ok(u)
            : ResponseEntity.notFound().build();
    }

    // ── POST /api/users → crear nuevo (no idempotente) ──
    @PostMapping
    public ResponseEntity<User> create(@RequestBody User u) {
        u.setId(System.currentTimeMillis());
        store.put(u.getId(), u);
        return ResponseEntity.status(201).body(u);
    }

    // ── PUT /api/users/{id} → reemplazo completo (idempotente) ──
    @PutMapping("/{id}")
    public User replace(@PathVariable Long id, @RequestBody User u) {
        u.setId(id);
        store.put(id, u);
        return u;
    }

    // ── PATCH /api/users/{id} → modificación parcial ──
    @PatchMapping("/{id}")
    public User patch(@PathVariable Long id, @RequestBody Map<String, Object> patch) {
        User u = store.get(id);
        if (patch.containsKey("name")) u.setName((String) patch.get("name"));
        if (patch.containsKey("email")) u.setEmail((String) patch.get("email"));
        return u;
    }

    // ── DELETE /api/users/{id} → eliminar (idempotente) ──
    @DeleteMapping("/{id}")
    public ResponseEntity<Void> delete(@PathVariable Long id) {
        store.remove(id);
        return ResponseEntity.noContent().build();  // 204
    }

    // ── HEAD se genera automáticamente desde el GET ──

    // ── OPTIONS → describe métodos permitidos (CORS preflight) ──
    @RequestMapping(method = RequestMethod.OPTIONS)
    public ResponseEntity<Void> options() {
        return ResponseEntity.ok()
            .header("Allow", "GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS")
            .build();
    }
}

📜 Ejemplos: Frontend con fetch (JavaScript)

Cómo invocar el backend anterior desde JavaScript moderno con la API fetch:

// ── GET: leer todos los usuarios ──
const users = await fetch("/api/users").then(r => r.json());

// ── POST: crear usuario ──
const created = await fetch("/api/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Andrés", email: "a@x.com" })
}).then(r => r.json());

// ── PUT: reemplazar (todos los campos requeridos) ──
await fetch(`/api/users/${created.id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Andrés Pacheco", email: "ap@x.com" })
});

// ── PATCH: modificar solo email ──
await fetch(`/api/users/${created.id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email: "new@x.com" })
});

// ── DELETE: eliminar ──
await fetch(`/api/users/${created.id}`, { method: "DELETE" });

// ── HEAD: ¿existe el recurso? ──
const res = await fetch("/api/users/123", { method: "HEAD" });
console.log(res.ok, res.headers.get("Last-Modified"));

// ── OPTIONS: descubrir capacidades ──
const opts = await fetch("/api/users", { method: "OPTIONS" });
console.log(opts.headers.get("Allow"));