Introducción

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á.

Lado del servidor

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.

See the gist on github.

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.

JSON para comunicarse

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.

Lado del cliente

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í:

See the gist on github.

Ejecutando aplicación

Sólo fueron dos peticiones, pero al ejecutar el código pasa esto:

Lo que comprueba que realmente se están recibiendo los datos es la segunda impresión en la consola. Ya que dice que guardamos al usuario Luis, y ese nombre lo estamos recibiendo en PHP e imprimiéndolo para regresarlo.

Notas

Peticiones

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.

ES6

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.

Conclusión

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.