Comprender las solicitudes/respuestas HTTP 📡

Cuando visitas un sitio web o usas una aplicación, ¿cómo se comunican la computadora y el servidor? ¡Utilizan una regla llamada HTTP! Déjame explicártelo de una manera simple, incluso para principiantes.

¿Comparar HTTP con la vida cotidiana?

Comparemos HTTP con un pedido en un restaurante.

La historia del restaurante 🍽️

Cliente: "¡Pasta por favor!" (solicitud)
Camarero: Transmite a la cocina
Cocina: Prepara la pasta
Camarero: "¡Aquí está tu pasta!" (respuesta)
Cliente: Recibe la pasta

HTTP funciona igual:

Navegador: "¡index.html por favor!" (solicitud HTTP)
Servidor: Encuentra el archivo
Servidor: "¡Aquí está!" (respuesta HTTP)
Navegador: Muestra la página

Definición de HTTP

HTTP (HyperText Transfer Protocol)

Reglas para el intercambio de datos entre el navegador web y el servidor
Protocolo = reglas acordadas
Método de comunicación básico de la web

Flujo de solicitud/respuesta HTTP

┌──────────┐                                 ┌──────────┐
│          │   ── Solicitud HTTP (Request) → │          │
│Navegador │                                 │ Servidor │
│          │   ← Respuesta HTTP (Response) ──│          │
└──────────┘                                 └──────────┘

Proceso completo

Solicitud (Request): El navegador solicita algo al servidor
Procesamiento (Processing): El servidor procesa la solicitud
Respuesta (Response): El servidor envía el resultado al navegador
Renderizado (Rendering): El navegador muestra en la pantalla

Métodos HTTP (métodos de solicitud)

Son verbos que le dicen al servidor "cómo" hacer algo.

1. GET 📖

"Obtener" - Solicitar datos

GET /products/123

Ejemplos:

Ver una página web
Obtener resultados de búsqueda
Ver lista de productos

Características:

Solo obtiene datos
No modifica los datos del servidor
Los datos son visibles en la URL
Se puede marcar como favorito

Uso real:

https://google.com/search?q=javascript
                         └───────┬──────┘
                         Parámetros GET

2. POST 📝

"Crear" - Enviar nuevos datos al servidor

POST /users
{
  "name": "Juan García",
  "email": "juan@example.com"
}

Ejemplos:

Registro de miembros
Escribir una publicación
Hacer un pedido

Características:

Crea datos en el servidor
Los datos están en el cuerpo (Body)
Los datos no son visibles en la URL
No se puede marcar como favorito

3. PUT ✏️

"Modificar" - Reemplazar completamente los datos existentes

PUT /users/123
{
  "name": "María López",
  "email": "maria@example.com"
}

Ejemplos:

Modificar todo el perfil
Modificar toda la publicación

4. PATCH 🔧

"Modificar parcialmente" - Cambiar solo una parte de los datos existentes

PATCH /users/123
{
  "email": "newemail@example.com"
}

Ejemplos:

Cambiar solo el correo electrónico
Cambiar solo la contraseña

5. DELETE 🗑️

"Eliminar" - Borrar datos

DELETE /users/123

Ejemplos:

Eliminar cuenta
Eliminar publicación
Eliminar producto

Tabla comparativa de métodos HTTP

Método	Uso	Modificación de datos	Ubicación de datos
GET	Consulta	❌	URL
POST	Creación	✅	Body
PUT	Modificación completa	✅	Body
PATCH	Modificación parcial	✅	Body
DELETE	Eliminación	✅	URL

Estructura de una solicitud HTTP

GET /api/users?page=1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token123

{Datos del cuerpo (para POST, PUT, PATCH)}

Componentes

Línea de solicitud: GET /api/users HTTP/1.1
- Método: GET
- Ruta: /api/users
- Versión HTTP: 1.1

Encabezados (Headers): Información adicional

Host: ¿Qué servidor?
User-Agent: ¿Qué navegador?
Accept: ¿Qué formato recibir?
Authorization: Información de autenticación

Cuerpo (Body): Datos reales (POST, PUT, PATCH)

Estructura de una respuesta HTTP

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

{
  "id": 1,
  "name": "Juan García"
}

Componentes

Línea de estado: HTTP/1.1 200 OK
- Versión HTTP: 1.1
- Código de estado: 200
- Mensaje de estado: OK

Encabezados (Headers): Información de respuesta

Content-Type: ¿Qué formato?
Content-Length: Tamaño de datos

Cuerpo (Body): Datos reales

Códigos de estado HTTP 🚦

El servidor indica "qué sucedió" con un número.

2xx - Éxito ✅

Código	Significado	Descripción
200	OK	¡Éxito!
201	Created	Recién creado
204	No Content	Éxito pero nada que enviar

3xx - Redirección 🔄

Código	Significado	Descripción
301	Moved Permanently	Movido permanentemente
302	Found	Temporalmente en otro lugar
304	Not Modified	No modificado, usar caché

4xx - Error del cliente ❌

Código	Significado	Descripción
400	Bad Request	Solicitud incorrecta
401	Unauthorized	Se requiere iniciar sesión
403	Forbidden	Sin autorización
404	Not Found	No encontrado
429	Too Many Requests	Demasiadas solicitudes

5xx - Error del servidor 🔥

Código	Significado	Descripción
500	Internal Server Error	Problema del servidor
502	Bad Gateway	Error de puerta de enlace
503	Service Unavailable	Servicio no disponible

Consejo

¡Consulta todos los códigos de estado en HTTP Status Guide!

Ejemplos prácticos

Ejemplo 1: Búsqueda 🔍

Solicitud:

GET https://google.com/search?q=javascript

Respuesta:

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>Resultados de búsqueda...</body>
</html>

Ejemplo 2: Inicio de sesión 🔐

Solicitud:

POST https://api.example.com/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "password123"
}

Respuesta (éxito):

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

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": 1,
    "name": "Juan García"
  }
}

Respuesta (fallo):

HTTP/1.1 401 Unauthorized
Content-Type: application/json

{
  "error": "Invalid email or password"
}

Ejemplo 3: Crear publicación ✍️

Solicitud:

POST https://api.example.com/posts
Content-Type: application/json
Authorization: Bearer token123

{
  "title": "Primera publicación",
  "content": "¡Hola!"
}

Respuesta:

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 42,
  "title": "Primera publicación",
  "content": "¡Hola!",
  "createdAt": "2025-01-23T10:30:00Z"
}

Ejemplo 4: Modificar perfil ✏️

Solicitud:

PATCH https://api.example.com/users/me
Content-Type: application/json
Authorization: Bearer token123

{
  "email": "newemail@example.com"
}

Respuesta:

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

{
  "id": 1,
  "name": "Juan García",
  "email": "newemail@example.com"
}

Ejemplo 5: Eliminar publicación 🗑️

Solicitud:

DELETE https://api.example.com/posts/42
Authorization: Bearer token123

Respuesta:

HTTP/1.1 204 No Content

Comprender los encabezados HTTP

Encabezados de solicitud comunes

Content-Type: application/json    # Formato de datos enviados
Accept: application/json           # Formato de datos deseados
Authorization: Bearer token123     # Token de autenticación
User-Agent: Mozilla/5.0...         # Información del navegador
Cookie: session=abc123             # Cookie

Encabezados de respuesta comunes

Content-Type: application/json    # Formato de datos de respuesta
Content-Length: 1234               # Tamaño de datos
Set-Cookie: session=abc123         # Configurar cookie
Cache-Control: no-cache            # Configuración de caché
Access-Control-Allow-Origin: *     # Configuración CORS

Usar herramientas HTTP

Practicar con API Tester

En API Tester:

Ingresar URL
Seleccionar método (GET, POST, PUT, DELETE)
Agregar encabezados
Escribir cuerpo (POST, PUT, PATCH)
¡Hacer clic en el botón Send!

Ejemplo de práctica

Prueba de solicitud GET:

URL: https://api.github.com/users/github
Method: GET

Resultado:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  ...
}

Preguntas frecuentes (FAQ)

P1: ¿Cuándo usar GET y POST?

GET: Consultar datos (solo lectura)
POST: Crear datos (escritura)

P2: ¿Cuál es la diferencia entre PUT y PATCH?

PUT: Reemplaza todo

PUT /users/1
{"name": "María López", "email": "maria@example.com", "age": 25}

PATCH: Solo modifica una parte

PATCH /users/1
{"email": "newemail@example.com"}

P3: ¿Por qué ocurre el error 404?

R: ¡Cuando no se puede encontrar la página o datos solicitados!

Error de ortografía en la URL
Página eliminada
Ruta incorrecta

P4: ¿Qué es el error 500?

R: ¡El servidor tiene un problema!

Error de código del servidor
Fallo de conexión a la base de datos
Sobrecarga del servidor

P5: ¿Qué diferencia hay entre HTTPS y HTTP?

R: ¡Se agregó seguridad!

HTTP: Transmisión en texto plano (visible para todos)
HTTPS: Transmisión cifrada (seguro) 🔒

CRUD y métodos HTTP

CRUD = Operaciones básicas de datos

CRUD	Significado	Método HTTP
Create	Crear	POST
Read	Leer	GET
Update	Actualizar	PUT / PATCH
Delete	Eliminar	DELETE

Ejemplo: Publicaciones de blog

Ver lista de publicaciones:  GET /posts
Leer publicación:            GET /posts/123
Crear publicación:           POST /posts
Modificar publicación:       PUT /posts/123
Eliminar publicación:        DELETE /posts/123

API RESTful

REST = Método de diseño que utiliza HTTP eficazmente

Buen diseño de API ✅

GET    /users          # Lista de usuarios
GET    /users/123      # Usuario específico
POST   /users          # Crear usuario
PUT    /users/123      # Modificar usuario
DELETE /users/123      # Eliminar usuario

Mal diseño de API ❌

GET  /getUsers
POST /createUser
POST /updateUser
POST /deleteUser

Próximos pasos 🚀

Si has entendido HTTP:

✅ API Tester - Enviar solicitudes HTTP directamente
✅ HTTP Status Guide - Aprender todos los códigos de estado
✅ cURL Converter - Convertir comandos cURL
✅ ¿Qué es una API? - Revisar el concepto de API
✅ Comprender el formato de datos JSON - Datos intercambiados a través de HTTP

Conclusión

¡HTTP es la base de la web! 🌐

Puntos para recordar:

GET: Consulta (lectura)
POST: Creación (escritura)
PUT/PATCH: Modificación
DELETE: Eliminación
Códigos de estado: 2xx (éxito), 4xx (error del cliente), 5xx (error del servidor)

¡Experimentando con API Tester te familiarizarás rápidamente! 🎉

Ahora, ¿entiendes cómo se comunican los sitios web y los servidores?

¿Comparar HTTP con la vida cotidiana?​

La historia del restaurante 🍽️​

Definición de HTTP​

Flujo de solicitud/respuesta HTTP​

Proceso completo​

Métodos HTTP (métodos de solicitud)​

1. GET 📖​

2. POST 📝​

3. PUT ✏️​

4. PATCH 🔧​

5. DELETE 🗑️​

Tabla comparativa de métodos HTTP​

Estructura de una solicitud HTTP​

Componentes​

Estructura de una respuesta HTTP​

Componentes​

Códigos de estado HTTP 🚦​

2xx - Éxito ✅​

3xx - Redirección 🔄​

4xx - Error del cliente ❌​

5xx - Error del servidor 🔥​

Ejemplos prácticos​

Ejemplo 1: Búsqueda 🔍​

Ejemplo 2: Inicio de sesión 🔐​

Ejemplo 3: Crear publicación ✍️​

Ejemplo 4: Modificar perfil ✏️​

Ejemplo 5: Eliminar publicación 🗑️​

Comprender los encabezados HTTP​

Encabezados de solicitud comunes​

Encabezados de respuesta comunes​

Usar herramientas HTTP​

Practicar con API Tester​

Ejemplo de práctica​

Preguntas frecuentes (FAQ)​

P1: ¿Cuándo usar GET y POST?​

P2: ¿Cuál es la diferencia entre PUT y PATCH?​

P3: ¿Por qué ocurre el error 404?​

P4: ¿Qué es el error 500?​

P5: ¿Qué diferencia hay entre HTTPS y HTTP?​

CRUD y métodos HTTP​

Ejemplo: Publicaciones de blog​

API RESTful​

Buen diseño de API ✅​

Mal diseño de API ❌​

Próximos pasos 🚀​

Conclusión​

¿Comparar HTTP con la vida cotidiana?

La historia del restaurante 🍽️

Definición de HTTP

Flujo de solicitud/respuesta HTTP

Proceso completo

Métodos HTTP (métodos de solicitud)

1. GET 📖

2. POST 📝

3. PUT ✏️

4. PATCH 🔧

5. DELETE 🗑️

Tabla comparativa de métodos HTTP

Estructura de una solicitud HTTP

Componentes

Estructura de una respuesta HTTP

Componentes

Códigos de estado HTTP 🚦

2xx - Éxito ✅

3xx - Redirección 🔄

4xx - Error del cliente ❌

5xx - Error del servidor 🔥

Ejemplos prácticos

Ejemplo 1: Búsqueda 🔍

Ejemplo 2: Inicio de sesión 🔐

Ejemplo 3: Crear publicación ✍️

Ejemplo 4: Modificar perfil ✏️

Ejemplo 5: Eliminar publicación 🗑️

Comprender los encabezados HTTP

Encabezados de solicitud comunes

Encabezados de respuesta comunes

Usar herramientas HTTP

Practicar con API Tester

Ejemplo de práctica

Preguntas frecuentes (FAQ)

P1: ¿Cuándo usar GET y POST?

P2: ¿Cuál es la diferencia entre PUT y PATCH?

P3: ¿Por qué ocurre el error 404?

P4: ¿Qué es el error 500?

P5: ¿Qué diferencia hay entre HTTPS y HTTP?

CRUD y métodos HTTP

Ejemplo: Publicaciones de blog

API RESTful

Buen diseño de API ✅

Mal diseño de API ❌

Próximos pasos 🚀

Conclusión