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 - The showCustomer() Funzione
Quando un utente seleziona un cliente nell'elenco a discesa sopra, una funzione chiamata "showCustomer()" viene eseguita. La funzione viene attivata dal "onchange" evento:
showCustomer
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState
== 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML
= xhttp.responseText;
}
};
xhttp.open("GET",
"getcustomer.asp?q="+str, true);
xhttp.send();
}
Il showCustomer() la funzione esegue le seguenti operazioni:
- Controllare se è stato selezionato un cliente
- Crea un XMLHttpRequest oggetto
- Creare la funzione da eseguire quando la risposta 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 discesa)
L' AJAX Server Page
La pagina sul server chiamato dal JavaScript di cui sopra è un file ASP denominato "getcustomer.asp" .
Il file server potrebbe essere facilmente riscritto in PHP o altri linguaggi di server.
Guardate un corrispondente esempio in PHP .
Il codice sorgente di "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>")
%>