Exemple de base de données AJAX
AJAX peut être utilisé pour une communication interactive avec une base de données.
Exemple de base de données AJAX
L'exemple suivant montre comment une page Web peut récupérer des informations à partir d'une base de données avec AJAX :
Exemple
Customer info will be listed here...
Exemple expliqué - La fonction showCustomer()
Lorsqu'un utilisateur sélectionne un client dans la liste déroulante ci-dessus, une fonction appelée showCustomer()
est exécutée. La fonction est déclenchée par l' onchange
événement :
afficherClient
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()
fonction effectue les opérations suivantes :
- Vérifier si un client est sélectionné
- Créer un objet XMLHttpRequest
- Créer la fonction à exécuter lorsque la réponse du serveur est prête
- Envoyer la demande vers un fichier sur le serveur
- Notez qu'un paramètre (q) est ajouté à l'URL (avec le contenu de la liste déroulante)
La page du serveur AJAX
La page sur le serveur appelée par le JavaScript ci-dessus est un fichier PHP appelé "getcustomer.php".
Le code source dans "getcustomer.php" exécute une requête sur une base de données et renvoie le résultat dans un tableau 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>";
?>