ASP AJAX
AJAX, tüm sayfayı yeniden yüklemeden bir web sayfasının bölümlerini güncellemekle ilgilidir.
AJAX nedir?
AJAX = Eşzamansız JavaScript ve XML.
AJAX, hızlı ve dinamik web sayfaları oluşturmak için kullanılan bir tekniktir.
AJAX, arka planda sunucuyla küçük miktarlarda veri alışverişi yaparak web sayfalarının eşzamansız olarak güncellenmesine olanak tanır. Bu, tüm sayfayı yeniden yüklemeden bir web sayfasının bölümlerini güncellemenin mümkün olduğu anlamına gelir.
Klasik web sayfaları (AJAX kullanmayan), içeriğin değişmesi durumunda tüm sayfayı yeniden yüklemelidir.
AJAX kullanan uygulama örnekleri: Google Haritalar, Gmail, Youtube ve Facebook sekmeleri.
AJAX Nasıl Çalışır?
AJAX İnternet Standartlarına Dayanır
AJAX internet standartlarına dayanır ve aşağıdakilerin bir kombinasyonunu kullanır:
- XMLHttpRequest nesnesi (bir sunucuyla eşzamansız olarak veri alışverişi yapmak için)
- JavaScript/DOM (bilgileri görüntülemek/etkileşime geçmek için)
- CSS (verileri biçimlendirmek için)
- XML (genellikle veri aktarma biçimi olarak kullanılır)
AJAX uygulamaları tarayıcıdan ve platformdan bağımsızdır!
Google Öner
AJAX, 2005 yılında Google tarafından Google Suggest ile popüler hale getirildi.
Google Suggest , çok dinamik bir web arayüzü oluşturmak için AJAX kullanıyor: Google'ın arama kutusuna yazmaya başladığınızda, bir JavaScript, harfleri bir sunucuya gönderir ve sunucu, bir öneriler listesi döndürür.
AJAX'ı Bugün Kullanmaya Başlayın
ASP eğitimimizde, AJAX'ın tüm sayfayı yeniden yüklemeden bir web sayfasının bölümlerini nasıl güncelleyebileceğini göstereceğiz. Sunucu betiği ASP'de yazılacaktır.
AJAX hakkında daha fazla bilgi edinmek istiyorsanız, AJAX eğitimimizi ziyaret edin .
AJAX ASP Örneği
Aşağıdaki örnek, bir kullanıcı bir giriş alanına karakterleri yazarken bir web sayfasının bir web sunucusuyla nasıl iletişim kurabileceğini gösterecektir:
Örnek
Start typing a name in the input field below:
Suggestions:
Örnek Açıklama
Yukarıdaki örnekte, bir kullanıcı giriş alanına bir karakter yazdığında, "showHint()" adlı bir işlev yürütülür.
İşlev, onkeyup olayı tarafından tetiklenir.
İşte HTML kodu:
Örnek
<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>
Kod açıklaması:
İlk önce giriş alanının boş olup olmadığını kontrol edin (str.length == 0). Öyleyse, txtHint yer tutucusunun içeriğini temizleyin ve işlevden çıkın.
Ancak giriş alanı boş değilse aşağıdakileri yapın:
- Bir XMLHttpRequest nesnesi oluşturun
- Sunucu yanıtı hazır olduğunda yürütülecek işlevi oluşturun
- İsteği sunucudaki bir ASP dosyasına (gethint.asp) gönderin
- q parametresinin gethint.asp?q="+str eklendiğine dikkat edin.
- str değişkeni, giriş alanının içeriğini tutar
ASP Dosyası - "gethint.asp"
ASP dosyası bir dizi adı kontrol eder ve karşılık gelen adları tarayıcıya döndürür:
<%
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, bir veritabanı ile etkileşimli iletişim için kullanılabilir.
AJAX Veritabanı Örneği
Aşağıdaki örnek, bir web sayfasının AJAX ile bir veritabanından nasıl bilgi alabileceğini gösterecektir:
Örnek
Örnek Açıklama - HTML Sayfası
Bir kullanıcı yukarıdaki açılır listeden bir müşteri seçtiğinde, "showCustomer()" adlı bir işlev yürütülür. İşlev, "onchange" olayı tarafından tetiklenir:
<!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>
Kaynak kodu açıklaması:
Hiçbir müşteri seçilmezse (str.length==0), işlev, txtHint yer tutucusunun içeriğini temizler ve işlevden çıkar.
Bir müşteri seçilirse showCustomer() işlevi aşağıdakileri yürütür:
- Bir XMLHttpRequest nesnesi oluşturun
- Sunucu yanıtı hazır olduğunda yürütülecek işlevi oluşturun
- İsteği sunucudaki bir dosyaya gönderin
- URL'ye bir parametrenin (q) eklendiğine dikkat edin (açılır listenin içeriğiyle birlikte)
ASP Dosyası
Yukarıdaki JavaScript tarafından çağrılan sunucudaki sayfa, "getcustomer.asp" adlı bir ASP dosyasıdır.
"getcustomer.asp" içindeki kaynak kod, bir veritabanına karşı bir sorgu çalıştırır ve sonucu bir HTML tablosunda döndürür:
<%
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>")
%>