AJAX può essere utilizzato per la comunicazione interattiva con un database.
AJAX Esempio Database
Il seguente esempio dimostrerà come una pagina web può recuperare le informazioni da un database con AJAX:
Esempio spiegato - la pagina HTML
Quando un utente seleziona un cliente nell'elenco discesa sopra, una funzione chiamata " showCustomer() " viene eseguita. La funzione viene attivata dal "onchange" evento:
<!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>Codice sorgente spiegazione:
Se non è selezionato alcun cliente (str.length==0) , la funzione cancella il contenuto del segnaposto txtHint ed esce dalla funzione.
Se si seleziona un cliente, lo showCustomer() funzione esegue le seguenti operazioni:
- Creare un oggetto XMLHttpRequest
- Creare la funzione da eseguire quando la risposta del server è pronto
- Invia la richiesta fuori ad un file sul server
- Si noti che un parametro (q) viene aggiunto all'URL (con il contenuto dell'elenco a discesa)
Il file ASP
La pagina sul server chiamato dal JavaScript di cui sopra è un file ASP denominato "getcustomer.asp" .
Il codice sorgente in "getcustomer.asp" esegue una query su un database e restituisce il risultato in una tabella 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("/ datafolder /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>")
%>