Skip to content

AJAX dengan Format JSON di Mootools

3 May 2009

Jika kita aktifkan console panel firebug di browser dan melakukan browsing ke situs yang sudah menggunakan ajax, akan tampak sekali banyak situs yang sudah menggunakan JSON sebagai format data response dari server.  Contoh saja gmail atau facebook.

Begitu pula setelah bermain dan menggunakan ExtJS, ternyata standar library ini juga sudah menggunakan JSON sebagai format datanya.

Bagaimana dengan pengguna Mootools ? Be happy, karena mootools pun sudah memiliki fungsi untuk melakukan request dengan format ini. Namun dari sample dan component yang tersebar di internet yang dibuat menggunakan mootools seringkali format ajax yang digunakan jarang menggunakan JSON. Jadi penggunaan JSON menggunakan mootools ini tampak kurang populer.

Langsung ke coding. Untuk request client, kita gunakan class Request.JSON. Isi opsi class dan kirimkan dengan methode post atau get.
Contoh kita ingin melakukan request untuk mengetahui data contact person dengan id = 1.

var request = new Request.JSON({
url: 'contact.php',
onComplete: function(response){
if (response.success == true){
alert(response.nama);
alert(response.phone);
alert(response.alamat);
}
else {
alert('Response tidak dikenal');
}
}
}).post({'id':'1'});

Dengan json, kita tidak perlu melakukan split string lagi seperti di request biasa. Kita tinggal beri flag success saja untuk menandakan data sukses diterima dan object bisa langsung digunakan.

Dari sisi server, prosesnya sama saja dengan menerima request biasa. Hanya untuk mengembalikan data ke browser, bisa dengan cara berikut :
A. Menggunakan text biasa dengan format json.

$id = $_post('id'); //id sebagai kriteria clausa where jika perlu baca dari database
echo "{'success':true,'nama':'John Doe','phone':'12345678', 'alamat':'Jl. Abcd Efgh'}";

B. Menggunakan fungsi php json_encode, yaitu fungsi untuk mengubah array menjadi text dengan format json.

$return = array("success"=>true, "nama"=>"John Due", "phone"=>"12345678", "alamat"=>"Jl. Abcd Efgh");
echo json_encode($return);

Bagaimana, mudah dan simple kan menggunakan format JSON di mootools ?

2 Comments leave one →
  1. 23 June 2009 5:10 pm

    Mas, numpang tanya neh ^^ Saya kan mau bikin skripsi tentang mootools. Kira-kira yang bisa dibahas di dalamnya apa aja yah?? Fungsi-fungsinyakah?? Atau langusng bikin aplikasinya?? Makasih sebelumnya (kalo bisa bales email yah mas ^^) Thx b4🙂

  2. cevarief permalink*
    23 June 2009 6:41 pm

    Skripsi tentang mootools, berarti mau kupas tuntas dong ya😛. Saya juga masih sama-sama belajar menggunakan mootols.
    Mungkin bahasannya dari struktur object oriented framework mootoolsnya sendiri ya, baik yang core atau struktur inti-nya maupun more-nya alias tambahannya spt efect dsb (semoga tidak pusing ya).
    Bahasan selanjutnya mungkin fitur-fitur mootools dan kelebihannya. Kalau bicara kelebihan pasti ada comparasinya ya dengan framework atau library javascript lainnya.
    Yang mungkin harus dibahas juga adalah bagaimana cara menggunakan mootols, cara membuat class mootools, plugins2 yang dibuat oleh mootools, UI (user interface) dan ujung2nya mungkin contoh web aplikasi yang sudah menggunakan mootools.
    Untuk gambaran lengkap sebaiknya diexplore di situs mootools atau kalau mau langsung bertanya ke para ‘ahli’ mootols bisa join di channel #mootools di IRC server freenode.net. Semoga membantu.
    Orangnya baik-baik kok, tanya aja😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: