Ajax Example Using PrototypeJS’s Ajax.Updater() Function
Posted by Aryo Pinandito
Sesuai dengan judulnya, contoh penerapan Ajax (Asynchronous Javascript and XML) yang paling sederhana dengan menggunakan fungsi Ajax.Updater() dari Javascript Framework Prototypejs.
Contoh ini terdiri 3 buah file:
index.html, halaman HTML yang menggunakan Ajax.prototype-1.6.0.2.js, Javascript framework yang bisa diunduh di sinirandom.php, file php yang berfungsi untuk menampilkan angka-angka random yang akan ditampilkan menggunakan Ajax.
Kalau nggak punya webserver yang bisa mengolah script php, file ini bisa diganti dengan file txt atau file html yang lain. Hanya saja, begitu file txt ini di-load, nggak kelihatan kalau file-tsb di-load setiap kali fungsi javascriptdoSomething()dipanggil
file index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script language="javascript" type="text/javascript">
doSomething = function() {
new Ajax.Updater('container', 'random.php')
}
</script>
<title>Ajax.Updater() Example</title>
</head>
<body>
<div id="container"></div>
<div><a href="#" onclick="doSomething(); return false;">Click me!</a></div>
</body>
</html>
file random.php:
<?php echo rand( 1000, 9999 ); ?>
Bedah Script:
file index.html:
di antara elemen <head> terdapat <script language="javascript" type="text/javascript" src="prototype-1.6.0.2.js"></script> yang berfungsi untuk me-load framework javascript prototypeJS ke dalam file index.html. Di dalam file prototype-1.6.0.2.js ini lah fungsi Ajax.Updater() berada.
selanjutnya terdapat fungsi javascript doSomething() yang memanggil fungsi Ajax.Updater()
doSomething = function() {
new Ajax.Updater('container', 'random.php');
}
Fungsi doSomething() inilah yang akan dipanggil (dieksekusi) oleh link yang ada di halaman index.html ketika user mengeklik link-nya.
Catatan:
new Ajax.Updater('container', 'random.php');berarti: Update elemen yang memiliki id
containerdari output filerandom.php
Di dalam elemen body, terdapat elemen div dengan id="container"
<div id="container"></div>
Di dalam elemen inilah keluaran dari file random.php akan ditampilkan. Dalam sebuah dokumen (X)HTML, tidak diperkenankan adanya dua elemen atau lebih memiliki atribut id yang sama.
Dibawahnya terdapat sebuah link Click me! yang memanggil fungsi javascript doSomething(). Ketika user mengeklik link inilah file random.php akan dieksekusi secara Ajax dan output random.php akan ditampilkan di dalam layer div yang memiliki id="container".
<a href="#" onclick="doSomething(); return false;">Click me!</a>
Ketiga file tersebut (index.html, prototype-1.6.0.2.js, dan random.php) diletakkan di dalam direktori yang sama.
file random.php:
<?php echo rand( 1000, 9999 ); ?>
Fungsi echo rand( 1000, 9999 ); bertujuan untuk menampilkan angka yang diacak antara 1000 hingga 9999. Angka yang diambil secara acak inilah yang akan diambil secara Ajax dan ditampilkan di dalam file index.html
Sekali lagi, untuk mencobanya, klik link Click me! di file index.html untuk melihat hasilnya.
Selamat mencoba.
2:01:59 PM
makasih ya atas sharing ilmunya Good Luck For U
Thank’s ya Untk tutorial Ajax nya,
mau tanya dong?
kalau supaya pas di Click dia ngacak dulu angkanya, sampai kita klik stop baru berhenti, itu gmana ya?
tolong jawabannya ya
kalau bisadi kirim ke wantoncm@gmail.com ya. heee
Thank’s
wah, kalau “ngacak” yang ada animasinya sih pake ajax sulit, paling mudah, animasi pengacaknya pake Flash aja. trus disampingnya dikasih button untuk menghentikan animasinya itu. Karena pada dasarnya ajax itu melakukan request data dari server secara background. Dari tutorial yang saya perlihatkan itu angkanya murni acak dari script PHP dan diolah di server.