Ajax Request Sederhana Dengan Mootools
Sebenarnya ini postingan gak penting, soalnya sudah banyak sekali tutorial tentang membuat request ajax menggunakan mootools. Tapi gak apa-apa, niatnya cuma daripada gak update blog :D.
Seperti yang sudah diketahui bersama dengan memanfaatkan ajax maka kita bisa dengan mudah melakukan update data di dalam halaman website tanpa perlu melakukan refresh, sangat keren menurutku yang cupu ini.
Oke kita mulai ke bagian yang membosankan, saya akan membuat sebuah contoh sederhana untuk mengupdate halaman website dengan memanfaatkan ajax ini. Yang dibutuhkan adalah mootools versi 1.2 ingat versi 1.2 bukan versi 2.2 karena versi 2.2 belum ada.
Yang pertama buat halaman html sederhana saja, tidak perlu image, css, cukup buat file kosong dengan ekstension html sudah cukup :D. Kemudian isi file html tersebut dengan tag-tag html biasa :
<html>
<head>
<title>Coba Ajax</title>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<script type=”text/javascript” src=”mootools-1.2.js”></script>
</head>
<body>
<a href=”s.php” id=”data”>data</a>
<div id=”hasil”></div>
</body>
</html>
Jika ditampilkan di browser maka akan menampilkan sebuah halaman website dengan sebuah link yang bertuliskan data. Jika link tersebut kita klik maka akan terjadi error karena tujuan link tersebut (s.php) belum dibuat. Oke sekarang buat file s.php dan isi dengan tulisan terserah anda :
<?php
echo “terserah anda”;
?>
Yang saya maksudkan adalah tulisan apa saja ya terserah anda, bukan berarti sebuah tulisan “terserah anda”. Sekarang jika link diklik maka akan menuju ke sebuah halaman baru yang bertuliskan “terserah anda”.
Sekarang kita buat script untuk melakukan request via ajax :
<script type=”text/javascript”>
window.addEvent(’domready’,function() {
$(’data’).addEvent(’click’,function(event) {
new Event(event).stop();
var req = new Request({
url : $(’data’).get(’href’),
onRequest: function() {
$(’hasil’).set(’html’,’sedang diproses…’);
},
onComplete: function(respon) {
$(’hasil’).set(’html’,respon);
}
}).send();
});
});
</script>
Letakan script tersebut dibawah <script type=”text/javascript” src=”mootools-1.2.js”></script> didalam tag <head>. Sekarang jika kita klik pada link data maka tulisan terserah anda akan muncul dibawah link dan tanpa refresh halaman sama sekali, mudah sekali bukan.
(ada smiley lho). Ternyata ada beberapa perubahan pada mootools versi 1.2 ini dibandingkan versi yang kupake sebelumnya. Contohnya saja, jika sebelumnya untuk memanfaatkan ajax bisa menggunakan class Ajax maka pada versi 1.2 ini menggunakan class Request atau fungsi setStyle dan setHTML yang sudah tidak ada, dan digantikan set({’styles:{}’}) dan set(’html’,).
