javascript

Carga de datos con AJAX y PHP: HTML y JSON

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

<?php
// Definimos variables del perfil, obviamente
// estas deberían de venir de una base de datos o de la sesión
$nombre = "Luis Cabrera";
$apodo = "Parzibyte";
$sitioWeb = "https://parzibyte.me/blog";
?>
<p><strong>Nombre</strong>: <?php echo $nombre ?></p>
<p><strong>Apodo</strong>: <?php echo $apodo ?></p>
<p><strong>Sitio web</strong>: <a href="<?php echo $sitioWeb ?>">Visitar</a> </p>

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:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ejemplo de AJAX con PHP</title>
    </head>
    <body>
        <h1>Mi perfil</h1>
        <button id="btnCargarPerfil">Cargar</button>
        <div id="perfil"></div>
        <script src="./script.js"></script>
    </body>
</html>

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:

const $btnCargarPerfil = document.querySelector("#btnCargarPerfil"),
    $perfil = document.querySelector("#perfil");
$btnCargarPerfil.addEventListener("click", () => {
    fetch("./perfil.php")
        .then(respuesta => respuesta.text())
        .then(respuestaComoHTML => {
            $perfil.innerHTML = respuestaComoHTML;
        });
});

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:

Lo que se hace es:

En el click del botón se hace una petición AJAX a PHP
PHP trae los datos dinámicos y renderiza un fragmento HTML
Ese fragmento se devuelve como HTML
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.

<?php
// Definimos variables del perfil, obviamente
// estas deberían de venir de una base de datos o de la sesión
$nombre = "Luis Cabrera";
$apodo = "Parzibyte";
$sitioWeb = "https://parzibyte.me/blog";
// Preparar el objeto que vamos a mostrar
$datos = [
    "nombre" => $nombre,
    "apodo" => $apodo,
    "sitioWeb" => $sitioWeb,
];
// Mostrar codificadas como JSON
echo json_encode($datos);

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:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ejemplo de AJAX con PHP</title>
    </head>
    <body>
        <h1>Mi perfil</h1>
        <button id="btnCargarPerfil">Cargar</button>
        <div>
            <strong>Nombre: </strong><p id="nombre"></p>
            <br>
            <strong>Apodo: </strong><p id="apodo"></p>
            <br>
            <strong>Sitio web: </strong><p id="web"></p>
            <br>
        </div>
        <script src="./script.js"></script>
    </body>
</html>

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:

const $btnCargarPerfil = document.querySelector("#btnCargarPerfil"),
    $perfil = document.querySelector("#perfil"),
    $nombre = document.querySelector("#nombre"),
    $apodo = document.querySelector("#apodo"),
    $web = document.querySelector("#web");
$btnCargarPerfil.addEventListener("click", () => {
    fetch("./perfil.php")
        .then(respuesta => respuesta.json())
        .then(perfil => {
            // Aquí hacer algo con la respuesta
            $nombre.textContent = perfil.nombre;
            $apodo.textContent = perfil.apodo;
            $web.textContent = perfil.sitioWeb;
        });
});

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:

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Siguiente Enviar formulario con AJAX y PHP »

Anterior « C y C++ | Validar si carácter es letra

Ver comentarios

Viviana dice:

junio 18, 2020 en 4:42 pm

Te felicito, excelente explicación para principiantes :)
Muchas gracias!
- parzibyte dice:
  
  junio 20, 2020 en 4:08 pm
  
  Le invito a seguirme y compartir para que pueda seguir escribiendo contenido como este.
  Saludos :)