Javascript

AJAX ASP: Contoh dan Cara Membuatnya

AJAX digunakan untuk membuat aplikasi yang lebih interaktif.

Contoh AJAX ASP

Contoh berikut akan menunjukkan bagaimana halaman web dapat berkomunikasi dengan server web sementara pengguna mengetik karakter di bidang input.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<h3>Mulai ketikkan nama pada bidang masukan di bawah ini:</h3>
<p>Saran: <span id="txtHint"></span></p> 

<p>Nama Depan: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>

<script>
function showHint(str) {
  var xhttp;
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "gethint.asp?q="+str, true);
  xhttp.send();
}
</script>

</body>
</html>

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

Fungsi ini dipicu oleh event onkeyup.

Penjelasan kode:

Pertama, periksa apakah kolom input kosong (str.length == 0). Jika ya, hapus konten placeholder txtHint dan keluar dari fungsinya.

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

  • Buat objek XMLHttpRequest
  • Buat fungsi untuk dijalankan saat respons server siap
  • Kirim permintaan ke file ASP (gethint.asp) di server
  • Perhatikan bahwa parameter q ditambahkan gethint.asp? Q = “+ str
  • Variabel str menyimpan konten field input

File ASP – “gethint.asp”

File ASP memeriksa array nama, dan mengembalikan nama yang sesuai 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
%>

Catur Kurnia Sari

Share
Tags: AJAXjavascript