ASP - AJAX ile ASP

AJAX, daha dinamik uygulamalar oluşturmak için kullanılır.

AJAX ASP Örneği

Aşağıdaki örnek, kullanıcı giriş kutusuna karakter girdiğinde web sayfasının sunucu ile nasıl iletişim kurduğunu gösterir:

Örnek

Lütfen aşağıdaki giriş kutusuna harfleri (A - Z) girin:

Adınız:

Öneri:

Kaynak kodunu kendiniz deneyin

Örnek açıklaması - HTML sayfası

Kullanıcı yukarıdaki giriş kutusuna karakter girdiğinde, "showHint()" fonksiyonu çalıştırılır. Bu fonksiyon "onkeyup" olayı tarafından tetiklenir:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari için kod
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 için kod
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>İfade kutusuna İngilizce karakter girmenizi lütfen:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Öneriler: <span id="txtHint"></span></p>
</body>
</html>

Kaynak kod açıklaması:

Giriş kutusu boşsa (str.length==0), fonksiyon txtHint'un içeriğini temizler ve fonksiyondan çıkar.

Giriş kutusu boş değilse, showHint() aşağıdaki adımları gerçekleştirir:

  • XMLHttpRequest nesnesi oluşturun
  • Sunucu yanıtı hazır olduğunda çalışacak fonksiyon oluşturun
  • Sunucudaki dosyaya istek gönderin
  • URL sonuna eklenen parametreyi (q) (giriş kutusunun içeriğini içeren) dikkatlice ekleyin

ASP dosyası

Bu JavaScript çağrısının sunucu sayfası, "gethint.asp" adlı ASP dosyasıdır.

"gethint.asp" içindeki kaynak kod, isim dizisini kontrol eder ve ardından tarayıcıya uygun ismi döndürür:

<%
response.expires=-1
dim a(30)
'İsim dizisini doldur
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"
'URL'den parametre q'ı al
q=ucase(request.querystring("q"))
'Eğer q uzunluğu 0'dan büyükse, tüm ipuçlarını diziden arar
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
'Eğer ipucu bulunamadıysa, "no suggestion" yazdır
'doğru değerleri de yazdır
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

Kaynak kod açıklaması:

Eğer JavaScript herhangi bir metin gönderirse (yani strlen($q) 0'dan büyükse), aşağıdaki gibi bir olay meydana gelir:

  • JavaScript'ten gelen karakterlerle eşleşen isimleri arayın
  • Eşleşen bulunmadığında, cevap dizgisini "no suggestion" olarak ayarla
  • Bir veya daha fazla eşleşen isim bulunduğunda, tüm isimleri kullanarak cevap dizgisini ayarla
  • Cevabı "txtHint" yer tutucusuna gönder