Contoh PHP AJAX

AJAX digunakan untuk menciptakan aplikasi yang lebih interaktif.

Contoh PHP AJAX

Contoh di bawah ini menunjukkan bagaimana halaman web berkomunikasi dengan server web saat pengguna mengetik karakter di kolom input:

Contoh

Silakan masukkan huruf A-Z di kolom input di bawah ini:

Nama:

Saran Pencarian:

Penjelasan Contoh

Dalam contoh di atas, saat pengguna mengetik karakter di kolom input, fungsi yang dijalankan adalah "showHint()".

Fungsi ini diaktifkan oleh peristiwa onkeyup.

Berikut adalah kode HTML:

Contoh

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        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>Silahkan ketik nama di bidang masukan di bawah ini:</b></p>
<form> 
Nama keluarga atau nama:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Saran:<span id="txtHint"></span></p>
</body>
</html>

Coba sendiri

Penjelasan kode:

pertama, periksa jika bidang masukan kosong (str.length == 0），jika ya, kosongkan konten placeholder txtHint dan keluar dari fungsi.

Namun, jika bidang masukan kosong, lakukan seperti berikut:

  • Buat objek XMLHttpRequest
  • Buat fungsi yang akan dieksekusi saat server siap untuk merespon
  • Kirim permintaan ke file PHP (gethint.php) yang berada di server
  • Perhatikan menambahkan parameter q ke gethint.php
  • Variabel str menyimpan konten bidang masukan

File PHP - "gethint.php"

File PHP ini memeriksa array nama, lalu mengembalikan nama yang sesuai ke browser:

<?php
// Nama array
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// Ambil parameter q dari URL
$q = $_REQUEST["q"];
$hint = "";
// Lihat semua hint dalam array, apakah $q sama dengan ""
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            }
                $hint .= ", $name";
            }
         }
    }
}
// Menyampaikan "tidak ada saran" jika hint tidak ditemukan atau menampilkan nilai yang benar
  echo $hint === "" ? "tidak ada saran" : $hint;
?>
c.html" -->