Introducción a Ajax, Fetch API y Axios
Comunicación con el Servidor en Aplicaciones Web La comunicación con el servidor es esencial en el desarrollo de aplicaciones web, especialmente en el contexto de comercio electrónico. Permite a las aplicaciones obtener y enviar datos al servidor, lo que posibilita la actualización de información en tiempo real y la interacción con bases de datos y servicios web externos.
Ajax (Asynchronous JavaScript and XML) Ajax es una tecnología que permite realizar solicitudes al servidor en segundo plano sin necesidad de recargar la página completa. Esta técnica se basa en JavaScript y el objeto XMLHttpRequest para enviar y recibir datos de manera asíncrona.
Ejemplo de solicitud Ajax con JavaScript puro:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.ejemplo.com/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
Fetch API La Fetch API es una interfaz moderna para realizar solicitudes de red en JavaScript. Proporciona una forma más simple y promisificada de trabajar con solicitudes y respuestas HTTP.
Ejemplo de solicitud con Fetch API:
fetch("https://api.ejemplo.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Axios Axios es una biblioteca JavaScript que simplifica aún más las solicitudes HTTP. Es muy utilizada en el desarrollo frontend y backend debido a su facilidad de uso y su capacidad para manejar peticiones y respuestas de manera eficiente.
Ejemplo de solicitud con Axios:
axios.get("https://api.ejemplo.com/data")
.then(response => console.log(response.data))
.catch(error => console.error(error));
Ejercicio Práctico: Consulta de Productos
Ejercicio: Crea una página web que permita a los usuarios buscar productos de un catálogo. Implementa una función de búsqueda que utilice Fetch API para obtener resultados de una API de productos en tiempo real y muestre los resultados en la página.
<!DOCTYPE html>
<html>
<head>
<style>
#buscador {
width: 300px;
padding: 5px;
}
#resultados {
margin-top: 10px;
}
</style>
</head>
<body>
<input type="text" id="buscador" placeholder="Buscar productos">
<div id="resultados"></div>
<script>
const buscador = document.getElementById("buscador");
const resultados = document.getElementById("resultados");
buscador.addEventListener("input", function() {
const consulta = buscador.value;
fetch(`https://api.ejemplo.com/productos?q=${consulta}`)
.then(response => response.json())
.then(data => {
resultados.innerHTML = "";
data.forEach(producto => {
const elemento = document.createElement("div");
elemento.textContent = producto.nombre;
resultados.appendChild(elemento);
});
})
.catch(error => console.error(error));
});
</script>
</body>
</html>
Este ejercicio práctico permitirá a los lectores comprender cómo realizar solicitudes al servidor, procesar respuestas y mostrar datos en una página web. La comunicación con el servidor es esencial en aplicaciones de comercio electrónico para obtener información de productos, carros de compra y más.
Obtención de Datos del Servidor La obtención de datos del servidor es fundamental para mostrar información actualizada en una aplicación web. Puedes usar Fetch API o Axios para realizar solicitudes GET al servidor y obtener datos en formato JSON, por ejemplo.
Ejemplo de obtención de datos de productos con Fetch API:
fetch("https://api.ejemplo.com/productos")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Envío de Datos al Servidor El envío de datos al servidor es necesario para realizar acciones como agregar productos al carrito de compras, enviar información de inicio de sesión, o completar un proceso de compra. Las solicitudes POST son comunes para enviar datos al servidor.
Ejemplo de envío de datos al servidor con Fetch API:
const datos = {
productoId: 123,
cantidad: 2,
usuarioId: 456
};
fetch("https://api.ejemplo.com/agregar-al-carrito", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(datos)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Ejercicio Práctico: Cargar Datos de Productos desde una API
Ejercicio: Crea una página web que cargue y muestre datos de productos desde una API. Los usuarios deben ver una lista de productos con su nombre, precio y una imagen. Implementa una función que utilice Fetch API para obtener los datos de la API de productos y mostrarlos en la página.
<!DOCTYPE html>
<html>
<head>
<style>
.producto {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
display: inline-block;
}
.producto img {
max-width: 100px;
max-height: 100px;
}
</style>
</head>
<body>
<h1>Lista de Productos</h1>
<div id="productos"></div>
<script>
const productosContainer = document.getElementById("productos");
fetch("https://api.ejemplo.com/productos")
.then(response => response.json())
.then(data => {
data.forEach(producto => {
const productoDiv = document.createElement("div");
productoDiv.classList.add("producto");
const nombre = document.createElement("h2");
nombre.textContent = producto.nombre;
const precio = document.createElement("p");
precio.textContent = "Precio: $" + producto.precio;
const imagen = document.createElement("img");
imagen.src = producto.imagen;
productoDiv.appendChild(nombre);
productoDiv.appendChild(precio);
productoDiv.appendChild(imagen);
productosContainer.appendChild(productoDiv);
});
})
.catch(error => console.error(error));
</script>
</body>
</html>
Este ejercicio práctico permitirá a los lectores comprender cómo cargar datos de un servidor y mostrarlos en una página web. La obtención y envío de datos son esenciales en aplicaciones de comercio electrónico para mantener actualizada la información de productos y realizar acciones como agregar al carrito.
