ASP AJAX
AJAX riguarda l'aggiornamento di parti di una pagina Web, senza ricaricare l'intera pagina.
Cos'è l'AJAX?
AJAX = JavaScript asincrono e XML.
AJAX è una tecnica per creare pagine web veloci e dinamiche.
AJAX consente di aggiornare le pagine Web in modo asincrono scambiando piccole quantità di dati con il server dietro le quinte. Ciò significa che è possibile aggiornare parti di una pagina web, senza ricaricare l'intera pagina.
Le pagine Web classiche (che non utilizzano AJAX) devono ricaricare l'intera pagina se il contenuto deve cambiare.
Esempi di applicazioni che utilizzano AJAX: schede di Google Maps, Gmail, Youtube e Facebook.
Come funziona AJAX
AJAX è basato su standard Internet
AJAX si basa su standard Internet e utilizza una combinazione di:
- Oggetto XMLHttpRequest (per scambiare dati in modo asincrono con un server)
- JavaScript/DOM (per visualizzare/interagire con le informazioni)
- CSS (per definire lo stile dei dati)
- XML (spesso usato come formato per il trasferimento dei dati)
Le applicazioni AJAX sono indipendenti dal browser e dalla piattaforma!
Google Suggerisci
AJAX è stato reso popolare nel 2005 da Google, con Google Suggest.
Google Suggest utilizza AJAX per creare un'interfaccia web molto dinamica: quando inizi a digitare nella casella di ricerca di Google, un JavaScript invia le lettere a un server e il server restituisce un elenco di suggerimenti.
Inizia a usare AJAX oggi
Nel nostro tutorial ASP, dimostreremo come AJAX può aggiornare parti di una pagina Web, senza ricaricare l'intera pagina. Lo script del server verrà scritto in ASP.
Se vuoi saperne di più su AJAX, visita il nostro tutorial AJAX .
Esempio AJAX ASP
L'esempio seguente dimostrerà come una pagina Web può comunicare con un server Web mentre un utente digita i caratteri in un campo di input:
Esempio
Start typing a name in the input field below:
Suggestions:
Esempio spiegato
Nell'esempio sopra, quando un utente digita un carattere nel campo di input, viene eseguita una funzione chiamata "showHint()".
La funzione viene attivata dall'evento onkeyup.
Ecco il codice HTML:
Esempio
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Spiegazione del codice:
Innanzitutto, controlla se il campo di input è vuoto (str.length == 0). In tal caso, cancellare il contenuto del segnaposto txtHint e uscire dalla funzione.
Tuttavia, se il campo di input non è vuoto, procedere come segue:
- Creare un oggetto XMLHttpRequest
- Creare la funzione da eseguire quando la risposta del server è pronta
- Invia la richiesta a un file ASP (gethint.asp) sul server
- Si noti che il parametro q è stato aggiunto gethint.asp?q="+str
- La variabile str contiene il contenuto del campo di input
Il file ASP - "gethint.asp"
Il file ASP controlla una matrice di nomi e restituisce i nomi corrispondenti al browser:
<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
AJAX può essere utilizzato per la comunicazione interattiva con un database.
Esempio di database AJAX
L'esempio seguente dimostrerà come una pagina Web può recuperare informazioni da un database con AJAX:
Esempio
Esempio spiegato - La pagina HTML
Quando un utente seleziona un cliente nell'elenco a discesa sopra, viene eseguita una funzione chiamata "showCustomer()". La funzione viene attivata dall'evento "onchange":
<!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 (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.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>
<
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
Spiegazione del codice sorgente:
Se nessun cliente è selezionato (str.length==0), la funzione cancella il contenuto del segnaposto txtHint ed esce dalla funzione.
Se viene selezionato un cliente, la funzione showCustomer() esegue quanto segue:
- Creare un oggetto XMLHttpRequest
- Creare la funzione da eseguire quando la risposta del server è pronta
- Invia la richiesta a 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 chiamata da JavaScript sopra è un file ASP chiamato "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>")
%>