Base de données AJAX


AJAX peut être utilisé pour communiquer de manière interactive avec la base de données.

Exemple de base de données AJAX

L'exemple suivant montrera comment une page Web lit les informations de la base de données via AJAX :

Exemple


Les informations client seront répertoriées ici...

Explication des exemples - Page HTML

Quand Lorsque l'utilisateur sélectionne un client dans la liste déroulante ci-dessus, une fonction nommée "showCustomer()" est exécutée. Cette fonction est déclenchée par l'événement "onchange" :

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer (str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code pour IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code pour IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.statut==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer .asp ?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>

<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Sélectionnez un client :</option> ;
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">Nord/Sud</option>
<option value="WOLZA "> ;Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Les informations client seront répertoriées ici ..</div>

</body>
</html>

Explication du code source :

Si aucun client n'est sélectionné (str.length==0), alors cette fonction effacera l'espace réservé txtHint puis quittera la fonction.

Si un client a été sélectionné, la fonction showCustomer() effectue les étapes suivantes :

  • Crée un objet XMLHttpRequest

  • Créer une fonction qui s'exécute lorsque la réponse du serveur est prête

  • Envoyer une requête à un fichier sur le serveur

  • Notez le paramètre (q ) ajouté à la fin de l'URL ) (contient le contenu de la liste déroulante)

Fichier ASP

La page du serveur appelée par JavaScript ci-dessus est un document ASP nommé « getcustomer.asp ».

Le code source dans "getcustomer.asp" exécute une requête sur la base de données et renvoie les résultats dans un tableau HTML :

<%
response.expires= - 1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server. ("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
faire jusqu'à rs.EOF
pour chaque x dans rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write ( "<td>" & x.value & "</td></tr>")
suivant
rs.MoveNext
loop
response.write("</ table> ;")
%>