ASP - AJAX dan ASP

AJAX digunakan untuk membuat aplikasi yang lebih dinamis.

Contoh AJAX ASP

Contoh di bawah ini akan menunjukkan bagaimana halaman web berkomunikasi dengan server saat pengguna mengetik karakter di kotak input:

Contoh

Silakan masukkan huruf (A - Z) di kotak input di bawah ini:

Nama:

Saran:

Coba kode sumber sendiri

Pengertian Konteks - Halaman HTML

Ketika pengguna mengetik karakter di kotak input di atas, fungsi "showHint()" akan dijalankan. Fungsi ini diaktifkan oleh peristiwa "onkeyup":

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Kode untuk IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  // Kode untuk IE6, IE5
  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>Silakan masukkan huruf bahasa Inggris di kotak masukan:</b></p>
<form>
Nama pertama: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Saran: <span id="txtHint"></span></p>
</body>
</html>

Pengertian kode asli:

Jika kotak masukan kosong (str.length==0), fungsi akan mengosongkan konten placeholder txtHint dan keluar dari fungsi.

Jika kotak masukan kosong, fungsi showHint() akan melaksanakan tahapan berikut:

  • Membuat objek XMLHttpRequest
  • Membuat fungsi yang akan dijalankan saat tanggap balas server siap
  • Mengirim permintaan ke berkas di server
  • Harap perhatikan parameter yang ditambahkan ke akhir URL (q) (termasuk konten kotak masukan)

Berkas ASP

Laman halaman server yang dipanggil JavaScript di atas adalah berkas ASP yang dinamai "gethint.asp".

"gethint.asp" kode asli akan memeriksa array nama, lalu mengembalikan nama yang sesuai ke browser:

<%
response.expires=-1
dim a(30)
'Isi array dengan nama-nama
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"
'Dapatkan parameter q dari URL
q=ucase(request.querystring("q"))
'Jika panjang q>0, cari semua saran di dalam array
jika len(q)>0 then
  hint=""
  untuk i=1 sampai 30
    jika q=ucase(mid(a(i),1,len(q))) then
      jika hint="" lalu
        hint=a(i)
      else
        hint=hint & ", " & a(i)
      end if
    end if
  next
end if
'Jika tidak menemukan saran, tampilkan "tanpa saran"
'atau tampilkan nilai yang benar
jika hint="" lalu
  response.write("tanpa saran")
else
  response.write(hint)
end if
%>

Pengertian kode asli:

Jika JavaScript mengirimkan teks apapun (yaitu strlen($q) lebih besar dari 0), maka akan terjadi:

  • Cari cocok dari karakter yang dikirimkan dari JavaScript
  • Jika tidak menemukan yang cocok, atur string tanggapan menjadi "no suggestion"
  • Jika menemukan satu atau lebih nama yang cocok, atur string tanggapan dengan semua nama
  • Kirim tanggapan ke placeholder "txtHint"