AJAX, langkah 1

AJAX sebagai metode baru dalam interaksi web dengan penggunanya

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.

Pemanfaatan kode di atas, mengharuskan kita menyediakan script dengan nama rpc.php, dan halaman HTML dengan suatu div untuk menampilkan hasil respon.

Berikut ini contoh file rpc.php:

<?php $action = $_GET['action']; switch($action) { case "hariini" : echo "OK|".date("j F Y H:i:s"); break; case "namaserver" : echo "OK|".$_SERVER['SERVER_NAME']; break; case "ipuser" : echo "OK|".$_SERVER['REMOTE_ADDR']; break; case "versiphp" : echo "OK|".phpversion(); break; default : echo "ERROR|Perintah tidak diketahui ($action)"; break; } ?>

Ini adalah contoh halaman HTML yang memanfaatkan AJAX:

<html> <head> <title>AJAX Test</title> <script type='text/javascript' src='ajaxify.js'></script> </head> <body> <h3>AJAX Test</h3> <hr/> <p> Silakan klik link ini:<br/><br/> <a href='javascript:sndReq("hariini")'>Hari Ini</a><br/> <a href='javascript:sndReq("namaserver")'>Nama server</a><br/> <a href='javascript:sndReq("ipuser")'>Alamat IP</a><br/> <a href='javascript:sndReq("versiphp")'>Versi PHP</a><br/> <a href='javascript:sndReq("tidaktau")'>Tidak diketahui</a><br/> </p> <div id='hasil'></div> <div style='text-align: center; margin: 0px auto'> <a href='http://www.bengkelprogram.com/'> <img src='http://www.bengkelprogram.com/images/banner88x31.gif' alt='info: http://www.bengkelprogram.com' style='border: 0px'/> </a> </div> </body> </html>

Untuk mengaplikasikan AJAX dalam situs anda, banyak hal yang harus dipikirkan, diantaranya adalah:

• Kelebihan dan kekurangan yang didapatkan oleh pengguna anda
  Jangan sampe user anda kesulitan berhadapan dengan interface baru, meski secara teori, interface AJAX justru mempermudah.
• Keterbatasan user
  Browser yang support AJAX memang sudah banyak, tapi bagaimana dengan user yang benar-benar tidak dapat menjalankan AJAX?
• Handling yang banyak
  Ini adalah beban buat programmer, bagaimana menangani berbagai kemungkinan. Misalnya jika transfer tidak sukses, jika user membatalkan proses, jika browser tidak diaktifkan javascriptnya, dan lain sebagainya.

Demikian tutorial singkat ini. Memang masih belum lengkap, karena kita masih belum memanfaatkan teknologi XML, sebagaimana kepanjangan AJAX :)

Untuk proses interaksi menggunakan XML, akan dibahas pada pada artikel selanjutnya.

Daftar Komentar

neubi

kutunggu jandamu ,.. ehh salah... kurunggu article berikutnya...hehehe...

Deni WIbowo

Wah, thanks lagi mas Aryo. Ajax ini sebenarnya aku pengen mbuat dari dulu, tapi belum kesampaian. Sekarang tinggal mengembangkan karena udah ada contohnya. Once again, theng kiu perimat yo...

ferdhie

Oh, ta pikir sepak bola,

Aryo Sanjaya

Kebiasaan, ngisruh forum orang :p Ayo, kasih masukane, jangan sok jadi pengunjung yang baik :))

jaylangkung

di sini juga ada brow tentang ajaxhttp://www.sony-ak.com/articles/6/short_introduction_ajax.phpsmoga membantu juga (aku dewe males utek2 program ... Tulisan thok hare)

ferdhie

Oh, ta pikir sepak bola,

Aryo Sanjaya

Kebiasaan, ngisruh forum orang :p

Ayo, kasih masukane, jangan sok jadi pengunjung yang baik :))

hybrid

coba pake ajax yang ada pada yahoo api atau pake prototype 1.4 tapi aku lupa alamatnya. keren deh........

ferdhie

Oh, ta pikir sepak bola,

Deni WIbowo

Wah, thanks lagi mas Aryo.
Ajax ini sebenarnya aku pengen mbuat dari dulu, tapi belum kesampaian.
Sekarang tinggal mengembangkan karena udah ada contohnya.
Once again, theng kiu perimat yo...