Contoh ASP AJAX

AJAX digunakan untuk menciptakan aplikasi yang lebih interaktif.

Contoh ASP AJAX

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

Contoh

Silakan masukkan huruf A-Z di kolom input di bawah ini:

Nama:

Saran Pencarian:

Penjelasan Contoh

Dalam contoh di atas, saat pengguna mengetik karakter di kolom input, fungsi yang dijalankan adalah "showHint()".

Fungsi ini diaktifkan oleh peristiwa onkeyup.

Berikut adalah kode HTML:

Contoh

<html>
<head>
<script>
function showHint(str) {
    jika (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        kembali;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            jika (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.asp?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Harap masukkan huruf A-Z di bidang masukan di bawah ini:</b></p>
<form> 
Nama：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Saran pencarian:<span id="txtHint"></span></p>
</body>
</html>

Coba sendiri

Pengertian kode:

Pertama, periksa apakah bidang masukan kosong (str.length == 0）；jika ya, kosongkan konten penempatan txtHint dan keluar dari fungsi.

Namun, jika bidang masukan kosong, lakukan seperti berikut:

  • Buat objek XMLHttpRequest
  • Buat fungsi yang akan dieksekusi saat server siap merespon
  • Kirim permintaan ke file ASP (gethint.asp) yang berada di server
  • Harapisyaratkan parameter q ditambahkan ke gethint.asp
  • variabel str menyimpan konten bidang masukan

File ASP - "gethint.asp"

File ASP ini memeriksa array nama, lalu mengembalikan nama yang sesuai ke browser:

<%
 response.expires=-1
 dim a(32)
 isi nama di array
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"
 Ambil parameter q dari URL
 q=ucase(request.querystring("q"))
 Lihat semua hint dalam array, panjang q apakah lebih besar dari 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
 Jika hint belum ditemukan, keluarkan "no suggestion", atau keluarkan nilai yang benar
 if hint="" then
   response.write("no suggestion")
 else
   response.write(hint)
 end if
%>