ASP - AJAX dan ASP
- Halaman Sebelumnya Pengenalan AJAX
- Halaman Berikutnya Database AJAX
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:
Saran:
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"
- Halaman Sebelumnya Pengenalan AJAX
- Halaman Berikutnya Database AJAX