AJAX Tutorial
Sudah banyak tutorial tentang teknologi seperti ini di internet. Gue gak mau istilahnya "menambahkan" informasi yang sudah ada, toh isinya ya mirip-mirip semua. Katakan saja gue pengen "memperkaya" informasi dengan artikel gue ini.Artikel ini dipublikasikan dalam edisi cetak Buletin KMKI 2006.
Aplikasi web belakangan ini memiliki banyak kelebihan dibandingkan aplikasi desktop pada umumnya. Dengan Aplikasi web kita dapat mencakup target pasar yang lebih besar. Dan terlebih lagi aplikasi web lebih mudah dalam pengembangan dan instalasinya.
Meskipun begitu, aplikasi web tidak bisa selalu kita lihat sebagai sejenis “Rich Client”.Dan dari segi kemudahan dalam penggunaan tidak selalu sama seperti aplikasi desktop pada umumnya.
Untuk memecahkan masalah ini, sudah ada teknologi yang dapat digunakan. Teknologi yang sebenarnya tidak terlalu baru di bidang aplikasi web yang ingin kita bahas disini adalah AJAX.
AJAX bukan hanya tim sepakbola dari Amsterdam, tapi juga merupakan singkatan dari Asynchronous JavaScript And XML. AJAX bukanlah semata-mata sebuah bahasa pemrogramman baru, akan tetapi adalah sebuah tehnik (mungkin kita bisa bilang trik) untuk membuat aplikasi web lebih baik, cepat dan lebih interaktiv.
Kenapa dibilang trik? Karena AJAX menggunakan standard teknologi umum di bidang Aplikasi web, antara lain: Javascript, XML, HTML dan CSS. Standard-standard ini sudah di definisikan secara baik dan didukung oleh browser-browser umum. Maka dari itu Teknologi AJAX juga merupakan teknologi yang tidak tergantung pada browser atau operating system tertentu (Cross-Platform, Cross-Browser Technology).
Tehnik ini membantu Website untuk menjadi lebih responsif dengan cara berkomunikasi dengan web-server lewat "jalan belakang". Hal ini lebih baik daripada kita harus meminta web-server mengirimkan seluruh informasi dalam satu halaman.
Sebuah Client dalam Aplikasi web pada umumnya akan mengirimkan request ke web-server. Setelah request tersebut di proses, web-server akan mengirimkan satu halaman website utuh ke Client. Karena web server selalu mengirimkan halaman web yang utuh maka aplikasi web bisa menjadi cukup pelan dan mengurangi kemudahan dalam penggunaan aplikasi tersebut.
Dengan AJAX kita dapat mengirim dan menerima data tanpa harus me-reload seluruh halaman web. Hal ini dapat dilakukan dengan mengirimkan HTTP Request (lewat jalan belakang) pada web server, dan merubah sebagian dari halaman web menggunakan Javascript setelah webserver mengirimkan kembali data yang telah diproses. XML adalah Format yang digunakan dalam penerimaan data dari web server, meskipun Text biasa dapat juga digunakan.
Untuk lebih jelasnya marilah kita mencoba membuat sebuah Website kecil yang menggunakan AJAX.
Pertama-tama kita membuat satu halaman html yang berisikan sebuah tombol. Kita namakan index.html
[index.html]
<html>
<head>
<title>Ayo Belajar AJAX</title>
</head>
<body>
<input type="button" name="tombol" value="tekan disini"
onclick="doAJAX('container')" />
<div id="container"></div>
</body>
</html>
Baris ke 6 adalah tombol kita. Baris ke 8 adalah sebuah container dimana kita akan menaruh informasi baru yang akan kita terima dari web-server. Tombol kita memiliki sebuah onclick attribut dimana apabila kita menekan tombol tersebut fungsi javascript doAJAX akan dipanggil dan diproses.Sekarang kita buat lagi satu html file, akan tetapi dalam file ini kita hanya membuat sebagian dari sebuah file html utuh. Kita beri nama biru.html
[biru.html]
<table width="100" height="100" style="background-color: blue;">
<tr>
<td align="center" valign="middle">
Biru
</td>
</tr>
</table>
Disini kita membuat sebuah table dengan lebar 100 pixel dan tinggi 100 pixel, berlatar belakang biru dan berisikan tulisan "Biru" yang terletak pada posisi tengah baik horizontal maupun vertikal.Kita akan mencoba dengan AJAX memasukkan sebagian informasi yang diberikan oleh biru.html ke dalam index.html, lebih tepatnya ke dalam div yang kita beri nama "container". Untuk itu kita sekarang akan membuat javascript untuk penggunaan AJAX. Kita beri nama javascript.js. jangan lupa untuk menambahkan link ke javascript.js di bagian head dari index.html sebagai berikut:
[index.html]
<html>
<head>
<title>Ayo Belajar AJAX</title>
<script language="javascript" type="text/javascript"
src="javascript.js" />
</head>
...
</html>
[javascript.js]
var detect = navigator.userAgent.toLowerCase();
function checkIt(string){
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
if (checkIt('msie')){
browser="ie"
}else{
browser="other";
}
Baris 01 sampai baris 13 merupakan code yang akan membantu kita dalam
menciptakan HTTP Request Object karena Internet Explorer menggunakan panggilan yang berbeda dengan Browser lainnya.
function createRequestObject() {
var requestObject;
requestObject = false;
if(browser == "ie"){
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
requestObject = new ActiveXObject( "Microsoft.XMLHTTP" );
} // try to use the latest msxml dll
else{
requestObject = new ActiveXObject(
"Msxml2.XMLHTTP." + i + ".0" );
}
break;
} catch( excNotLoadable ){
requestObject = false;
}
}
}
}else{
requestObject = new XMLHttpRequest();
}
return requestObject;
}
var ajaxObject = createRequestObject();
Disini membuat sebuat fungsi Javascript dengan nama createRequestObject.
Dimana pada akhirnya akan dipanggil dan disimpan di variable ajaxObject. Fungsi ini
mempersiapkan HTTP Request Object untuk digunakan dalam memberikan request pada web server. Karena internet explorer menggunakan ActiveX dalam HTTP request object maka diperlukan code dari baris 17 hingga baris 33.Langkah selanjutnya adalah menuliskan fungsi doAjax yang akan dipanggil ketika kita menekan tombol. Fungsinya didefinisikan sebagai berikut:
var containerId = null;
function doAJAX(getContainerId) {
containerId = getContainerId;
ajaxObject.open('GET', 'biru.html');
ajaxObject.onreadystatechange = handleResponseDoAJAX;
ajaxObject.send(null);
}
Disini kita dapat melihat pada baris ke 43 kita mencoba membuka komunikasi
dengan webserver, dan meminta informasi tentang data biru.html. baris ke 42 memberitahu kita untuk memanggil fungsi handleResponseDoAJAX apabila kita mendapat respons dari webserver.Fungsi handleResponseDoAJAX didefinisikan sebagai berikut:
function handleResponseDoAJAX() {
if (ajaxObject.readyState == 4) {
results = ajaxObject.responseText;
document.getElementById(containerId).innerHTML = results;
}
}
Disini kita dapat melihat bahwa apabila web server merespons dengan status bernilai
4 maka itu berarti proses sudah selesai dan kita dapat memanggil hasilnya. Baris ke 50 menunjukkan pengambilan data dari biru.html dan menyimpannya dalam variable results. Dan pada baris 48 kita memasukkan hasil tersebut ke dalam container.Buat kalian yang suka serverside scripting seperti php, asp atau jsp kalian bisa membuat ajax memanggil script kalian, sehingga kalian bebas untuk menentukan apa yang akan kalian masukkan ke container. Sebagai contoh:
var containerId = null;
function doAJAX(getContainerId, modulId, modulName) {
containerId = getContainerId;
ajaxObject.open('GET', 'index.php?mod='+modulName+'&id='+modulId);
ajaxObject.onreadystatechange = handleResponseDoAJAX;
ajaxObject.send(null);
}
So selamat mencoba.Semua file dalam tutorial ini juga bisa di download disini.
Comments