AJAX può essere utilizzato per la comunicazione interattiva con un database.
AJAX Esempio Database
Il seguente esempio dimostrerà come una pagina web può recuperare le informazioni da un database con AJAX:
Esempio
Esempio spiegato - Database MySQL
La tabella del database che usiamo nell'esempio di cui sopra appare così:
| id | Nome di battesimo | Cognome | Età | Città natale | Lavoro |
|---|---|---|---|---|---|
| 1 | Pietro | Grifone | 41 | Quahog | fabbrica di birra |
| 2 | Lois | Grifone | 40 | Newport | Piano Teacher |
| 3 | Joseph | Swanson | 39 | Quahog | Poliziotto |
| 4 | Glenn | Pantano | 41 | Quahog | Pilota |
esempio spiegato
Nell'esempio di cui sopra, quando un utente seleziona una persona nell'elenco a discesa sopra, una funzione chiamata " showUser() " viene eseguita.
La funzione viene attivata dall'evento onchange.
Ecco il codice HTML:
Esempio
<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> Esempio Run » Codice spiegazione:
In primo luogo, verificare se è selezionata alcuna persona (str == "") . Se viene selezionata alcuna persona, cancellare il contenuto del segnaposto txtHint e uscire dalla funzione.
Se si seleziona una persona, effettuare le seguenti operazioni:
- Creare un oggetto XMLHttpRequest
- Creare la funzione da eseguire quando la risposta del server è pronto
- Invia la richiesta fuori ad un file sul server
- Si noti che un parametro (q) viene aggiunto all'URL (con il contenuto dell'elenco a discesa)
Il file PHP
La pagina sul server chiamato dal JavaScript di cui sopra è un file PHP chiamato "getuser.php" .
Il codice sorgente in "getuser.php" esegue una query su un database MySQL, e restituisce il risultato in una tabella 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>Spiegazione: Quando la query viene inviato dal JavaScript al file PHP, accade quanto segue:
- PHP apre una connessione a un server MySQL
- La persona giusta è trovato
- Una tabella HTML è stato creato, riempito con i dati, e rispedito al "txtHint" segnaposto