AJAX ASP


AJAX digunakan untuk mencipta aplikasi yang lebih interaktif.

Contoh ASP AJAX

Contoh berikut akan menunjukkan cara halaman web berkomunikasi dengan pelayan web apabila pengguna menaip aksara dalam kotak input:

Contoh

Mula menaip nama dalam medan input di bawah:

Cadangan:


Penjelasan contoh - halaman HTML

Apabila pengguna menaip aksara dalam kotak input di atas, fungsi "showHint()" akan dilaksanakan. Fungsi ini dicetuskan oleh acara "onkeyup":

<!DOCTYPE html>
<html>
<head>
<skrip>
function showHint(str)
{
if (str.length==0 )
{
document.getElementById("txtHint").innerHTML="";
kembali;
}
jika (tetingkap.XMLHttpRequest)
{// kod untuk IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= XMLHttpRequest baharu();
}
lain
{// 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>
</kepala
<badan>

<p><b>Mula menaip nama dalam medan input di bawah:</b></p>
< form>
Nama pertama: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Cadangan: <span id="txtHint"></span></p>

</body>
</html>

Penjelasan kod sumber:

Jika kotak input kosong (str.length==0), fungsi ini akan mengosongkan kandungan pemegang tempat txtHint dan keluar dari fungsi.

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

  • Buat objek XMLHttpRequest

  • Buat Fungsi dilaksanakan apabila respons pelayan sedia

  • Menghantar permintaan ke fail pada pelayan

  • Sila ambil perhatian parameter (q) ditambahkan pada penghujung URL (Termasuk kandungan kotak input)

Fail ASP

Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail ASP dinamakan "gethint.asp" .

Kod sumber dalam "gethint.asp" menyemak tatasusunan nama dan mengembalikan nama yang sepadan kepada penyemak imbas:

<%
response.expires=-1
malapkan a(30)
'Isi tatasusunan dengan 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"))

'cari semua pembayang daripada tatasusunan jika panjang q>0
jika len( q )>0 kemudian
, petunjuk=""
, untuk i=1 hingga 30
' Jika q=ucase(mid(a(i),1,len(q))) maka
                        Jika petunjuk="" maka
                                  Petunjuk=a(i)
                          lain
                                  ​​hint=hint & " , " & a(i)
                        Tamat jika
' tamat jika
, seterusnya
tamat jika

'Keluarkan "tiada cadangan" jika tiada petunjuk ditemui
'atau keluarkan nilai yang betul
jika petunjuk="" maka
, response.write("tiada cadangan")
lain
, respons.write(hint)
tamatkan jika
%>

Penjelasan: Jika JavaScript menghantar sebarang teks (iaitu strlen($q) > 0), ini berlaku:

  1. Cari nama yang sepadan dengan aksara yang dihantar oleh JavaScript

  2. Jika tiada padanan ditemui, tetapkan rentetan respons kepada "tiada cadangan"

  3. Jika satu atau lebih nama sepadan ditemui, gunakan semua nama Tetapkan rentetan respons

  4. Hantar jawapan kepada pemegang tempat "txtHint"