En este post te mostraré a traer datos desde PHP usando AJAX. En el primer ejemplo veremos cómo inyectar una página web (fragmento de HTML) a través de AJAX.

Dentro del segundo ejemplo veremos cómo traer datos JSON desde PHP de igual manera usando AJAX.

Fragmento de página web usando AJAX

Veamos el primer ejemplo de traer datos con AJAX usando JavaScript, desde un servidor PHP. Lo que haremos será traer un fragmento de una página web o un componente, por ejemplo, un div con la información del usuario.

Estos componentes son reutilizables y permiten separar los datos. El servidor queda así:

See the gist on github.

Lo único que hacemos es renderizar unos párrafos con la información de un usuario (la misma podría venir de una base de datos, pero este es un ejemplo simple).

Si visitamos la página normalmente, se verá esto:

Nuestro componente está listo, ahora vamos a traerlo e invocarlo con AJAX. Definimos nuestra página maestra que tendrá un div en donde se va a inyectar el componente:

See the gist on github.

El componente en cuestión es un div con el id perfil. El mismo será cargado cuando se presione el botón de Cargar.

Veamos el script de JavaScript, que es el que realmente hace la llamada:

See the gist on github.

Definimos nuestros elementos del DOM usando querySelector. La magia sucede en la línea 4 que es en donde hacemos una petición AJAX con JavaScript, solicitamos la página perfil.php previamente mostrada.

Cuando la promesa de fetch se resuelva decodificamos los datos como texto y luego colocamos la respuesta como innerHTML de nuestro div.

El resultado es:

Puedes probar el ejemplo aquí.

Lo que se hace es:

1. En el click del botón se hace una petición AJAX a PHP
2. PHP trae los datos dinámicos y renderiza un fragmento HTML
3. Ese fragmento se devuelve como HTML
4. JavaScript inyecta ese fragmento dentro de la página

No recomiendo mucho este método, pues es mejor regresar los datos como JSON o como un formato entendible por varios lenguajes.

Obtener datos JSON con AJAX y PHP

Ahora veamos otro enfoque en donde simplemente necesitamos datos como JSON para luego mostrarlos con JavaScript.

Para traer algunos datos JSON con JavaScript y PHP comenzamos definiendo el script de PHP que se encargará de mostrar los datos como JSON.

Recuerda que en la vida real, los datos deberían venir de una base de datos pero aquí los pongo así para simplificar.

See the gist on github.

En este caso estamos mostrando un objeto JSON, codificando la información con PHP. Esto podría ser un objeto, un arreglo, un arreglo de objetos o cualquier cosa.

Si visitamos la página veremos el JSON de nuestro objeto:

Eso es lo que va a consumir JavaScript, pero antes de eso veamos la vista. En este caso tenemos varios elementos que van a tener una pieza de información:

See the gist on github.

Tenemos 3 párrafos en donde volcaremos la información del objeto. Si a ti no te gusta estar definiendo párrafos, podrías dibujar los datos de manera dinámica. Veamos el script:

See the gist on github.

Hacemos una petición AJAX a PHP en la línea 7, pero ahora decodificamos como JSON automáticamente. Ahora en la resolución de la promesa tenemos el objeto perfil como un objeto de JavaScript; le colocamos el valor a cada elemento de la página web.

Esto es para ejemplificar, ya dije anteriormente que puedes usar los datos para otro tipo de cosas. Pero bueno, al ejecutar pasa esto:

Puedes probar el ejemplo aquí.

Diferencia entre cargar JSON y HTML

No voy a explicar la diferencia entre los formatos, sino entre la carga de cada uno de ellos.

Cuando se sirve HTML, el mismo ya no se puede modificar de manera fácil y se obtiene junto, todo el fragmento. No puedes reutilizar o extraer un dato pequeño.

En cambio, si se sirve JSON, se puede acceder a datos más granulares y colocarlos en distintos lugares, además de que se pueden reutilizar. Otra ventaja es que otros lenguajes hablan JSON así que sería muy fácil armar una API que sea consumida con Java para Android, por ejemplo.

Conclusión

Así es como se hacen llamadas AJAX con JavaScript, a un servidor con PHP.

En próximos tutoriales traeré un ejemplo de un envío de formulario usando AJAX.