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'événement "onchange":
afficherClient
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState
== 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML
= this.responseText;
}
};
xhttp.open("GET",
"getcustomer.php?q="+str, true);
xhttp.send();
}
La fonction showCustomer() 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>";
?>