Yaps, banyak banget kegunaan ajax dalam pengembangan web bagi developer. Salah satu yang paling excited baru-baru ini yaitu kontribusi nya bagi para developer of Cloud Computing. Okay, that's a glance the concept for ajax.
Tadi sekilas tentang teori ajax. Saya akan sharing dengan temen-temen sekilas teknik-teknik dasar menggunakan ajax.
Saya mencoba memberikan pengertian yang paling simpel, yaitu secara teknis yang dilakukan script ajax adalah melakukan otomatisasi request dan menerima response dari client kepada server. Dengan demikian mengurangi aktivitas user seperti menekan tombol dengan tujuan seperti check, view, atau enter dan lain-lain yang umumnya ada di website.
Now, let's go to the practice. Kita akan membuat sebuah program sederhana yang melakukan periksa kategori hewan.
Di, lokasi web root anda buatlah sebuah folder yg bernama ajaxpractice. Sebagai contoh, karena saya menggunakan windows dan AppServer maka lokasi file saya ada di C:\AppServ\www\ajaxpractice\
Next, pada folder tersebut, buat sebuah file yang berjudul requestperiksa.html dan tulis program kecil seperti dibawah ini.
---------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Check Kategori Hewan</title>
<style type="text/css">
.kesimpulan{
float:left;
width:400px;
font:bold 100% Verdana,Arial,Helvetica,sans-serif;
height:20px;
border-bottom:2px solid #000000;
}
</style>
<script type="text/javascript" language="JavaScript">
function createXHR(){
try{return new XMLHttpRequest();}catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){}
try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}
alert("Browser anda tidak mendukung melakukan request dan response ajax");
return null;
}
function periksaKategori(namaHewan){
// user meminta client membuat ajax nya dulu sebelum di gunakan
var xhr = createXHR();
// Jika ajax dapat dibuat maka kita arahkan request nya ke sever.
if(xhr){
xhr.open("POST","responseperiksa.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){prosesPeriksa(xhr);};
var ambilNama = document.getElementById("namaHewan").value;
ambilNama = "namaHewan=" + ambilNama;
xhr.send(ambilNama);
}
}
function prosesPeriksa(xhr){
var tempatKesimpulan = document.getElementById("kesimpulan");
// setelah response diterima maka response tersebut di tampilkan ke dalam box kesimpulan yang telah kita sediakan di file requestperiksa.html
if(xhr.status == 200 && xhr.readyState == 4){
var teksKesimpulan = xhr.responseText;
tempatKesimpulan.innerHTML = teksKesimpulan;
}
}
</script>
</head>
<body>
<input type="text" class="namaHewan" id="namahewan" onChange="periksaKategori(this.value)"/>
<div id="kesimpulan" class="kesimpulan"></div>
</body>
</html>
---------------------------------------------------------------------------------------------------------
Setelah file yang melakukan request dan menerima response telah kita buat, maka kita buat file responseperiksa.php yang akan menerima request dan memberikan response dari file requestperiksa.html.
---------------------------------------------------------------------------------------------------------
<?php
$namayangdikirim = $_POST["namaHewan"];
$kategori = array();
$namanamahewan = array();
$kategori["unggas"] = {"ayam","bebek","burung"};
$kategori["melata"] = {"buaya","komodo","ular"};
$kategori["merayap"] = {"cicak","kutu","bintang laut"};
$kesimpulan = "";
foreach{$kategori as $kelompok => $namanama){
foreach($namanama as $nomor => $detailnama){
if($detailnama == $namayangdikirim){
$kesimpulan = $kategori;
}
}
}
$kesimpulan = ($kesimpulan != "") ? $kesimpulan : "nama belum ada di data kami";
echo $kesimpulan;
?>
---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Jadi saat user memasukan kata di kotak teks yang tersedia maka kesimpulan akan muncul di sampingnya...
Untuk detail dari kodenya bisa kalian cari di embah google, atau kalian comment aja. Saya akan berikan penjelasan yang mencangkup pengetahuan saya (mengingat ajax melibatkan ulasan tentang komunikasi pada HTTP, bisa sangat luas.. =D).. Tapi kalau temen-temen sudah familiar dengan javascript dan php, ini tentunya akan menjadi suatu keuntungan yang besar buat kalian menguasai ajax. That's all about ajax we shared at this moment...
Semoga bisa bermanfaat buat kita semua. .
My dream, IT engineer in Indonesia will be abundant, because they can contribute much with the ability.... =D
No comments:
Post a Comment