Contoh AJAX ASP
AJAX digunakan untuk membuat aplikasi yang lebih interaktif.
Contoh AJAX ASP
Contoh berikut akan menunjukkan bagaimana halaman web dapat berkomunikasi dengan server web saat pengguna mengetik karakter di bidang input:
Contoh
Start typing a name in the input field below:
Contoh Dijelaskan
Dalam contoh di atas, ketika pengguna mengetik karakter di bidang input, fungsi yang disebut "showHint()" dijalankan.
Fungsi ini dipicu oleh acara onkeyup.
Berikut kode HTMLnya:
Contoh
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (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>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Penjelasan kode:
Pertama, periksa apakah kolom input kosong (str.length == 0). Jika ya, hapus konten placeholder txtHint dan keluar dari fungsinya.
Namun, jika bidang input tidak kosong, lakukan hal berikut:
- Buat objek XMLHttpRequest
- Buat fungsi yang akan dieksekusi ketika respons server sudah siap
- Kirim permintaan ke file ASP (gethint.asp) di server
- Perhatikan bahwa parameter q ditambahkan gethint.asp?q="+str
- Variabel str menyimpan konten bidang 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
%>