Configuración de un servidor Express con Node.js
Express es un marco de desarrollo minimalista basado en Node.js. A continuación, se muestra un ejemplo de cómo configurar un servidor básico.
const express = require('express');
const servidor = express();
servidor.get('/api', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.send('Respuesta de Express');
});
servidor.listen(3000, () => {
console.log("Servidor activo en el puerto 3000");
});
El método servidor.listen() vincula la aplicación a un puerto específico y comienza a escuchar solicitudes. El primer parámetro es el puerto, y el segundo es una función de retrollamada que se ejecuta al iniciar.
res.setHeader('Access-Control-Allow-Origin', '*') establece el encabezado de respuesta para permitir el acceso cross-origin a cualquier origen.
Solicitud GET básica con Ajax
Para realizar una solicitdu GET, se puede usar el siguiente código HTML y JavaScript.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo Ajax GET</title>
<style>
#contenedor {
width: 200px;
height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<button id="btnObtener">Obtener Datos</button>
<div id="contenedor"></div>
<script>
const boton = document.getElementById('btnObtener');
const contenedor = document.getElementById('contenedor');
boton.addEventListener('click', () => {
const solicitud = new XMLHttpRequest();
solicitud.open('GET', 'http://127.0.0.1:3000/api');
solicitud.send();
solicitud.onreadystatechange = () => {
if (solicitud.readyState === 4) {
if (solicitud.status >= 200 && solicitud.status < 300) {
contenedor.innerHTML = solicitud.response;
}
}
};
});
</script>
</body>
</html>
La función document.getElementById() selecciona un elemento por su identificador único, mientras que document.getElementsByTagName() devuelve una colección de elementos por nombre de etiqueta.
Transmisión de parámetros
Parámetros en solicitudes GET
Para enviar parámetros en una solicitud GET, se anexan directamente a la URL después de un signo de interrogación.
Parámetros en solicitudes POST
<script>
const contenedor = document.getElementById('contenedor');
contenedor.addEventListener('mouseover', () => {
const solicitud = new XMLHttpRequest();
solicitud.open('POST', 'http://127.0.0.1:3000/api');
solicitud.send("param1=valor1¶m2=valor2");
solicitud.onreadystatechange = () => {
if (solicitud.readyState === 4) {
if (solicitud.status >= 200 && solicitud.status < 300) {
contenedor.innerHTML = solicitud.response;
}
}
};
});
</script>
El cuerpo de la solicitud se pasa como argumento al método send().
Configuración de encabezados de solicitud
const solicitud = new XMLHttpRequest();
solicitud.open('POST', 'http://127.0.0.1:3000/api');
solicitud.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
solicitud.setRequestHeader('X-Custom-Header', 'valor');
solicitud.send('dato=ejemplo');
Para manejar encabezados personalizados en el servidor, se debe permitir todos los métodos y encabezados.
servidor.all('/api', (req, res) => {
res.setHeader('Access-Control-Allow-Headers', '*');
res.setHeader('Access-Control-Allow-Origin', '*');
res.send('Respuesta con encabezados personalizados');
});
Respuestas en formato JSON
El servidor puede enviar datos JSON convirtiendo objetos a cadenas.
servidor.get('/json', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
const datos = { nombre: 'ejemplo' };
res.send(JSON.stringify(datos));
});
En el cliente, se puede configurar responseType para parsear automáticamente la respuesta.
solicitud.open('GET', 'http://127.0.0.1:3000/json');
solicitud.responseType = 'json';
solicitud.send();
solicitud.onreadystatechange = () => {
if (solicitud.readyState === 4 && solicitud.status === 200) {
console.log(solicitud.response.nombre);
}
};
Manejo de tiempos de espera y errores de red
El servidor puede simular un retraso para probar el manejo de tiempos.
servidor.get('/demora', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
setTimeout(() => {
res.send('Respuesta retrasada');
}, 3000);
});
En el cliente, se definen propiedades para el tiempo de espera y funciones de retrollamada para errores.
const solicitud = new XMLHttpRequest();
solicitud.timeout = 2000;
solicitud.ontimeout = () => {
contenedor.innerHTML = "Tiempo de espera excedido";
};
solicitud.onerror = () => {
contenedor.innerHTML = "Error de red";
};
solicitud.open('GET', 'http://127.0.0.1:3000/demora');
solicitud.send();
document.querySelector() y document.getElementById() tienen diferencias: el primero es más flexible para selectores complejos, pero el segundo es más rápido para identificadores únicos.
Cancelación de solicitudes
let solicitudActual = null;
botonEnviar.addEventListener('click', () => {
solicitudActual = new XMLHttpRequest();
solicitudActual.open('GET', 'http://127.0.0.1:3000/endpoint');
solicitudActual.send();
solicitudActual.onreadystatechange = () => {
if (solicitudActual.readyState === 4 && solicitudActual.status === 200) {
contenedor.innerHTML = solicitudActual.response;
}
};
});
botonCancelar.addEventListener('click', () => {
if (solicitudActual) {
solicitudActual.abort();
}
});
El método abort() cancela la solicitud en curso.
Uso de jQuery para Ajax
Métodos GET y POST
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$('button').eq(0).click(() => {
$.post('http://127.0.0.1:3000/jquery', { clave: 'valor' }, (data) => {
$('#contenedor').html(JSON.stringify(data));
});
});
</script>
Método genérico $.ajax()
$.ajax({
url: 'http://127.0.0.1:3000/jquery',
type: 'POST',
data: { id: 1, nombre: 'test' },
dataType: 'json',
timeout: 3000,
headers: { 'X-Token': 'abc123' },
success: (resultado) => {
$('#contenedor').html(resultado);
},
error: () => {
console.error('Fallo en la solicitud');
}
});
Uso de Axios para Ajax
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios.defaults.baseURL = 'http://127.0.0.1:3000';
boton.addEventListener('click', () => {
axios.get('/axios', {
params: { consulta: 'ejemplo' },
headers: { 'Authorization': 'Bearer token' }
}).then((respuesta) => {
contenedor.innerHTML = respuesta.data;
});
});
</script>
El parámetro params se usa para enviar datos en la URL de solicitudes GET.
Recursos compartidos cross-origin (CORS)
Ajax sigue la política de mismo origen, requiriendo el mismo protocolo, host y puerto. Para permitir el acceso cross-origin, el servidor debe establecer encabezados de respuesta apropiados, como Access-Control-Allow-Origin.