AJAX PHP: Contoh code dan Cara Menggunakannya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 30, 2020

AJAX digunakan untuk membuat aplikasi yang lebih interaktif.

Contoh AJAX PHP

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

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<h3>Mulai ketikkan nama pada bidang masukan di bawah ini:</h3>
<p>Saran: <span id="txtHint"></span></p> 

<p>Nama depan: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>

<script>
function showHint(str) {
  var xhttp;
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "gethint.php?q="+str, true);
  xhttp.send();   
}
</script>

</body>
</html>

Dalam contoh di atas, ketika pengguna mengetik karakter di bidang input, fungsi yang disebut showHint() dijalankan.

Fungsi ini dipicu oleh acara onkeyup.

Penjelasan code:

Pertama, periksa apakah kolom input kosong (str.length == 0). Jika ya, hapus konten placeholder txtHint dan keluar dari fungsinya.

Namun, jika kolom input tidak kosong, lakukan hal berikut:

Buat objek XMLHttpRequest
Buat fungsi untuk dijalankan saat respons server siap
Kirim permintaan tersebut ke file PHP (gethint.php) di server
Perhatikan bahwa parameter q ditambahkan gethint.php? Q = “+ str
Variabel str menyimpan konten field 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;
?>