ASP AJAX
AJAX gaat over het bijwerken van delen van een webpagina, zonder de hele pagina opnieuw te laden.
Wat is AJAX?
AJAX = Asynchroon JavaScript en XML.
AJAX is een techniek om snelle en dynamische webpagina's te maken.
Met AJAX kunnen webpagina's asynchroon worden bijgewerkt door achter de schermen kleine hoeveelheden gegevens uit te wisselen met de server. Dit betekent dat het mogelijk is om delen van een webpagina bij te werken, zonder de hele pagina opnieuw te laden.
Klassieke webpagina's (die geen AJAX gebruiken) moeten de hele pagina opnieuw laden als de inhoud zou veranderen.
Voorbeelden van toepassingen die AJAX gebruiken: tabbladen Google Maps, Gmail, Youtube en Facebook.
Hoe Ajax werkt
AJAX is gebaseerd op internetstandaarden
AJAX is gebaseerd op internetstandaarden en gebruikt een combinatie van:
- XMLHttpRequest-object (om gegevens asynchroon uit te wisselen met een server)
- JavaScript/DOM (om de informatie weer te geven/te reageren)
- CSS (om de gegevens op te maken)
- XML (vaak gebruikt als formaat voor gegevensoverdracht)
AJAX-applicaties zijn browser- en platformonafhankelijk!
Google Suggest
AJAX werd in 2005 populair gemaakt door Google, met Google Suggest.
Google Suggest gebruikt AJAX om een zeer dynamische webinterface te maken: wanneer u begint te typen in het zoekvak van Google, stuurt een JavaScript de letters naar een server en de server retourneert een lijst met suggesties.
Begin vandaag met het gebruik van AJAX
In onze ASP-zelfstudie laten we zien hoe AJAX delen van een webpagina kan bijwerken, zonder de hele pagina opnieuw te laden. Het serverscript wordt in ASP geschreven.
Als je meer wilt weten over AJAX, bezoek dan onze AJAX-tutorial .
AJAX ASP-voorbeeld
Het volgende voorbeeld laat zien hoe een webpagina kan communiceren met een webserver terwijl een gebruiker tekens typt in een invoerveld:
Voorbeeld
Start typing a name in the input field below:
Suggestions:
Voorbeeld uitgelegd
In het bovenstaande voorbeeld, wanneer een gebruiker een teken typt in het invoerveld, wordt een functie genaamd "showHint()" uitgevoerd.
De functie wordt geactiveerd door de onkeyup-gebeurtenis.
Hier is de HTML-code:
Voorbeeld
<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>
Code uitleg:
Controleer eerst of het invoerveld leeg is (str.length == 0). Als dit het geval is, wist u de inhoud van de tijdelijke aanduiding txtHint en verlaat u de functie.
Als het invoerveld echter niet leeg is, doet u het volgende:
- Een XMLHttpRequest-object maken
- Maak de functie die moet worden uitgevoerd wanneer de serverreactie gereed is
- Stuur het verzoek naar een ASP-bestand (gethint.asp) op de server
- Merk op dat de parameter q is toegevoegd gethint.asp?q="+str
- De variabele str bevat de inhoud van het invoerveld
Het ASP-bestand - "gethint.asp"
Het ASP-bestand controleert een reeks namen en retourneert de bijbehorende naam (namen) naar de 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 kan worden gebruikt voor interactieve communicatie met een database.
Voorbeeld van een AJAX-database
Het volgende voorbeeld laat zien hoe een webpagina informatie uit een database kan halen met AJAX:
Voorbeeld
Voorbeeld uitgelegd - De HTML-pagina
Wanneer een gebruiker een klant selecteert in de vervolgkeuzelijst hierboven, wordt een functie genaamd "showCustomer()" uitgevoerd. De functie wordt geactiveerd door de gebeurtenis "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>
Broncode uitleg:
Als er geen klant is geselecteerd (str.length==0), wist de functie de inhoud van de tijdelijke aanduiding txtHint en wordt de functie afgesloten.
Als een klant is geselecteerd, voert de functie showCustomer() het volgende uit:
- Een XMLHttpRequest-object maken
- Maak de functie die moet worden uitgevoerd wanneer de serverreactie gereed is
- Stuur het verzoek naar een bestand op de server
- Merk op dat een parameter (q) is toegevoegd aan de URL (met de inhoud van de vervolgkeuzelijst)
Het ASP-bestand
De pagina op de server die door het bovenstaande JavaScript wordt aangeroepen, is een ASP-bestand met de naam "getcustomer.asp".
De broncode in "getcustomer.asp" voert een query uit op een database en retourneert het resultaat 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("/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>")
%>