Latest web development tutorials

ASP - AJAX dan ASP

AJAX digunakan untuk membuat aplikasi yang lebih interaktif.

contoh AJAX ASP

Contoh berikut akan menunjukkan ketika pengguna dalam kotak input karakter, bagaimana halaman Web berkomunikasi dengan server Web:

contoh

Start typing a name in the input field below:

First name:

Suggestions:


Contoh menjelaskan - Halaman HTML

Bila pengguna dalam karakter kotak input di atas melakukan "showHint ()" fungsi. Fungsi ini terdiri dari "onkeyup" Pemicu Event:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for 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>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

Sumber menjelaskan:

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

Jika kotak input tidak kosong, maka showHint () melakukan langkah-langkah berikut:

  • Buat XMLHttpRequest objek
  • Membuat fungsi ketika server siap untuk melakukan respon
  • Berkas pada server untuk mengirim permintaan
  • Harap dicatat bahwa menambah (kotak input berisi) akhir parameter URL (q)

File ASP

Server di atas melalui JavaScript memanggil halaman ini disebut "gethint.asp" file ASP.

"Gethint.asp" kode sumber memeriksa array nama, dan kemudian kembali ke browser nama yang sesuai:

<%
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
%>

Penjelasan: Jika JavaScript mengirim pesan teks (yaitu, strlen ($ q)> 0), terjadi:

  1. Cari yang cocok karakter untuk mengirim nama-nama JavaScript
  2. Jika tidak ada yang cocok, respon string set "ada saran"
  3. Jika Anda menemukan satu atau lebih nama yang cocok, nama-nama semua pengaturan dengan string respon
  4. Mengirim respon terhadap "txtHint" placeholder