ASP - AJAX dengan ASP

AJAX digunakan untuk menciptakan aplikasi yang lebih dinamis.

Contoh AJAX ASP

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

Contoh

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

Nama:

Perekomendan:

Coba kode asli sendiri

Pengertian contoh - Halaman HTML

Saat pengguna menekan huruf 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)
  {// Kod untuk IE7+, Firefox, Chrome, Opera, Safari}
  xmlhttp=new XMLHttpRequest();
  }
else
  {// Kod 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>Sila masukkan huruf huruf Inggeris di kotak input:</b></p>
<form>
Nama pertama: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Sugestsi: <span id="txtHint"></span></p>
</body>
</html>

Pengeluaran kod asal:

Jika kotak input kosong (str.length==0), fungsi akan kosongkan kandungan placeholder txtHint dan keluar dari fungsi.

Jika kotak input tidak kosong, fungsi showHint() akan melaksanakan langkah berikut:

  • Cipta objek XMLHttpRequest
  • Cipta fungsi yang akan dijalankan apabila respons server siap
  • Hantar permintaan ke fail di atas server
  • Perhatikan parameter (q) yang ditambahkan ke akhir URL (termasuk kandungan kotak input)

Fail ASP

Laman pelayanan server JavaScript di atas adalah fail ASP yang dinamakan "gethint.asp".

"gethint.asp" kod asal akan memeriksa array nama, lalu mengembalikan nama yang sepadan kepada pelayar:

<%
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 daripada URL
q=ucase(request.querystring("q"))
'Jika panjang q>0, cari semua petunjuk di dalam array
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
'Jika tiada petunjuk ditemui, output "tanpa sugesti"
'atau output nilai yang betul
if hint="" then
  response.write("tanpa sugesti")
else
  response.write(hint)
end if
%>

Pengeluaran kod asal:

Jika JavaScript menghantar mana-mana teks (iaitu strlen($q) lebih besar daripada 0), maka akan terjadi:

  • Cari yang cocok dari karakter 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 penempatan "txtHint"