En este post te mostraré cómo hacer una petición JSON usando JavaScript y PHP como lenguaje de servidor.
Recuerda que ya hablamos sobre la definición de JSONP en otro post.
Nota: aquí está la demostración, y aquí el repositorio de GitHub.
Resumen
Vamos a hacer dos tipos de peticiones, una de ventas y otra de clientes. Al final el script de PHP dará un script de JavaScript que llama a una función.
Por ejemplo:
Ese es un script de JavaScript ficticio, creado por PHP. Como ves, solo se está llamando a la función especificada en la ruta, como veremos más adelante.
Lado del cliente
En el lado del cliente tenemos dos botones, uno para pedir ventas y otro para pedir clientes. Comenzamos definiendo la vista:
En la vista estamos cargando el script de JavaScript; no te confundas, ese es el script que se encarga de manejar la lógica del lado del cliente y de hacer las peticiones JSONP.
Ahora veamos el contenido del script de JavaScript:
Se comienza definiendo ambos callbacks, que serán las funciones llamadas cuando la petición termine.
Dentro de esas funciones tenemos los datos traídos del servidor, y estamos listos para trabajar con ellos. En este caso solo imprimimos en la consola para ejemplificar y simplificar.
Ambos botones tienen un comportamiento similar, solo cambia la URL. En el primero es:
./jsonp.php?callback=procesarClientes&peticion=clientes
Y en el segundo es:
./jsonp.php?callback=procesarVentas&peticion=ventas
Como ves, estamos solicitando a un script de PHP, ya que la extensión del archivo no importa mientras regrese un encabezado indicando el tipo de contenido.
Para solicitar el script creamos un elemento de tipo script, lo adjuntamos para que se cargue y después lo removemos.
Recuerda que cuando el script haya cargado, el código que trae se evaluará.
Lado del servidor
En PHP el script es más sencillo, es importante mencionar que debemos poner el encabezado de tipo de dato en application/javascript:
Leemos los valores de la URL para saber qué datos nos están pidiendo, y después de algunas comparaciones codificamos los datos con json_encode; creamos una cadena de respuesta y escribimos código de JavaScript con PHP.
La línea que dice $callback($datosCodificados) va a evaluar a algo como lo siguiente:
procesarClientes([{“nombre”:”Luis”,”fecha_registro”:”2019-07-17″},{“nombre”:”Mar\u00eda Jos\u00e9″,”fecha_registro”:”2019-07-18″}])
Es como una concatenación.
La salida será la siguiente, variando los casos dependiendo del callback y petición:
Al evaluarse, se llamará a la función callback que ya definimos; dentro de esa función ya podemos procesar los datos.
Obviamente puedes regresar los datos de distintas fuentes, por ejemplo, de una base de datos de MySQL, PostgreSQL, SQL Server, MongoDB o SQLite.
También puedes poner parámetros adicionales en la URL, todo puede ser modificado a tu gusto.
Demostración
En el siguiente gif se puede ver cómo el callback de cada petición es invocado. Esto se logra solicitando un script de JavaScript que se evalúa dentro de nuestro código de JavaScript.
Puedes ver un ejemplo en vivo aquí, y acceder al repositorio en GitHub.
