AJAX Database Voorbeeld

AJAX kan gebruikt worden voor interactieve communicatie met een database.

AJAX Database Voorbeeld

Het volgende voorbeeld demonstreert hoe een webpagina informatie uit een database kan ophalen via AJAX:

Klantinformatie wordt hier vermeld.

Probeer de broncode zelf uit

Voorbeeld - HTML-pagina

Wanneer de gebruiker een klant selecteert uit debovenstaande keuzelijst, wordt de functie "showCustomer()" uitgevoerd. Deze functie wordt geactiveerd door het "onchange"-evenement:

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Voor IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  // Voor 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">Klantinformatie wordt hier weergegeven...</div>
</body>
</html>

Verklaring van de broncode:

Als geen klant is gekozen (str.length is gelijk aan 0), maakt de functie de txtHint-placeholder leeg en verlaat de functie.

Als een klant is gekozen, voert de showCustomer() -functie de volgende stappen uit:

  • Maak een XMLHttpRequest-object aan
  • Maak een functie aan die wordt uitgevoerd wanneer de serverresponse gereed is
  • Verzend een verzoek naar het bestand op de server
  • Let op de parameter (q) die aan het einde van de URL wordt toegevoegd (bevat de inhoud van de keuzelijst)

ASP-bestand

Deze serverpagina, aangeroepen door dit stuk JavaScript, is een ASP-bestand genaamd "getcustomer.asp".

De broncode in "getcustomer.asp" voert een query uit op de database en retourneert de resultaten in een HTML-tabel:

<%
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>")
%>