Si queremos hacer peticiones AJAX utilizando Javascript y PHP sin complicarnos las cosas, podemos utilizar una librería que es muy popular en el mundo de VueJS.
Pero hoy no hablaremos de éste framework, sino de axios: una librería para hacer peticiones HTTP asíncronas.
Es muy fácil de configurar y provee algunos métodos que a cualquier desarrollador le vendrían bien.
Para explicarlo mejor, haremos 4 operaciones HTTP: GET, POST, PUT y DELETE. Del lado del servidor utilizaremos PHP sin ningún framework. Vamos allá.
Supondremos que todas las peticiones serán realizadas a un mismo archivo PHP, y qué este se encargará de ver cuál método se está llamando. Y para efectos prácticos vamos a imaginar que es una API para gestionar usuarios y ventas.
El código para responder a cada solicitud queda como se ve a continuación. Simplemente leemos cuál es el método de petición, dependiendo de ello evaluamos la ruta, y respondemos. Este es un método que aunque sirve, es un poco difícil de mantener.
Sin embargo, esto sólo es ilustrativo para no confundir al lector. Si queremos algo más robusto para manejar las rutas en PHP, podemos leer este post.
<?php
$metodo = $_SERVER["REQUEST_METHOD"];
$ruta = implode("/", array_slice(explode("/", $_SERVER["REQUEST_URI"]), 3));
$datos = json_decode(file_get_contents("php://input"));
switch($metodo){
case 'GET':
switch ($ruta) {
case 'usuarios':
echo json_encode("Te doy los usuarios");
break;
case 'ventas':
echo json_encode("Te doy las ventas");
break;
}
break;
case 'POST':
switch ($ruta) {
case 'usuario':
$nombreUsuario = $datos->nombre;
//Aquí podríamos acceder a otras propiedades
echo json_encode("Guardamos un nuevo usuario con el nombre " . $nombreUsuario);
break;
case 'venta':
echo json_encode("Guardamos una venta");
break;
}
break;
case 'PUT':
switch ($ruta) {
case 'usuario':
echo json_encode("Actualizar un usuario");
break;
case 'venta':
echo json_encode("Actualizar una venta");
break;
}
break;
case 'DELETE':
switch ($ruta) {
case 'usuario':
echo json_encode("Eliminar un usuario");
break;
case 'venta':
echo json_encode("Eliminar una venta");
break;
}
break;
}
?>Obviamente en lugar de un echo, llamaríamos a una función, una función de un controlador, conectaríamos a la base de datos o cualquier cosa.
Estamos utilizando JSON para realizar la comunicación. Prefiero este método a cualquier otro, ya que podemos mandar un objeto, un objeto con arreglos, un arreglo de objetos, etcétera (cualquiera cosa que esté en formato JSON) y después, al decodificarlo del lado del servidor, conservará su estructura, así como los tipos de datos: los strings serán strings, los flotantes flotantes, y lo mismo para los booleanos y enteros.
Es por ello que con PHP utilizamos json_decode para decodificar los datos. Y luego, cuando respondemos, hacemos un json_encode. Así, respondemos y recibimos en el mismo formato.
Por defecto, Axios serializa los datos. Así que ya no tenemos que utilizar JSON.stringify (o cualquier método que usemos).
Si no utilizáramos Axios, Javascript provee dos funciones para trabajar con JSON: JSON.stringify para codificar, y JSON.parse para el proceso contrario.
Pero en este caso Axios sabe que JSON es un buen formato, así que él mismo codifica y decodifica los datos. Es decir, cuando hacemos una petición, codifica internamente los datos antes de enviarlos. Y cuando recibe la respuesta, antes de mandarla, la decodifica.
El código para hacer las peticiones queda así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título</title>
<script src="https://cdn.rawgit.com/axios/axios/master/dist/axios.min.js"></script>
<script>
/*
Configurar una constante global
para definir, por ejemplo, una URL base.
Si esta URL cambia, sólo la cambiamos una vez
*/ const HTTP = axios.create({
baseURL: "./servidor.php/"
})
HTTP
.get("/usuarios") // Es como concatenar './servidor.php/' y 'usuarios'
.then(respuesta => {
console.log("Petición GET de usuarios terminada. Respuesta: ", respuesta.data);
});
let usuario = {
nombre: "Luis",
correo: "luis@gmail.com",
edad: 10,
cliente: false,
amigos: [
{
nombre: "John Doe",
correo: "john.doe@gmail.com",
edad: 5
}
]
};
HTTP
.post("/usuario", usuario)
.then(respuesta => {
console.log("Petición POST de usuario terminada. Respuesta: ", respuesta.data);
});
</script>
</head>
<body>
<h1>Peticiones con Axios</h1>
</body>
</html>Sólo fueron dos peticiones, pero al ejecutar el código pasa esto:
En el ejemplo sólo llamé al método POST y GET. Como pudimos ver, con POST accedemos a los datos desde la variable obtenida de php://input.
Lo mismo podemos hacer con PUT, recordemos que los datos viajarán en el cuerpo, no en la URL. Aunque sí podemos poner algo como un id en la dirección.
Finalmente, quiero aclarar que en PHP podemos hacer un echo igualmente de un objeto o arreglo, no debemos limitarnos a una cadena. Y tampoco debemos limitarnos a un “echo”. Podemos hacer un printf o cualquier cosa que imprima datos. O igualmente podemos no imprimir nada.
Por cierto, utilicé sintaxis moderna de Javascript. Por ejemplo, let, funciones flecha y const. Estos estándares todavía no están soportados en todos los navegadores, pero sí en la mayoría. Puedes rescribirlos si gustas.
En lugar de let y const sería var. Y en lugar de la función flecha, sería una función anónima.
Si combinamos esta librería del lado del cliente con una librería como Phroute del lado del servidor, podemos armar una API robusta con la arquitectura cliente servidor utilizando la comunicación REST.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios
Gran Gran codigo
Gracias por tus comentarios :)
Te invito a suscribirte a mi blog en la barra lateral derecha. Saludos