Apakah Ajax itu ? para Web Designer dan Programmer tentu sudah
sering mendengar kata-kata tersebut dan sudah menjadi teknologi wajib
yang
harus digunakan dalam membuat sebuah website moderen dan dinamis.
Mengapa Harus Ajax
Pada website tradisional biasa jika kita mengklik suatu tombol/link
tertentu maka browser akan melakukan refresh
dimana document HTML akan di baca dari awal dan layar browser akan
menjadi blank sesaat karena pada saat itu browser sedang
meminta/merequest data dari web server dan hal itulah yang membuat
aplikasi website menjadi kurang interaktif dan responsif.
Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi
website menjadi lebih interaktif dan responsif serta memiliki kecepatan
dalam memproses request ke server. Saat ini Ajax sudah menjadi teknologi
yang wajib diterapkan bagi website-website moderen (Web 2.0).
Asal Mula Bahasa Pemrograman Ajax
AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan
suatu teknik baru dalam dunia web tapi bukan merupakan bahasa
pemrograman yang baru.
Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para
web desainer dan programmer.
Dengan adanya AJAX, akses data ke server yang dikirim melalui client via
web dapat lebih cepat daripada mekanisme biasa.
Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page
(refresh page) atau pindah ke page yang lain.
AJAX dapat diintegrasikan dengan server side programming seperti PHP,
ASP, JSP dll. Perhatikan mekanisme proses AJAX menggunakan PHP berikut
ini
Pada mekanisme di atas, proses berawal dari web client. Web client
merequest sebuah halaman PHP ke server melalui Javascript.
Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP
akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan
dikirim kembali
ke web client untuk diolah oleh Javascript. Hasil olahan javascript
tersebut akhirnya akan ditampilkan di web client sebagai output tanpa
harus merefresh halaman web. Bandingkan dengan mekanisme biasa dalam
menjalankan PHP seperti yang ditunjukkan pada gambar berikut
Pada mekanisme biasa, respon yang dihasilkan oleh server berupa HTML
yang
mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi
efisiensi, hal ini tentu kurang sekali. Sedangkan kekurangan AJAX
dibandingkan mekanisme biasa adalah memiliki tingkat
kesukaran pemrograman yang lebih tinggi, karena programmer harus
menguasai 4 hal yaitu
HTML-(XHTML), Javascript, XML dan juga server side programming seperti
PHP dan lain sebagainya.
Aplikasi Website dengan Ajax
Pada aplikasi Javascript konvensional jika kita menginginkan data dari server kita
menggunakan Form dan memanggilnya dengan method GET atau POST. Sehingga pengunjung perlu
mengklik tombol dan kemudian halaman akan kerefresh untuk menampilkan hasil dari request tersebut.
Nah, kalau dengan Ajax, Javascript berkomunikasi langsung keserver dengan sebuah fungsi yang disebut XMLHttpRequest.
dengan XMLHttpRequest suatu halaman web dapat direquest dari server
dan diterima hasilnya tanpa perlu terjadi refresh pada halaman web
tersebut.
XMLHttpRequest telah disupport oleh IE 5 keatas, Safari 1.2 keatas,
Mozilla Firefox keatas dan Opera 8 keatas. Ajax merupakan penggabungan
teknologi-teknologi Javascript, HTML/XHTML, XML, CSS dan Server Side Client.
Jadi jika anda belum menguasai salah satu dari teknologi tersebut
disarankan untuk anda mempelajari dahulu sebelum melanjutkan pemahaman
tentang AJAX.
Contoh aplikasi Ajax
Pada artikel ini saya akan coba memberikan contoh ajax yang paling
sederhana karena aplikasi-aplikasi website yang besar dimulai dari
sesuatau yang sederhana. Untuk memulainnya silahkan anda buat sebuah
File HTML dan tuliskan kode dibawah ini lalu simpan dengan nama
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<html>
<head>
<title>Contoh AJAX title>
<script language="javascript">
function GetXmlHttpObject(){
var xmlHttp=null;
try {
//Untuk Browser Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
//Untuk Browser Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function getpages(url,centercol) {
xmlHttp=GetXmlHttpObject();
if (xmlHttp) {
var obj = document.getElementById(centercol);
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 1) {
obj.innerHTML = '<img alt=\"Halaman Sedang Dimuat \" src=\"images/wait.gif\" alt=\"loading\" / >';
}
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
obj.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(null);
}
}
</script>
</head>
<body>
<h1>Request File Dari HTML </h1>
<form>
<input value="Request File " onclick="getpages('request.html','centercol')" type="button">
</form>
<div id="centercol">
File request.html akan ditampilkan disini
</div>
</body>
</html>
|
Sekarang buat file HTML dengan nama request.html yang disimpan dengan
folder yang sama dengan File diatas kemudian isilah dengan text berikut
ini:
?
1
|
Text ini ditampilkan dengan metode proses request <strong>Ajax</strong>
|
Berikut saya terangkan
Awalnya kita perlu membuat object XMLHttpRequest,
objek ini wajib ada dalam website yang menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan fungsi berikut ini:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function GetXmlHttpObject(){
var xmlHttp=null;
try {
xmlHttp=new XMLHttpRequest();
}
catch (e){
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
|
Pertama-tama kita set xmlHttp=null tidak aktif, kemudian baru kita aktifkan lagi dengan membuat objek yang baru xmlHttp = new XMLHttpRequest(); Khusus untuk Internet Explorer, karena menggunakan ActiveX untuk membuat XMLHttpRequest kita harus membuat kode xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
Setelah kita membuat objek XMLHttpRequest sekarang kita membuat
fungsi untuk mengambil file dan menampilkannya. Disini kita membuat
fungsi function getpages(url,centercol), yang didalamnya terdapat xmlHttp.open ("GET", url);
yang berarti kita mengambil url dengan method get. dengan menggunakan
method get maka kita harus mengirimkan sesuatu keserver, tapi karena
kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan
kode: xmlHttp.send(null);
xmlHttp.onreadystatechange = function() merupakan sebuah fungsi dimana nanti kita akan memperoleh status dari request file yang telah kita lakukan.
xmlHttp.readyState memiliki 4 status yaitu:
- 0 Request kita belum dibuat
- 1 Request kita sedang dalam proses (biasanya kita menggunakan gambar loading dengan ini)
- 2 Request kita sudah dikirim tapi hasil belum diterima
- 3 Request kita sedang diproses dikomputer klien
- 4 Request sudah sukses dikirim dan kita sudah sukses menerimanya
xmlHttp.status merupakan status http. Jika statusnya 200 berarti file
html nya ada dan siap ditampilkan. Sehingga kita perlu mengecek kedua
status tersebut dengan kode if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah obj.innerHTML = xmlHttp.responseText
Dimana ini berarti kita menampilkannya di obj, sementara variabel obj
telah kita isi dengan centercol, ini kode ketika kita mengisi obj
dengan centercol, var obj = document.getElementById(centercol).
Terakhir Kita memanggil fungsi getpages pada tombol serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getpages: <input type="button" value="Tampilkan Request" onclick="getpages('request.html' ,'centercol')">.
http://www.w3function.com/blog/?p=det&idn=23
