Peticiones HTTP

Domina el concepto de petición HTTP, el pilar del desarrollo web. Aprende cómo el navegador solicita datos al servidor mediante la Fetch API, usando métodos, headers y el body para crear sitios dinámicos. ¡Lleva tu lógica de programación al siguiente nivel con esta guía práctica!

1. ¿Qué es una petición HTTP?

Una petición HTTP es una solicitud que un cliente, normalmente un navegador web o una aplicación JavaScript, envía a un servidor para pedir, enviar, actualizar o eliminar información a través de Internet.

Este proceso forma parte fundamental de la comunicación cliente-servidor y es la base del funcionamiento de páginas web modernas, APIs REST y aplicaciones desarrolladas con JavaScript.

Cada vez que ingresás a un sitio web, completás un formulario, iniciás sesión o consumís datos desde una API, el navegador realiza una petición HTTP al servidor. Luego, el servidor procesa la solicitud y devuelve una respuesta HTTP con los datos correspondientes.

1.1. Ejemplos:

• Cuando abrís una página web → el navegador solicita archivos HTML, CSS y JavaScript.
• Cuando hacés clic en un botón → JavaScript puede enviar una petición HTTP usando Fetch API.
• Cuando una aplicación consume una API → se utilizan peticiones HTTP para obtener datos en formato JSON.

1.2. ¿Para qué sirve?

En JavaScript, las peticiones HTTP son esenciales para trabajar con:

• Fetch API
• APIs REST
• AJAX
• Consumo de datos externos
• Aplicaciones dinámicas
• Manipulación del DOM con datos reales

El protocolo HTTP (HyperText Transfer Protocol) define las reglas que permiten la comunicación entre el cliente y el servidor.

1.3. Principales componentes de una petición HTTP.

Dentro de una petición HTTP intervienen elementos importantes como:

• URL o endpoint
• Método HTTP (GET, POST, PUT, DELETE)
• Headers
• Body o cuerpo de la petición
• Códigos de estado HTTP

2. URL

2.1. ¿Qué es una URL?

Una URL es la dirección que utiliza el navegador o una aplicación JavaScript para localizar y acceder a un recurso dentro de Internet o de un servidor. En el contexto de una petición HTTP, la URL indica exactamente a qué recurso quiere acceder el cliente.

La sigla URL significa:

Uniform Resource Locator
(Localizador Uniforme de Recursos)

Las URLs son fundamentales en el desarrollo web moderno porque permiten realizar peticiones HTTP hacia:

• páginas web,
• APIs REST,
• imágenes,
• archivos,
• bases de datos,
• servicios externos.

Cuando utilizas JavaScript con fetch(), una de las primeras cosas que necesitás proporcionar es precisamente una URL.

Ejemplo básico de URL

https://jsonplaceholder.typicode.com/usersLenguaje del código: JavaScript (javascript)

Esta URL le indica al navegador:

• qué protocolo utilizar,
• a qué servidor conectarse,
• y qué recurso solicitar.

2.2. Partes principales de una URL

Una URL está compuesta por diferentes secciones importantes.

Ejemplo:

https://jsonplaceholder.typicode.com/users?id=1Lenguaje del código: JavaScript (javascript)

2.2.1. Protocolo

https://Lenguaje del código: JavaScript (javascript)

El protocolo define cómo se realizará la comunicación.

Los más comunes son:

• HTTP
• HTTPS

Actualmente, HTTPS es el estándar porque cifra la información y mejora la seguridad.

2.2.2. Dominio

jsonplaceholder.typicode.comLenguaje del código: CSS (css)

Es el servidor o sitio web al que el cliente realizará la petición HTTP.

2.2.3. Ruta o Path

Aquí también se les suele llamar endpoint

/users

La ruta indica el recurso específico solicitado dentro del servidor.

En este caso:

• /users → solicita usuarios.

2.2.4. Query Parameters

?id=1

Son parámetros adicionales enviados en la URL para filtrar o personalizar la información.

Por ejemplo:

• buscar un usuario específico,
• ordenar datos,
• filtrar resultados,
• realizar búsquedas.

3. Métodos HTTP

3.1. ¿Qué son los métodos HTTP?

Los métodos HTTP son instrucciones que indican qué acción quiere realizar el cliente sobre un recurso dentro de un servidor o una API. Forman parte fundamental de cualquier petición HTTP y permiten que el navegador, JavaScript o una aplicación web se comunique correctamente con el backend.

Cada método HTTP tiene un propósito específico y le informa al servidor qué operación debe ejecutar.

3.2. ¿Por qué existen?

Los métodos HTTP existen para organizar y estandarizar la comunicación entre cliente y servidor.

Sin métodos HTTP, el servidor no sabría qué quiere hacer el cliente con los datos.

Por ejemplo:

• ¿Quiere obtener información?
• ¿Quiere crear nuevos datos?
• ¿Quiere actualizar un registro?
• ¿Quiere eliminar información?

Los métodos HTTP resuelven ese problema definiendo una acción clara para cada petición.

3.3. Métodos HTTP más importantes

3.3.1. GET → Obtener información

El método GET se utiliza para solicitar datos al servidor.

Es el método más utilizado en aplicaciones web.

Ejemplos:

• obtener usuarios,
• cargar productos,
• mostrar publicaciones,
• consumir APIs.

Ejemplo con Fetch API:

// Obtener datos desde una API usando GET

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "GET"
})
  .then(response => response.json())
  .then(data => {

    console.log(data);

  });Lenguaje del código: JavaScript (javascript)

3.3.2. POST → Enviar información

El método POST se utiliza para crear o enviar nuevos datos al servidor.

Ejemplos:

• registrar usuarios,
• enviar formularios,
• crear publicaciones,
• iniciar sesión.

Ejemplo:

// Enviar datos usando POST

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",

  headers: {
    "Content-Type": "application/json"
  },

  body: JSON.stringify({
    nombre: "Juan",
    email: "[email protected]"
  })
});Lenguaje del código: JavaScript (javascript)

3.3.3. PUT → Actualizar información completa

PUT se utiliza para reemplazar completamente un recurso existente.

Ejemplo:

• actualizar un perfil completo,
• reemplazar información en una base de datos.

// Actualizar datos usando PUT

fetch("https://jsonplaceholder.typicode.com/users/1", {
  method: "PUT",

  headers: {
    "Content-Type": "application/json"
  },

  body: JSON.stringify({
    nombre: "Carlos",
    email: "[email protected]"
  })
});Lenguaje del código: JavaScript (javascript)

3.3.4. PATCH → Actualizar parcialmente

PATCH se utiliza para modificar solamente una parte del recurso.

Por ejemplo:

• cambiar únicamente el nombre de usuario,
• actualizar un estado,
• modificar una propiedad específica.

// Modificar parcialmente un recurso

fetch("https://jsonplaceholder.typicode.com/users/1", {
  method: "PATCH",

  headers: {
    "Content-Type": "application/json"
  },

  body: JSON.stringify({
    nombre: "Nuevo nombre"
  })
});Lenguaje del código: JavaScript (javascript)

3.3.5. DELETE → Eliminar información

DELETE se utiliza para eliminar recursos del servidor.

Ejemplo:

• borrar usuarios,
• eliminar comentarios,
• quitar productos.

// Eliminar un recurso usando DELETE

fetch("https://jsonplaceholder.typicode.com/users/1", {
  method: "DELETE"
});Lenguaje del código: JavaScript (javascript)

4. Headers

4.1. ¿Qué son los headers HTTP?

Los headers HTTP son cabeceras o fragmentos de información adicional que viajan dentro de una petición HTTP o una respuesta HTTP.

Su función principal es proporcionar datos importantes sobre cómo debe procesarse la comunicación entre el cliente y el servidor.

Cada vez que el navegador realiza una petición HTTP, automáticamente envía distintos headers al servidor para indicar información relevante sobre la solicitud.

4.2. ¿Para qué sirven?

Los headers HTTP sirven para comunicar configuraciones y metadatos entre cliente y servidor.

Por ejemplo, permiten indicar:

• qué tipo de contenido se está enviando,
• qué formato de respuesta espera el cliente,
• información de autenticación,
• tokens de acceso,
• idioma,
• caché,
• cookies,
• permisos de seguridad.

Sin headers HTTP, muchas APIs modernas no podrían funcionar correctamente.

4.3. Header HTTP más importante:

4.3.1. Content-Type

Uno de los headers más utilizados es:

Content-Type

Este header le indica al servidor qué tipo de datos está enviando el cliente.

Por ejemplo:

Content-Type: application/jsonLenguaje del código: HTTP (http)

Significa: “Los datos enviados están en formato JSON”.

EJEMPLO práctico con Fetch API

// Datos que enviaremos al servidor
const usuario = {
  nombre: "Juan",
  email: "[email protected]"
};

// Petición HTTP POST
fetch("https://jsonplaceholder.typicode.com/users", {

  // Método HTTP
  method: "POST",

  // Headers HTTP
  headers: {

    // Indicamos que el body será JSON
    "Content-Type": "application/json"
  },

  // Convertimos el objeto JavaScript a JSON
  body: JSON.stringify(usuario)
})
  .then(response => response.json())
  .then(data => {

    console.log(data);

  });Lenguaje del código: JavaScript (javascript)

¿Qué ocurre en este ejemplo?

1. JavaScript crea la petición HTTP con fetch()
   • Genera una solicitud hacia la API.
2. Se agregan headers HTTP
   • Usamos Content-Type: application/json
   • Esto le avisa al servidor que los datos enviados están en formato JSON.
3. El servidor interpreta correctamente el body
   • Gracias al header HTTP, el backend sabe cómo procesar la información recibida.

4.3.2. Authorization

Se utiliza para enviar tokens de autenticación.

Ejemplo:

Authorization: Bearer TOKENLenguaje del código: HTTP (http)

Muy utilizado en:

• login,
• APIs privadas,
• autenticación JWT,
• aplicaciones seguras.

4.3.3. Accept

Indica qué tipo de respuesta espera recibir el cliente.

Ejemplo:

Accept: application/jsonLenguaje del código: HTTP (http)

4.3.4. Cache-Control

Controla el comportamiento de la caché.

Ejemplo:

Cache-Control: no-cacheLenguaje del código: HTTP (http)

4.4. Diferencia entre headers y body

5. Body

5.1. ¿Qué es el «Body» de una petición?

El body (o cuerpo) de una petición HTTP es el contenedor donde se transportan los datos que el cliente envía al servidor. Si imaginamos la petición como una carta, la URL y los Headers son el sobre con la dirección y los sellos, mientras que el body es el contenido del mensaje que va dentro.

A diferencia de la URL, que tiene una capacidad de caracteres limitada y es visible para todos, el body puede transportar grandes cantidades de información de forma estructurada.

5.2. ¿Cuándo es necesario usar el Body?

No todas las peticiones necesitan un cuerpo. Su uso depende estrictamente del método HTTP que estemos utilizando y de la acción que queramos realizar:

1. En métodos POST, PUT y PATCH:
   • Es obligatorio o altamente recomendado. Se utiliza cuando necesitamos enviar datos complejos al servidor, como la información de un nuevo usuario, la actualización de un perfil o la carga de un archivo.
2. En métodos GET y DELETE:
   • Normalmente no tienen body. En un GET, la información para filtrar o buscar datos se envía a través de la URL (Query Params), ya que el estándar HTTP no define un comportamiento claro para un cuerpo en este tipo de peticiones.

5.3. Formatos comunes de datos en el Body

Para que el servidor pueda leer la información que enviamos en el cuerpo, los datos deben estar en un formato que ambos entiendan.

En el desarrollo moderno con JavaScript, los más utilizados son:

1. JSON (JavaScript Object Notation):
   • Es el estándar de la industria. Enviamos un objeto convertido a texto.
   • Ejemplo: {"username": "dev_user", "email": "[email protected]"}
2. FormData:
   • En FormData se utiliza principalmente cuando necesitamos enviar archivos (imágenes, PDFs) o datos de formularios HTML de manera tradicional.
3. Raw Text / HTML:
   • Menos común, se usa para enviar texto plano o fragmentos de código.

5.4. Ejemplo práctico con la Fetch API

Cuando programas en JavaScript y quieres usar el body, debes recordar dos pasos críticos: definir el método correcto y convertir tus datos a una cadena de texto (generalmente con JSON.stringify).

const datosUsuario = {
    id: 101,
    comentario: "¡Excelente tutorial de JS!"
};

fetch('https://api.ejemplo.com/comentarios', {
    method: 'POST', // Método que permite el uso de body
    headers: {
        'Content-Type': 'application/json' // Avisamos que el body es un JSON
    },
    body: JSON.stringify(datosUsuario) // Convertimos el objeto a texto para el envío
});Lenguaje del código: JavaScript (javascript)

En resumen, el body es la herramienta que nos permite mover datos desde nuestra aplicación (el DOM) hacia la base de datos del servidor de manera segura y organizada.

6. Códigos de estado

6.1. ¿Qué son los códigos de estado HTTP?

Los códigos de estado HTTP son números de tres dígitos que el servidor envía al navegador para informarle sobre el resultado de una petición. Son, en esencia, la respuesta del servidor a la pregunta que le hizo nuestro código JavaScript: «¿Se pudo completar la tarea?».

Estos códigos son fundamentales para el manejo de errores en el desarrollo frontend, ya que permiten que nuestra aplicación tome decisiones automáticas (como mostrar un mensaje de error o redirigir al usuario) basándose en la respuesta recibida.

6.2. Clasificación y significado de los códigos

Para que sean fáciles de interpretar, los códigos de estado se dividen en cinco categorías según su primer dígito:

6.2.1. 1xx: Respuestas Informativas

Indican que la petición ha sido recibida y el proceso continúa. Son poco comunes de manejar directamente en el código del lado del cliente.

6.2.2. 2xx: Peticiones Exitosas (Success)

Significan que la acción fue recibida, entendida y aceptada correctamente.

• 200 OK: La petición estándar exitosa.
• 201 Created: La petición tuvo éxito y se creó un nuevo recurso (común tras un POST).

6.2.3. 3xx: Redirecciones

Indican que el navegador necesita realizar una acción adicional para completar la petición, como ir a una URL diferente.

• 301 Moved Permanently: El recurso se movió a una nueva dirección para siempre.
• 304 Not Modified: Indica que el recurso no ha cambiado y se puede usar la versión guardada en caché.

6.2.4. 4xx: Errores del Cliente

Indican que hubo un problema con la petición enviada por el navegador.

• 400 Bad Request: El servidor no entiende la petición por un error de sintaxis.
• 401 Unauthorized: Falta autenticación válida para el recurso.
• 404 Not Found: El recurso solicitado no existe en el servidor.

6.2.5. 5xx: Errores del Servidor

Indican que la petición era correcta, pero el servidor falló al intentar procesarla.

• 500 Internal Server Error: Un error genérico en el código del servidor.
• 503 Service Unavailable: El servidor está saturado o en mantenimiento.

6.3. Cómo interpretar los códigos en JavaScript

Cuando utilizamos la Fetch API, el navegador no lanza un error automáticamente si el código es un 404 o un 500. Es responsabilidad del desarrollador verificar el estado de la respuesta para evitar que la aplicación falle silenciosamente.

El objeto response nos proporciona dos herramientas clave:

1. response.status: Devuelve el número exacto del código (ej. 404).
2. response.ok: Un booleano que es true si el código está en el rango de los exitosos (200-299).

fetch('https://api.ejemplo.com/datos')
    .then(response => {
        if (!response.ok) {
            // Manejo específico según el código de estado
            if (response.status === 404) {
                console.error("El recurso solicitado no fue encontrado.");
            } else if (response.status === 500) {
                console.error("Error interno del servidor.");
            }
            throw new Error(`Error en la petición: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error("Error detectado:", error));Lenguaje del código: JavaScript (javascript)

En resumen, los códigos de estado son el sistema de señales que permite que el cliente y el servidor se mantengan sincronizados sobre el éxito o fracaso de cada interacción.

7. ¿Cómo es el flujo de ejecución de una petición HTTP?

El flujo de ejecución de una petición HTTP es el proceso completo que ocurre desde que el cliente realiza una solicitud hasta que el servidor devuelve una respuesta.

Cada vez que una aplicación web obtiene datos, envía formularios o interactúa con un backend, ocurre internamente un flujo HTTP.

Flujo general de una petición HTTP

Usuario
   ↓
JavaScript inicia petición HTTP
   ↓
El navegador envía la solicitud
   ↓
El servidor recibe la petición
   ↓
El servidor procesa la información
   ↓
El servidor genera una respuesta HTTP
   ↓
El navegador recibe la respuesta
   ↓
JavaScript procesa los datos
   ↓
El DOM se actualiza dinámicamente

Explicación paso a paso del flujo HTTP

7.1. El usuario realiza una acción

Todo comienza normalmente con una interacción en la interfaz.

Por ejemplo:

• hacer clic en un botón,
• enviar un formulario,
• abrir una página,
• buscar información,
• iniciar sesión.

Ejemplo:

<button id="btn">Obtener usuarios</button>Lenguaje del código: HTML, XML (xml)

7.2. JavaScript inicia la petición HTTP

JavaScript utiliza Fetch API para comunicarse con el servidor.

// Botón del DOM
const boton = document.getElementById("btn");

// Evento click
boton.addEventListener("click", () => {

  // Iniciar petición HTTP
  fetch("https://jsonplaceholder.typicode.com/users");

});Lenguaje del código: JavaScript (javascript)

En este momento:

• el navegador prepara la solicitud,
• agrega headers,
• configura método HTTP,
• y construye la petición completa.

Estructura interna de la petición HTTP

La petición puede contener:

Método HTTP → GET
URL → /users
Headers → Content-Type
Body → datos (si existen)

7.3. El navegador envía la petición al servidor

El navegador realiza la comunicación utilizando el protocolo HTTP o HTTPS.

Cliente (Navegador)
        ↓
Petición HTTP
        ↓
Servidor / API

La solicitud viaja por Internet hasta llegar al servidor.

7.4. El servidor recibe y procesa la petición

El backend analiza:

• método HTTP,
• endpoint,
• headers,
• body,
• autenticación,
• parámetros.

Por ejemplo:

GET /users

El servidor entiende que debe devolver una lista de usuarios.

7.5. El servidor genera una respuesta HTTP

Después de procesar la solicitud, el servidor responde con:

• status HTTP,
• headers,
• datos,
• errores,
• archivos,
• JSON.

Ejemplo:

Status: 200 OK
Content-Type: application/jsonLenguaje del código: HTTP (http)

7.6. El navegador recibe la respuesta HTTP

JavaScript obtiene acceso a la respuesta mediante Fetch API.

// Realizar petición HTTP
fetch("https://jsonplaceholder.typicode.com/users")

  // Recibir respuesta HTTP
  .then(response => {

    // Verificar código HTTP
    console.log(response.status);

    // Convertir respuesta a JSON
    return response.json();
  });Lenguaje del código: JavaScript (javascript)

7.7. JavaScript procesa los datos

Una vez convertidos los datos a JSON, JavaScript puede utilizarlos.

// Procesar datos recibidos
.then(data => {

  console.log(data);

});Lenguaje del código: JavaScript (javascript)

Aquí normalmente:

• recorremos arrays,
• manipulamos objetos,
• renderizamos contenido,
• actualizamos el DOM.

7.8. El DOM se actualiza dinámicamente

Finalmente, la interfaz cambia con la nueva información obtenida desde la API.

// Contenedor HTML
const contenedor = document.getElementById("usuarios");

// Mostrar usuarios dinámicamente
data.forEach(usuario => {

  contenedor.innerHTML += `
    <p>${usuario.name}</p>
  `;
});Lenguaje del código: JavaScript (javascript)

7.9. Ejemplo completo del flujo HTTP

// ==========================================
// 1. SELECCIONAR ELEMENTO DEL DOM
// ==========================================

const boton = document.getElementById("btn");
const contenedor = document.getElementById("usuarios");


// ==========================================
// 2. ESCUCHAR EVENTO DEL USUARIO
// ==========================================

boton.addEventListener("click", async () => {

  try {

    // ==========================================
    // 3. INICIAR PETICIÓN HTTP
    // ==========================================

    const response = await fetch(
      "https://jsonplaceholder.typicode.com/users"
    );

    // ==========================================
    // 4. VALIDAR RESPUESTA HTTP
    // ==========================================

    if (!response.ok) {
      throw new Error("Error HTTP");
    }

    // ==========================================
    // 5. CONVERTIR RESPUESTA A JSON
    // ==========================================

    const usuarios = await response.json();

    // ==========================================
    // 6. ACTUALIZAR EL DOM
    // ==========================================

    usuarios.forEach(usuario => {

      contenedor.innerHTML += `
        <p>${usuario.name}</p>
      `;
    });

  } catch (error) {

    // ==========================================
    // 7. MANEJAR ERRORES HTTP
    // ==========================================

    console.error(error);
  }
});Lenguaje del código: JavaScript (javascript)