Contoh PHP AJAX
AJAX digunakan untuk membuat aplikasi yang lebih interaktif.
Contoh PHP AJAX
Contoh berikut menunjukkan bagaimana halaman web dapat berkomunikasi dengan server web saat pengguna mengetik karakter di bidang input:
Contoh
Mulai ketikkan nama di kolom input di bawah ini:
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.php?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 PHP (gethint.php) di server
- Perhatikan bahwa parameter q ditambahkan gethint.php?q="+str
- Variabel str menyimpan konten bidang input
File PHP - "gethint.php"
File PHP memeriksa array nama, dan mengembalikan nama yang sesuai ke browser:
<?php
// Array with names
$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";
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
//
lookup all hints from array if $q is different from ""
if ($q !== "")
{
$q = strtolower($q);
$len=strlen($q);
foreach($a as
$name) {
if (stristr($q, substr($name, 0, $len)))
{
if ($hint === "") {
$hint = $name;
} else
{
$hint .= ", $name";
}
}
}
}
// Output "no suggestion" if no hint was found
or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>