XML

XML : AJAX di PHP – Cara Membuat dan Menggunakannya

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:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<h3>Mulailah mengetik nama di kolom input di bawah ini:</h3>

<form action-xhr="#"> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></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>

Penjelasan Contoh

Dalam contoh di atas, saat kita mengetik karakter di kolom input, fungsi yang disebut “showHint ()” dijalankan.

Fungsi ini dipicu oleh event onkeyup.

Penjelasan Kode :

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;
?>

Hanifah Nurbaeti

Share
Tags: AJAXphpXML