Ejemplo de base de datos AJAX
AJAX se puede utilizar para la comunicación interactiva con una base de datos.
Ejemplo de base de datos AJAX
El siguiente ejemplo demostrará cómo una página web puede obtener información de una base de datos con AJAX:
Ejemplo
Customer info will be listed here...
Ejemplo explicado: la función showCustomer()
Cuando un usuario selecciona un cliente en la lista desplegable anterior, showCustomer()
se ejecuta una función llamada. La función es activada por el onchange
evento:
mostrarCliente
function showCustomer(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xhttp.open("GET", "getcustomer.php?q="+str);
xhttp.send();
}
La showCustomer()
función hace lo siguiente:
- Comprobar si un cliente está seleccionado
- Crear un objeto XMLHttpRequest
- Cree la función que se ejecutará cuando la respuesta del servidor esté lista
- Enviar la solicitud a un archivo en el servidor
- Observe que se agrega un parámetro (q) a la URL (con el contenido de la lista desplegable)
La página del servidor AJAX
La página en el servidor llamado por el JavaScript anterior es un archivo PHP llamado "getcustomer.php".
El código fuente en "getcustomer.php" ejecuta una consulta en una base de datos y devuelve el resultado en una tabla HTML:
<?php
$mysqli = new mysqli("servername", "username",
"password", "dbname");
if($mysqli->connect_error) {
exit('Could not connect');
}
$sql = "SELECT customerid, companyname,
contactname, address, city, postalcode, country
FROM customers WHERE
customerid = ?";
$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid,
$cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();
echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo
"<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname
. "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" .
$adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" .
$pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country .
"</td>";
echo "</tr>";
echo "</table>";
?>