ASP AJAX
AJAX gaan oor die opdatering van dele van 'n webblad, sonder om die hele bladsy te herlaai.
Wat is AJAX?
AJAX = Asynchrone JavaScript en XML.
AJAX is 'n tegniek om vinnige en dinamiese webblaaie te skep.
AJAX laat webbladsye asynchroon bygewerk word deur klein hoeveelhede data met die bediener agter die skerms uit te ruil. Dit beteken dat dit moontlik is om dele van 'n webblad op te dateer, sonder om die hele bladsy te herlaai.
Klassieke webblaaie (wat nie AJAX gebruik nie) moet die hele bladsy herlaai as die inhoud sou verander.
Voorbeelde van toepassings wat AJAX gebruik: Google Maps, Gmail, Youtube en Facebook-oortjies.
Hoe AJAX werk
AJAX is gebaseer op internetstandaarde
AJAX is gebaseer op internetstandaarde en gebruik 'n kombinasie van:
- XMLHttpRequest-objek (om data asynchronies met 'n bediener uit te ruil)
- JavaScript/DOM (om te vertoon/interaksie met die inligting)
- CSS (om die data te stileer)
- XML (dikwels gebruik as die formaat vir die oordrag van data)
AJAX-toepassings is blaaier- en platformonafhanklik!
Google stel voor
AJAX is in 2005 deur Google gewild gemaak, met Google Suggest.
Google Suggest gebruik AJAX om 'n baie dinamiese webkoppelvlak te skep: Wanneer jy in Google se soekkassie begin tik, stuur 'n JavaScript die letters na 'n bediener en die bediener gee 'n lys voorstelle terug.
Begin vandag AJAX gebruik
In ons ASP-tutoriaal sal ons demonstreer hoe AJAX dele van 'n webblad kan opdateer sonder om die hele bladsy te herlaai. Die bedienerskrip sal in ASP geskryf word.
As jy meer wil leer oor AJAX, besoek ons AJAX-tutoriaal .
AJAX ASP Voorbeeld
Die volgende voorbeeld sal demonstreer hoe 'n webblad met 'n webbediener kan kommunikeer terwyl 'n gebruiker karakters in 'n invoerveld tik:
Voorbeeld
Start typing a name in the input field below:
Suggestions:
Voorbeeld Verduidelik
In die voorbeeld hierbo, wanneer 'n gebruiker 'n karakter in die invoerveld tik, word 'n funksie genaamd "showHint()" uitgevoer.
Die funksie word geaktiveer deur die onkeyup-gebeurtenis.
Hier is die HTML-kode:
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>
Kode verduideliking:
Kyk eers of die invoerveld leeg is (str.length == 0). As dit is, maak die inhoud van die txtHint-plekhouer skoon en verlaat die funksie.
As die invoerveld egter nie leeg is nie, doen die volgende:
- Skep 'n XMLHttpRequest-objek
- Skep die funksie wat uitgevoer moet word wanneer die bedienerantwoord gereed is
- Stuur die versoek na 'n ASP-lêer (gethint.asp) op die bediener
- Let daarop dat q parameter bygevoeg word gethint.asp?q="+str
- Die str-veranderlike hou die inhoud van die invoerveld
Die ASP-lêer - "gethint.asp"
Die ASP-lêer kontroleer 'n verskeidenheid name, en gee die ooreenstemmende naam (name) terug na die blaaier:
<%
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 gebruik word vir interaktiewe kommunikasie met 'n databasis.
AJAX-databasis voorbeeld
Die volgende voorbeeld sal demonstreer hoe 'n webblad inligting van 'n databasis met AJAX kan haal:
Voorbeeld
Voorbeeld verduidelik - Die HTML-bladsy
Wanneer 'n gebruiker 'n kliënt in die aftreklys hierbo kies, word 'n funksie genaamd "showCustomer()" uitgevoer. Die funksie word geaktiveer deur die "onchange" gebeurtenis:
<!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>
Bronkode verduideliking:
As geen klant gekies word nie (str.length==0), maak die funksie die inhoud van die txtHint-plekhouer skoon en verlaat die funksie.
As 'n kliënt gekies word, voer die showCustomer() funksie die volgende uit:
- Skep 'n XMLHttpRequest-objek
- Skep die funksie wat uitgevoer moet word wanneer die bedienerantwoord gereed is
- Stuur die versoek na 'n lêer op die bediener
- Let daarop dat 'n parameter (q) by die URL gevoeg word (met die inhoud van die aftreklys)
Die ASP-lêer
Die bladsy op die bediener wat deur die JavaScript hierbo genoem word, is 'n ASP-lêer genaamd "getcustomer.asp".
Die bronkode in "getcustomer.asp" voer 'n navraag teen 'n databasis uit en gee die resultaat in 'n HTML-tabel terug:
<%
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>")
%>