AJAX digunakan untuk membuat aplikasi yang lebih interaktif.
Contoh berikut menunjukkan bagaimana halaman web berkomunikasi dengan server web ketika pengguna mengetikkan karakter di kotak input:
Saat pengguna mengetikkan karakter pada kotak masukan di atas, fungsi "showHint()" dijalankan. Fungsi ini dipicu oleh event "onkeyup":
<html><head><script>fungsi showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; / Kode dijalankan oleh browser IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); Kode dieksekusi oleh browser 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.php?q="+str,true); xmlhttp.send();}</script></head><body><p><b>Di kotak masukan Masukkan nama:</b></p><form> Nama: <input type="text" onkeyup="showHint(this.value)"></form><p>Nilai yang dikembalikan: <span id="txtHint"></span></p></body></html>Penjelasan kode sumber:
Jika kotak masukan kosong (str.length==0), fungsi ini akan menghapus konten placeholder txtHint dan keluar dari fungsi.
Jika kotak masukan tidak kosong, showHint() akan melakukan langkah-langkah berikut:
Buat objek XMLHttpRequest
Buat fungsi yang dijalankan ketika respons server siap
Kirim permintaan ke file di server
Harap perhatikan parameter (q) yang ditambahkan di akhir URL (berisi isi kotak input)
Halaman server yang dipanggil di atas melalui JavaScript adalah file PHP bernama "gethint.php".
Kode sumber di "gethint.php" memeriksa array nama dan mengembalikan nama yang sesuai ke browser:
<?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[]="Tove";$a []="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche ";$a[]="Vicky";//Dapatkan q dari alamat URL permintaan Parameter $q=$_GET["q"];//Periksa apakah ada nilai yang cocok, jika q>0if (strlen($q) > 0){ $hint=""; for($i=0; $ saya< menghitung($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint==" ") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; " if ($petunjuk == ""){ $response="tidak ada saran";}else{ $response=$hint;}//Output nilai kembalian echo $response;?>Penjelasan: Jika JavaScript mengirimkan teks apa pun (yaitu strlen($q) > 0), ini terjadi:
Temukan nama yang cocok dengan karakter yang dikirim oleh JavaScript
Jika tidak ditemukan kecocokan, setel string respons ke "tidak ada saran"
Jika ditemukan satu atau lebih nama yang cocok, setel string respons dengan semua nama
Kirim respons ke placeholder "txtHint".
Jika permintaan asinkron Anda perlu lintas domain, Anda dapat memeriksa: Solusi masalah lintas domain PHP Ajax.