Cargar Información usando AJAX

AJAX

Hola amigos, en un artículo anterior realizamos un CRUD haciendo uso de AJAX, para algunas funciones pero no realizamos la lectura de la información de la base de datos de manera asíncrona, que será el tema fundamental de esta entrada, crearemos un fichero PHP el cual contendrá el llamado a nuestra base de datos y mediante AJAX realizaremos su respectivo llamado, logrando así cargar la información en una tabla sin necesidad de recargar la página, sin más veamos:

Estableciendo nuestra conexión (Ya visto en esta entrada, y en esta.):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
function Conectar (){
    $conn = null;
    $host = '127.0.0.1';
    $db =   'clientes';
    $user = 'root';
    $pwd =  'root';
    try {
        $conn = new PDO('mysql:host='.$host.';dbname='.$db, $user, $pwd);
    }
    catch (PDOException $e) {
        echo 'No se pudo conectar a la base de datos !!';
        exit;
    }
    return $conn;
 }
?>

Ahora crearemos el fichero que se encargará de realizar la consulta a la base de datos (fichero PHP):

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
require("conexion.php");
$con = Conectar();
$sql = "SELECT nombres, apellidos, ocupacion FROM registros";
$stmt = $con->prepare($sql);
$results = $stmt->execute();
$rows = $stmt->fetchAll(\PDO::FETCH_OBJ);
foreach ($rows as $row) {
    print($row->nombres);
    print($row->apellidos);
    print($row->ocupacion)."<br />";
}
?>

Nada más nos queda por crear una pagina en la cual ejecutar la acción mediante AJAX podemos llamarla index.php así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
  <head>
    <title>AJAX</title>
  </head>
  <body>
    <button type="button" onclick="getDatos();" name="button">Cargar</button>
    <div id="Resultado">
    </div>
  </body>
  <script type="text/javascript">
  function getDatos(){
    var xmlhttp;
    if (window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
    }else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("Resultado").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","consulta.php",true);
    xmlhttp.send();
  }
  </script>
</html>

Es solo una pagina con el botón para realizar la acción con el fin de mirar solo el código que interesa, ustedes posteriormente pueden jugar con estilos e imágenes para presentar mucho mejor la información.
La capeta del proyecto queda así:
AJAX
Posteriormente si vamos a la ruta del proyecto mediante el navegador podemos ver que al hacer click en el botón, nuestros datos son cargados sin recargar la página.
ajax
Como pueden ver, mediante AJAX podemos hacer llamadas a una base de datos (Consulta) y obtener los datos sin recargar la página mediante JavaScript, así mismo sin hacer uso de POST.

¡Suscríbete a mi canal, para acceder a más contenidos gratuitos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *