En son web geliştirme öğreticiler
 

AJAX ASP Örnek


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


AJAX ASP Örnek

Aşağıdaki örnek, bir web sayfası bir giriş alanına bir kullanıcı tipi karakterleri ise bir web sunucusu ile iletişim nasıl gösterecektir:

Örnek

Start typing a name in the input field below:

First name:

Suggestions:



Örnek Açıklaması

Bir kullanıcı giriş alanında bir karakter, adı verilen bir fonksiyon Yukarıdaki örnekte, " showHint() " yürütülür.

Fonksiyon tarafından tetiklenir onkeyup olay.

İşte HTML kodu aşağıdadı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 (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>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>
Kendin dene "

Kod Açıklaması:

Giriş alanı boş olmadığını kontrol edin (str.length == 0) . Eğer öyleyse, içeriğini temizlemek txtHint yer tutucu ve fonksiyon çıkın.

Giriş alanı boş değilse Ancak, aşağıdakileri yapın:

  • Bir oluşturma XMLHttpRequest nesnesi
  • sunucu yanıtı hazır olduğunda yürütülecek işlevi oluşturma
  • ASP dosyasına istek dışı Gönder (gethint.asp) sunucuda
  • Dikkat edin q parametresi eklenmiştir gethint.asp?q="+str
  • str değişkeni giriş alanının içeriğini tutan

ASP Dosyası - "gethint.asp"

ASP dosya isimlerinin bir dizi kontrol eder, ve karşılık gelen döner name(s) tarayıcıya:

<%
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
%>