AJAX digunakan untuk membuat aplikasi agar lebih interaktif.
Kali ini saya akan memberikan contoh yang menunjukkan bagaimana sebuah halaman web dapat berkomunikasi dengan server web, dengan tipe karakter yang dimasukan ke dalam input text.
Ketika kita memasukan inputan berupa karakter, fungsi "showHint ()" dijalankan. Fungsi ini dipicu oleh "onkeyup".Jika field input kosong (str.length == 0), fungsi membersihkan isi placeholder txtHint dan tidak menjalankan fungsi. Jika field input tidak kosong, maka fungsi showHint () dijalankan.Langkah pertama kita buat file dengan nama latihan_ajax.php.<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
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>
<b>Input Nama Kota:</b>
<form>
Masukan Kota: <input onkeyup="showHint(this.value)" type="text" />
</form>
Suggestions: <span id="txtHint" style="font-family: Verdana, Geneva, sans-serif;"> </span>
</body>
</html>Halaman pada server yang dipanggil oleh JavaScript di atas adalah file PHP yang disebut "gethint.php".<?php
//array menyimpan nama kota
$a = array('MEDAN','PEKANBARU','BATAM','PADANG','PALEMBANG','LAMPUNG','BENGKULU','BANDUNG','SERANG','CIREBON',
'SEMARANG','YOGYAKARTA','SURABAYA','MALANG','BALIKPAPAN','BANJARMASIN','MAKASSAR','MANADO','PALU','JAYAPURA',
'SORONG','DENPASAR','KUPANG','MATARAM','JAKARTA','PONTIANAK','AMBON','TERNATE','BANDA ACEH','LHOKSEUMAWE');
//get parameter q dari URL
$q=$_REQUEST["q"]; $hint="";
//cek kata apakah sama atau beda
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";
}
}
}
}
//out put no suggestion jika data tidak ada yang sama
echo $hint==="" ? "no suggestion" : $hint;
?>Outputnya sebegai berikut :Selamat mencoba.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
