AJAX

December 18, 2007 ithamaniez

AJAX
December 10, 2007 · No Comments

Aryo Sanjaya
Selasa Pon, 7 Maret 2006

Istilah AJAX digunakan pada website yang berinteraksi dengan server melalui javascript secara asinkron (background), sehingga pengguna tidak perlu untuk meload keseluruhan halaman. Hal ini menyebabkan pengiritan waktu dan bandwidth, juga menghasilkan website yang makin interaktif. Seperti kebanyakan artikel pada umumnya, website yang dijadikan contoh AJAX sejati adalah GMail. Bagi yang pernah menggunakan GMail, tentu merasakan kehandalan interface webmailnya dengan AJAX.

Untuk mengaplikasikan AJAX (Asyncronous Javascript And XML) dalam website, yang dibutuhkan adalah browser dengan kemampuan Javascript, dan komponen XMLHTTP bagi pengguna IE, dan XMLHttpRequest untuk Firefox dan browser lainnya. Syarat-syarat tersebut hampir pasti sudah terpenuhi, mengingat pengguna internet kita banyak yang menggunakan IE dan Firefox🙂

Sebenarnya tidak ada hal baru dalam AJAX, karena yang digunakan adalah teknologi javascript, yang notabene sudah lama digunakan. Karena itu, bagi yang sudah terbiasa dengan javascript, akan mudah sekali mempelajari AJAX.

Pembahasan ini tidak menekankan pada salah satu teknologi (Javascript, AJAX, HTML, PHP), tapi keseluruhan dari hal tersebut. Hal ini karena penggunaan AJAX tidak hanya pada sisi klien (browser), tapi juga melibatkan respon dari server.

Sebagai acuan, berikut ini adalah salah satu kerangka dasar AJAX, yang katanya bikinan Mr Rasmus Redlorf, the creator of PHP.
Simpan dengan namafile: ajaxify.js

function createRequestObject() { var ro; var browser = navigator.appName; if(browser == “Microsoft Internet Explorer”){ ro = new ActiveXObject(”Microsoft.XMLHTTP”); }else{ ro = new XMLHttpRequest(); } return ro; } var http = createRequestObject(); function sndReq(action) { http.open(’get’, ‘rpc.php?action=’+action); http.onreadystatechange = handleResponse; http.send(null); } function handleResponse() { if(http.readyState == 4){ var response = http.responseText; var update = new Array(); update = response.split(’|’); if((response.indexOf(’|’ != -1)) && (update[0] == “OK”)) { document.getElementById(”hasil”).style[’color’] = ‘#00f’; document.getElementById(”hasil”).innerHTML = update[1]; } else { document.getElementById(”hasil”).style[’color’] = ‘#f00′; document.getElementById(”hasil”).innerHTML = “Respond dari server tidak sesuai”; } } }

Kode di atas adalah AJAX yang sangat dasar, yang jika ingin dikembangkan, masih butuh untuk dimodifikasi lagi.

Untuk melaksanakan proses request, dibutuhkan obyek XMLHttpRequest. Pada kode di atas, hal tersebut dilakukan pada fungsi createRequestObject(), yang hasilnya disimpan dalam obyek http.
Dalam fungsi tersebut, jika browser yang digunakan adalah IE, maka yang diciptakan adalah obyek Microsoft.XMLHTTP, dan XMLHttpRequest untuk browser lainnya.

Fungsi berikutnya, yaitu sndReq(), berfungsi sebagai pengirim request kepada server. Pada contoh di atas, request yang dilakukan adalah dengan method ‘get’, dan action/datanya diletakkan pada URL-nya.
Pada kasus sebenarnya, mungkin saja suatu saat nanti dibutuhkan pengiriman data melalui method ‘post’. Untuk hal seperti ini, dibutuhkan teknik yang lebih jauh. Kali ini kita gunakan method ‘get’ dulu.

Pada fungsi sndReq() ditentukan bahwa yang akan menangani hasil request adalah fungsi handleResponse(), dan setelah melakukan pengiriman (send), tugas dari fungsi sndReq() telah berakhir.

Fungsi yang akan sangat sibuk dalam AJAX adalah fungsi handleRequest(), karena di sinilah segala respon dari server ditangani.

Dalam contoh ini, yang ditangani adalah ketika request telah komplit diterima (readyState == 4). Data yang diambil adalah responseText, yaitu seluruh teks hasil kembalian dari server. Jika ingin menangani kembalian data yang berupa XML, maka data yang diambil adalah responseXML.

Untuk kasus di atas, diharapkan response dari server berupa:

“status|Pesan”

Sehingga script akan langsung mengetahui status request, dan merubah isi div yang telah disediakan dengan teks respon dari server

Entry Filed under: tugas

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

Trackback this post  |  Subscribe to comments via RSS Feed

Pages

Categories

Calendar

December 2007
M T W T F S S
     
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Most Recent Posts

 
%d bloggers like this: