Ajax suggest,.Ajax dapat di gunakan untuk membangun aplikasi yang unteraktif. Contoh penerapanya berupa suggestion (Ajax suggestion).
pada pembahasan kali ini saya tidak menggunakan database, hanya array pada script PHP saja. bila anda ingin mengkoneksikan ke database, tinggal modif saja,.
dalam membuat Ajax suggest kali ini terdapat 3 file: Satu halaman HTML sederhana (untuk form), satu file Javasript, dan PHP (untuk Array).
lansung saja ke pokok permasalahan (Ajax suggest).
buat halaman HTML sederhana dan beri nama index.php
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name: <input type="text" onKeyUp="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
script di atas adalah script HTML sederhana dengan inputan text. dan sebuah event onKeyUp, event onKeyUp akan bekerja saat ada masukan di masukan text,.
selanjutnya buat halaman Javascriptnya. dan simpan dengan nama clienthit.js
var xmlhttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
pada script javascript di atas adalah tempat fungsi javasript showHint yang di deklarasikan onKeyUp yang ada di halaman index.html, dan halaman ini juga yang menyimpan Ajax enginnya,.
script javascript diatas juga yang menjembatani antara index.html dan gethint.php, pada saat ada masukan di form maka akan merequest ke gethint.php dan hasil atau responya akan di kirim kembali ke index.html.
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Bagus";
$a[]="Catment";
$a[]="ctr";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gugus";
$a[]="Heni";
$a[]="Ine";
$a[]="Johan";
$a[]="Karina";
$a[]="Linda";
$a[]="Nina";
$a[]="Prety";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sulis";
$a[]="Toni";
$a[]="Unni";
$a[]="Violet";
$a[]="Lisa";
$a[]="Emma";
$a[]="Ellen";
$a[]="Winda";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
pada script php di atas adalah nama-nama yang di cari, dan bila nama yang di cari tidak ada maka akan muncul no suggestion,.
note: bila anda ingin membuat web yang interaktif Ajax adalah pilihan yang tepat, tapi selain itu Ajax juga mempunyai kelemahan. karena ajax berbasis javascript apabila di browser javascript tidak di aktifkan/disable maka ajax tidak bekerja,.
[Download Script] or [View Demo @catment.co.cc]
No comments:
Post a Comment