AJAX digunakan untuk membuat aplikasi yang lebih dinamis.
Contoh berikut akan menunjukkan kepada Anda bagaimana halaman web berkomunikasi dengan server web ketika pengguna mengetikkan karakter di kotak masukan: Silakan ketik huruf (A - Z) di kotak masukan di bawah ini:
Coba masukkan huruf a pada kotak input:
Informasi cepat:
Saat pengguna mengetikkan karakter pada kotak input di atas, fungsi "showHint()" akan dijalankan. Fungsi ini dipicu oleh event "onkeyup":
fungsi tunjukkanPetunjuk ( str ) { var xmlhttp ; jika ( str .panjang == 0 ) { dokumen .getElementById ( " txtHint " ) innerHTML = " " ; jika ( jendela .XMLHttpRequest ) { // IE7+, Firefox, Chrome, Opera, kode eksekusi browser Safari xmlhttp = baru XMLHttpPermintaan ( ) ; kalau tidak { // IE6, kode eksekusi browser IE5 xmlhttp = baru ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = fungsi ( ) { jika ( xmlhttp .readyState == 4 && xmlhttp .status == 200 ) { dokumen .getElementById ( " txtHint " ) innerHTML = xmlhttp . } xmlhttp buka ( " DAPATKAN " , " /try/ajax/gethint.php?q= " + str , benar ) xmlhttp kirim ( ) ;Analisis kode sumber:
Jika kotak input kosong str.length==0 , fungsi akan menghapus konten placeholder txtHint dan keluar dari fungsi.
Jika kotak input tidak kosong, fungsi showHint() akan melakukan tugas berikut:
Buat objek XMLHttpRequest
Jalankan fungsi ketika respons server siap
Kirim permintaan ke file di server
Perhatikan bahwa kami menambahkan parameter q (dengan isi kotak masukan) ke URL
Halaman server yang dipanggil oleh JavaScript di atas adalah file ASP bernama "gethint.asp".
Di bawah ini, kami membuat dua versi file server, satu ditulis dalam ASP dan yang lainnya dalam PHP.
Kode sumber di "gethint.asp" memeriksa serangkaian nama dan mengembalikan nama yang sesuai ke browser:
<%response.expires=-1dim a(30)'Isi array dengan nama(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)="Tov e"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 URLq=ucase(request.querystring("q"))'cari semua petunjuk dari array jika panjang q>0jika len(q)>0 lalu petunjuk="" untuk i=1 hingga 30 jika q=ucase (mid(a(i),1,len(q))) lalu if petunjuk="" lalu petunjuk=a(i) lain petunjuk=petunjuk & " , " & a(i) berakhir jika berakhir jika selanjutnya berakhir jika'Output "tidak ada saran" jika tidak ada petunjuk yang ditemukan'atau keluarkan nilai yang benar jika petunjuk = "" lalu respon.tulis("tidak ada saran") lain respon.tulis(petunjuk)akhiri jika%>Kode di bawah ini ditulis dalam PHP dan memiliki efek yang sama dengan kode ASP di atas.
<?php// Isi array dengan nama$a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva";$a[] ="Fiona";$a[]="Gunda";$a []="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina ";$a[]="Ophelia";$a[]="Petunia ";$a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[ ]="Evita";$a[]="Sunniva";$a[]="Kepada ve";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a []="Wenche";$a[]="Vicky";//get parameter q dari URL$q=$_GET["q"];//cari semua petunjuk dari array jika panjang q>0if (strlen($q) > 0){ $hint=""; for($i= 0; $i<hitungan($a); $i++) { jika (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { jika ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; saran" jika tidak ada petunjuk yang ditemukan // atau ke nilai yang benar jika ($hint == ""){ $response="no saran";}else{ $response=$hint;}//output responecho $respon;?>