Belajar Ajax dengan prototype.js

By Abu Aisyah, on March 5th, 2008

Ya ya, saya tahu ini basi, tapi paling tidak ini adalah pengalaman saya secara pribadi yang baru tahu bentuk makhluk yang namanya AJAX. Tapi bukan Ajax Andsterdam loh, saya nggak suka ama Ajax. Sukanya ama AC Milan.
Ajax singkatan dari “Asynchronous Javascript and XML“. Adalah sebuah teknologi yang memungkinkan kita bekerja di web secara realtime. Yap, itulah pengertian Ajax menurut saya (maklum bahasa Inggris lemah). Dan sebelumnya saya melihat sebuah script yang membingungkan. Maklum saya itu orangnya kepengen cepet dan nggak pengen yang lambat.
Dalam hal ini masalah coding ajax. Terus terang saya sendiri orangnya aplikatif. Tidak faham dengan script yang panjang. Dan mending diberitahukan cara tercepat untuk memulai dan menggunakannya. Dan et voila, hal itu terjawab sudah dengan menggunakan prototype.js. Script ini bisa anda ambil di wordpress. Saya sengaja nggak memberikan link download-annya, karena anda bisa download wordpress sendiri.

Petunjuk dan manualnya bisa dilihat di sini. Saya mulai dengan membuat sebuah halaman agar tampak terlihat realtime. Karena tempat saya bekerja ini adalah distributor pulsa, maka mau tak mau kita harus tahu antrian yang saat ini ada. Entah itu tidak diproses ataupun sedang diproses oleh server.
Kasusnya seperti ini. Misalnya saat ini ada berapa antriankah di server?
Script sederhananya adalah sebagai berikut:
lihatjmlantrian.php

<?php
//connection
$query = "select count(*) as jml from purchase where status < ".$_GET['st'];
$rs = mysql_query($query);
$rjml = mysql_fetch_object($rs);
$jml = $rjml->jml;
mysql_free_result;
echo $jml;
?>

Cukup dengan kode di atas kita sudah bisa tahu berapa jumlah antrian yang belum terproses di dalam database. Misalnya status antrian itu adalah 0 untuk menunggu dan 1 untuk sedang diproses. Dan 2-6 untuk status yang lain. Maka kita hanya akan mendapatkan data antrian yang menunggu dan sedang diproses.
Kemudian kita membuat script untuk memanggilnya. Sangat mudah.
panggil.php

<?php
//header, connection,function
?>
<script type='text/javascript' src="js/prototype.js"></script>
<h2>Jml Antrian</h2><span id="jmlantrian">(loading....)</span>
<?php
//footer
?>
<script language='javascript'>
new Ajax.PeriodicalUpdater(
'jmlantrian','lihatjmlantrian.php?st=2',
{
method:'get',frequency:5,decay:2
}
);
</script>

Ada beberapa fungsi pada Ajax, yaitu Ajax.Request yaitu tujuan murni dari ajax, yang berupa requester. Kemudian ada Ajax.Responder, Ajax.Updater, Ajax.Option, dan ada Ajax. PeriodicalUpdater. Dan kali ini saya menggunakan Ajax.PeriodicalUpdater yang berguna untuk menampilkan refresh halaman secara terus menerus. Dan ini berguna bagi kasus seperti diatas. Yah…semuanya bisa di download di situs yang sudah saya sebutkan tadi. Mulai dari prototype-nya, API-nya, sekaligus documentasinya. Tinggalkan koding yang berbelit-belit, saatnya menggunakan resource yang sudah ada.

by : http://www.abuaisyah.org/2008/03/05/belajar-ajax-dengan-prototypejs/