AJAX ASP Örneği

AJAX, daha etkileşimli uygulamalar oluşturmak için kullanılır。

AJAX ASP Örneği

Aşağıdaki örnekte, kullanıcı girdi alanında karakterler yazarken web sunucusu ile nasıl iletişim kurulduğunu göstereceğiz：

Örnek

Lütfen aşağıdaki girdi alanına A-Z harflerini yazın：

Ad:

Ara Önerileri:

Örnek Açıklaması

Yukarıdaki örnekte, kullanıcı girdi alanında karakterler yazarken "showHint()" adlı fonksiyonun çalıştığı görülür.

Bu fonksiyon onkeyup olayı tarafından tetiklenir。

Aşağıda HTML kodu bulunmaktadır：

Ö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>Aşağıdaki girdi alanına A-Z harflerini girin:</b></p>
<form> 
İsim:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Arama önerileri:<span id="txtHint"></span></p>
</body>
</html>

Kişisel olarak deneyin

Kod açıklaması:

Öncelikle, girdi alanının boş olup olmadığını kontrol edin (str.length == 0）；Eğer varsa, txtHint yer tutucusunun içeriğini temizleyin ve fonksiyondan çıkın.

Ancak, girdi alanı boş değilse aşağıdaki gibi işlem yapılır:

  • XMLHttpRequest nesnesi oluşturun
  • Sunucunun yanıtladığında çalışacak fonksiyonu oluşturun
  • Sunucudaki ASP dosyasına (gethint.asp) istek gönderin
  • Lütfen gethint.asp'ye q parametresini ekleyin
  • str değişkeni girdi alanının içeriğini saklar

ASP dosyası - "gethint.asp"

Bu ASP dosyası isim dizisini kontrol eder ve tarayıcıya karşılık gelen ismi döndürür:

<%
 response.expires=-1
 dim a(32)
 isim doldurulan diziyi kullan
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"
 URL'den q parametresini al
 q=ucase(request.querystring("q"))
 Tüm hint'leri dizide kontrol et, q uzunluğu 0'dan büyük olmalı
 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 hint bulunamadıysa, "no suggestion" yazdır veya doğru değeri yazdır
 if hint="" then
   response.write("no suggestion")
 else
   response.write(hint)
 end if
%>