tutorial pengembangan web terbaru
 

AJAX ASP Contoh


AJAX digunakan untuk membuat aplikasi yang lebih interaktif.


AJAX ASP Contoh

Contoh berikut akan menunjukkan bagaimana sebuah halaman web dapat berkomunikasi dengan server web sementara tipe user karakter dalam sebuah field input:

Contoh

Start typing a name in the input field below:

First name:

Suggestions:



misalnya Dijelaskan

Dalam contoh di atas, ketika seorang pengguna jenis karakter di bidang input, fungsi yang disebut "showHint()" dijalankan.

Fungsi ini dipicu oleh onkeyup event.

Berikut adalah kode HTML:

Contoh

<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>
Cobalah sendiri "

Kode penjelasan:

Pertama, periksa apakah kolom input kosong (str.length == 0) . Jika ya, menghapus isi dari txtHint placeholder dan keluar fungsi.

Namun, jika field input tidak kosong, lakukan hal berikut:

  • Buat XMLHttpRequest objek
  • Membuat fungsi yang akan dijalankan ketika respon server siap
  • Kirim permintaan off ke file ASP (gethint.asp) pada server
  • Perhatikan bahwa q parameter ditambahkan gethint.asp?q="+str
  • Variabel str memegang isi dari field input

ASP File - "gethint.asp"

File ASP memeriksa array nama, dan mengembalikan sesuai name(s) ke browser:

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