DEFINISI AJAX PROGRAMMING
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
01.function createRequestObject()
{
02.var ro;
03.var browser
= navigator.appName;
04.if(browser
== "Microsoft Internet Explorer"){
05.ro =
new ActiveXObject("Microsoft.XMLHTTP");
06.}else{
07.ro =
new XMLHttpRequest();
08.}
09.return ro;
10.}
11.
12.var http
= createRequestObject();
13.
14.function sndReq(action)
{
15.http.open('get',
'rpc.php?action='+action);
16.http.onreadystatechange
= handleResponse;
17.http.send(null);
18.}
19.
20.function handleResponse()
{
21.if(http.readyState
== 4){
22.var response
= http.responseText;
23.var update
= new Array();
24.
25.update
= response.split('|');
26.if((response.indexOf('|' !=
-1)) && (update[0] == "OK")) {
27.document.getElementById("hasil").style['color']
= '#00f';
28.document.getElementById("hasil").innerHTML
= update[1];
29.}
30.else
31.{
32.document.getElementById("hasil").style['color']
= '#f00';
33.document.getElementById("hasil").innerHTML
= "Respond dari server tidak sesuai";
34.}
35.}
36.}
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:
01.<?php
02.
03.$action =
$_GET['action'];
04.switch($action)
05.{
06.case "hariini" :
echo "OK|".date("j F Y H:i:s");
07.break;
08.
09.case "namaserver" :
echo "OK|".$_SERVER['SERVER_NAME'];
10.break;
11.
12.case "ipuser" :
echo "OK|".$_SERVER['REMOTE_ADDR'];
13.break;
14.
15.case "versiphp" :
echo "OK|".phpversion();
16.break;
17.
18.default :
echo "ERROR|Perintah tidak diketahui ($action)";
19.break;
20.}
21.
22.?>
Ini adalah contoh halaman HTML yang memanfaatkan AJAX:
01.<html>
02.<head>
03.<title>AJAX
Test</title>
04.<script type='text/javascript' src='ajaxify.js'></script>
05.</head>
06.<body>
07.<h3>AJAX
Test</h3>
08.<hr/>
09.<p>
10.Silakan
klik link ini:<br/><br/>
11.<a href='javascript:sndReq("hariini")'>Hari
Ini</a><br/>
12.<a href='javascript:sndReq("namaserver")'>Nama
server</a><br/>
13.<a href='javascript:sndReq("ipuser")'>Alamat
IP</a><br/>
14.<a href='javascript:sndReq("versiphp")'>Versi
PHP</a><br/>
15.<a href='javascript:sndReq("tidaktau")'>Tidak
diketahui</a><br/>
16.</p>
17.<div id='hasil'></div>
18.<div style='text-align:
center; margin: 0px auto'>
21.</a>
22.</div>
23.</body>
24.</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.
setelah saya explore lebih dalam lagi dengan bahasa pemograman php.
Ternyata saya dapat mengetahui bahwa php merupakan bahasa pemograman web
yang sangat interaktif. dapat kita buat sesuai kebutuhan kita.