AJAX se puede utilizar para la comunicación interactiva con una base de datos.
AJAX Base de Datos de Ejemplo
El siguiente ejemplo demostrará cómo una página web puede recuperar información de una base de datos con AJAX:
Ejemplo
Ejemplo Explicación - La base de datos MySQL
La tabla de base de datos que utilizamos en el ejemplo anterior es el siguiente:
| carné de identidad | Nombre de pila | Apellido | Años | Procedencia | Trabajo |
|---|---|---|---|---|---|
| 1 | Peter | Grifo | 41 | quahog | Cervecería |
| 2 | Lois | Grifo | 40 | Newport | Profesor de piano |
| 3 | Joseph | Swanson | 39 | quahog | Oficial de policia |
| 4 | Glenn | Cenagal | 41 | quahog | Piloto |
ejemplo Explicación
En el ejemplo anterior, cuando un usuario selecciona una persona en la lista desplegable anteriormente, una función llamada " showUser() " se ejecuta.
La función se activa por el evento onchange.
Aquí está el código HTML:
Ejemplo
<html>
<head>
<script>
function showUser(str) {
if (str == "")
{
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox,
Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
//
code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4
&& xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option
value="">Select a person:</option>
<option value="1">Peter
Griffin</option>
<option value="2">Lois Griffin</option>
<option
value="3">Joseph Swanson</option>
<option value="4">Glenn
Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person
info will be listed here...</b></div>
</body>
</html> Ejecutar ejemplo » Código explicación:
En primer lugar, comprobar si se ha seleccionado ninguna persona (str == "") . Si no se selecciona ninguna persona, borrar el contenido del marcador de posición txtHint y salir de la función.
Si se selecciona una persona, haga lo siguiente:
- Crear un objeto XMLHttpRequest
- Cree la función a ejecutar cuando la respuesta del servidor está listo
- Enviar la solicitud fuera a un archivo en el servidor
- Nótese que un parámetro (q) se añade a la URL (con el contenido de la lista desplegable)
El archivo PHP
La página en el servidor llamado por el código JavaScript anterior es un archivo PHP llamado "getuser.php" .
El código fuente en "getuser.php" ejecuta una consulta a una base de datos MySQL, y devuelve el resultado en una tabla HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>Explicación: Cuando la consulta se envía desde el JavaScript para el archivo PHP, ocurre lo siguiente:
- PHP abre una conexión a un servidor MySQL
- La persona correcta se encuentra
- Se crea una tabla HTML, lleno de datos, y se envía de nuevo a la "txtHint" marcador de posición