Este artículo explora cómo realizar y gestionar solicitudes Ajax, centrándose en la configuración de cabeceras HTTP, especialmente para solicitudes POST.
Solicitud GET con Ajax
El siguiente ejemplo demuestra una solicitud GET básica utilizando XMLHttpRequest.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Solicitud GET Ajax</title>
<style>
#resultado{
width:200px;
height:100px;
border:solid 1px #4fad09;
}
</style>
</head>
<body>
<button>Enviar Petición</button>
<div id="resultado"></div>
<script>
const botonEnviar = document.getElementsByTagName('button')[0];
const divResultado = document.getElementById("resultado");
botonEnviar.onclick = function() {
const peticion = new XMLHttpRequest();
// Inicializa la petición GET con una URL específica y parámetros
peticion.open('GET', 'http://127.0.0.1:8000/servidor?param1=100¶m2=200¶m3=300');
peticion.send();
peticion.onreadystatechange = function() {
// Verifica si la petición se completó y fue exitosa
if (peticion.readyState === 4) {
if (peticion.status >= 200 && peticion.status < 300) {
// Muestra la respuesta del servidor en el div
divResultado.innerHTML = peticion.response;
}
}
};
};
</script>
</body>
</html>
Solicitud POST con Ajax y Cabeceras Presonalizadas
Este ejemplo ilustra cómo enviar una solicitud POST y añadir cabeceras personalizadas, como el tipo de contenido y un identificador.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Solicitud POST Ajax</title>
<style>
#resultado{
width:200px;
height:100px;
border:solid 1px #903;
}
</style>
</head>
<body>
<div id="resultado"></div>
<script>
const divResultado = document.getElementById("resultado");
divResultado.addEventListener("mouseover", function() {
const peticion = new XMLHttpRequest();
// Inicializa la petición POST a la URL del servidor
peticion.open('POST', 'http://127.0.0.1:8000/servidor');
// Establece la cabecera de tipo de contenido
peticion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Añade una cabecera personalizada 'identificador-cliente'
peticion.setRequestHeader('identificador-cliente', 'ejemplo-cliente');
// Envía los datos de la petición
peticion.send('datoA=100&datoB=200&datoC=300');
peticion.onreadystatechange = function() {
if (peticion.readyState === 4) {
if (peticion.status >= 200 && peticion.status < 300) {
// Muestra la respuesta del servidor
divResultado.innerHTML = peticion.response;
}
}
};
});
</script>
</body>
</html>
Servidor de Ejemplo (Node.js con Express)
El siguiente código muestra un servidor Express básico que maneja las solicitudes GET y POST, permitiendo el CORS.
// Importa express
const express = require('express');
// Crea una instancia de la aplicación Express
const app = express();
// Define la ruta para las solicitudes GET
app.get('/servidor', (req, res) => {
// Permite el acceso desde cualquier origen (CORS)
res.setHeader('Access-Control-Allow-Origin', '*');
// Envía una respuesta simple
res.send('¡Hola desde Ajax GET!');
});
// Maneja todas las solicitudes (incluyendo OPTIONS para preflight requests) al endpoint /servidor
app.all('/servidor', (req, res) => {
// Permite el acceso desde cualquier origen (CORS)
res.setHeader('Access-Control-Allow-Origin', '*');
// Permite cabeceras personalizadas
res.setHeader('Access-Control-Allow-Headers', '*');
// Envía una respuesta para solicitudes POST
res.send('¡Hola desde Ajax POST!');
});
// Inicia el servidor en el puerto 8000
app.listen(8000, () => {
console.log("Servidor iniciado y escuchando en el puerto 8000...");
});
Al ejecutar el servidor y abrir las páginas HTML en un navegador, se pueden observar las respuestas recibidas del servidor. La página de POST, al pasar el ratón sobre el área designada, mostrará la respuesta del servider, confirmando la recepción de la solicitud con las cabeceras personalizadas.