AJAX Exemple de base de données

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 lire des informations dans une base de données à l'aide d'AJAX :

Exemple


Les informations sur le client seront affichées ici...

Exemple expliqué - Page HTML

Lorsqu'un utilisateur sélectionne un client dans la liste déroulante ci-dessus, une fonction nommée "showCustomer()" est exécutée. La 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.status==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)">




</select>
</form>
<br>
Les informations client seront affichées ici...


</body>
</html>

Explication du code source :

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

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

  • Créer un objet XMLHttpRequest
  • Créer une fonction à exécuter 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 (contenant le contenu de la liste déroulante)

Fichier ASP

La page serveur appelée par le JavaScript ci-dessus est un fichier ASP nommé "getcustomer.asp".

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

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

set conn=Server.CreateObject("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>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>

Autres extensions