Exemple de base de données AJAX

AJAX peut être utilisé pour communiquer 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 à partir d'une base de données via AJAX :

Les informations du client seront affichées ici.

Essayez le code source

Explication de l'exemple - Page HTML

Lorsque l'utilisateur sélectionne un client dans la liste déroulante ci-dessus, la fonction "showCustomer()" est appelé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.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)">
<option value="">Sélectionnez un client:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Les informations du client seront affichées ici...</div>
</body>
</html>

Explication du code source :

Si aucun client n'est sélectionné (str.length est égal à 0), la fonction videra le curseur de place-holder txtHint et sortira de la fonction.

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

  • Créer un objet XMLHttpRequest
  • Créer une fonction exécutée lorsque le serveur est prêt
  • Envoyer une requête à un fichier sur le serveur
  • Veuillez noter les paramètres ajoutés à la fin de l'URL (q) (contenant le contenu de la liste déroulante)

Fichier ASP

La page serveur appelée par ce segment de JavaScript est un fichier ASP nommé "getcustomer.asp".

Le code source de "getcustomer.asp" effectue une requête sur la base de données une fois et affiche les résultats 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>")
%>