Latest web development tutorials

Base de données AJAX

Ajax peut être utilisé pour une communication interactive avec la base de données.

instance de base de données AJAX

Les exemples suivants démontrent comment une page Web via AJAX lire les informations de la base de données:

Exemples


Customer info will be listed here...

Exemples expliquent - page HTML

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

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>

<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</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">Customer info will be listed here...</div>

</body>
</html>

Source expliqué:

Si vous ne sélectionnez pas un client (str.length == 0), la fonction va effacer txtHint espace réservé, puis quitter la fonction.

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

  • Créer un objet XMLHttpRequest
  • Créer la fonction lorsque le serveur est prêt à effectuer la réponse
  • Dossier sur le serveur pour envoyer des demandes
  • S'il vous plaît note ajoutée à la fin du paramètre d'URL (q) (contient le contenu de la liste déroulante)

fichier ASP

Les serveurs ci-dessus par le biais de JavaScript appelant cette page est appelée "getcustomer.asp" fichiers ASP.

"Getcustomer.asp" code source exécute une requête sur la base de données, puis 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.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>")
%>