Saltar al contenido

Base de datos AJAX

Introducción

En este artículo, exploraremos cómo utilizar PHP, Ajax y bases de datos para crear páginas web dinámicas que mejoren la experiencia y el compromiso del usuario.

¿Qué es PHP?

PHP es un lenguaje de scripting del lado del servidor utilizado para desarrollar aplicaciones web. PHP es fácil de aprender y es compatible con varios sistemas operativos como Linux, macOS y Windows. PHP tiene una amplia gama de aplicaciones, desde el desarrollo de páginas web hasta la creación de aplicaciones de escritorio independientes.

¿Qué es Ajax?

Ajax es una técnica utilizada en el desarrollo web que permite actualizar las páginas web de forma asíncrona sin necesidad de recargar toda la página. Ajax permite la creación de páginas web dinámicas que pueden responder a la entrada del usuario en tiempo real.

¿Qué es una base de datos?

Una base de datos es una colección estructurada de datos a la que se puede acceder, gestionar y actualizar. Las bases de datos se utilizan en el desarrollo web para almacenar datos que pueden ser consultados y manipulados para proporcionar contenido dinámico a los usuarios.

Uso de PHP, Ajax y bases de datos para crear páginas web dinámicas

PHP, Ajax y las bases de datos pueden utilizarse juntos para crear páginas web dinámicas que ofrezcan una experiencia de usuario rica. Para lograrlo, debes seguir los siguientes pasos:

  1. Establecer una conexión a la base de datos usando PHP
  2. Recuperar datos de la base de datos usando PHP
  3. Crear un script del lado del servidor para manejar la solicitud Ajax
  4. Utilizar Ajax para actualizar la página web con los datos recuperados

Establecer una conexión a la base de datos

Para establecer una conexión a la base de datos, debes utilizar el constructor de la clase mysqli de PHP. Este constructor recibe como argumentos el nombre del host de la base de datos, el nombre de usuario, la contraseña y el nombre de la base de datos. Una vez establecida la conexión, puedes ejecutar consultas SQL para manipular los datos en la base de datos. Por seguridad, siempre valida y sanitiza la entrada del usuario.

php
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

Recuperar datos de la base de datos

Para recuperar datos de la base de datos, debes utilizar consultas SQL. Las consultas SQL pueden ejecutarse mediante el método $conn->query() en PHP. El resultado de la consulta se devuelve como un conjunto de resultados que puede iterarse para recuperar las filas individuales de datos.

php
$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);
if (!$result) {
    die("Query failed: " . $conn->error);
}
while ($row = $result->fetch_assoc()) {
    echo $row["name"] . "<br>";
}

Creación del manejador del lado del servidor (connect.php)

La solicitud Ajax en el código del lado del cliente llama a connect.php. Este archivo debe combinar la conexión a la base de datos, la ejecución de consultas y la lógica de salida en un solo script funcional. También maneja los errores potenciales de manera elegante.

php
<?php
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);

if ($result) {
    while ($row = $result->fetch_assoc()) {
        echo $row["name"] . "<br>";
    }
} else {
    echo "Error: " . $conn->error;
}
$conn->close();
?>

Uso de Ajax para actualizar la página web

Una vez que hayas recuperado los datos de la base de datos, puedes utilizar Ajax para actualizar la página web con dichos datos. Ajax te permite actualizar una parte de la página web sin necesidad de recargarla por completo. Para lograrlo, debes crear un objeto XMLHttpRequest en JavaScript y enviar una solicitud a un script del lado del servidor (por ejemplo, connect.php). Una vez que el servidor envía la respuesta, puedes actualizar la página web con los datos recuperados.

html
<div id="data-container">Loading...</div>
<button onclick="loadData()">Load Data</button>
javascript
function loadData() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'connect.php', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('data-container').innerHTML = xhr.responseText;
        } else {
            document.getElementById('data-container').innerHTML = 'Error loading data.';
        }
    };
    xhr.onerror = function() {
        document.getElementById('data-container').innerHTML = 'Network error.';
    };
    xhr.send();
}

Conclusión

PHP, Ajax y las bases de datos trabajan juntos para crear aplicaciones web dinámicas e interactivas. Siguiendo los pasos anteriores, puedes construir páginas responsivas que actualicen el contenido sin necesidad de recargar.

Práctica

¿Para qué se utiliza AJAX en PHP?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.