Pemrograman Internet dengan AJAX (Asynchronous JavaScript And XML) Suprayogi
Abstract : AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. Keywords : Javascript, XML, HTML
PENDAHULUAN Sebagian besar aplikasi-aplikasi web memiliki keunggulan dibandingkan aplikasi-aplikasi desktop, keunggulan – keunggulan tersebut diantaranya : 1. Dapat mengcover user yang lebih besar dibanding aplikasi desktop. 2. Mudah dalam hal instalasi dan dukungan aplikasi, serta lebih mudah untuk dikembangkan. Akan tetapi aplikasi-aplikasi internet kalah “user friendly” dibandingkan dengan aplikasi desktop biasa. Pada aplikasi desktop suatu objek (misalnya : textbox) akan langsung memberikan response dengan cara menjalankan script yang terdapat pada event objek tersebut, namun berbeda dengan aplikasi-aplikasi web yang tradisional yang tanpa menggunakan AJAX, pada saat menjalankan suatu event, halaman web akan ditulis/dikirim ulang oleh server sehingga Content yang semula ada akan menjadi kosong dan itulah sisi kelemahan dari aplikasi web.
PEMBAHASAN AJAX menggunakan HTTP Requests Didalam penulisan kode menggunakan javascript, jika kita akan mengambil informasi dari suatu database atau file pada server, atau mengirim informasi user kepada server , kita harus membuat tag HTML yaitu Form dan GET atau POST. User harus menekan tombol Submit untuk mengirim informasi, menunggu repons dari server kemudian informasi akan ditampilkan pada halaman web Setiap kali user melakukan submit, server mengembalikan suatu halaman web baru, hal ini yang membuat aplikasi-aplikasi web tradisional berjalan lambat dan terlihat tidak user friendly.
Suprayogi adalah Dosen Fakultas Ilmu Komputer UDINUS Semarang 116
Arsitektur Model Aplikasi Client/Server (Jupri)
117
Dengan menggunakan AJAX, JavaScript berhubungan langsung dengan server menggunakan Objek XMLHttpRequest. Dengan HTTP Request, sebuah halaman web dapat membuat suatu request dan mendapatkan respons dari web server tanpa melakukan load ulang halaman. Halaman web terlihat tidak berubah walaupun sebenarnya telah terjadi komunikasi antara dengan server web. Objek XMLHttpRequest dapat dijalankan pada sebagian browser popular seperti Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. Contoh Aplikasi AJAX.
Untuk memahami bagaimana AJAX bekerja, kita akan membuat contoh kecil aplikasi AJAX. Pertama , buatlah form HTML dengan dua buah field text , yaitu name dan result. name nantinya akan diisi dengan nama dan Result akan diisikan otomatis oleh AJAX. File HTML disimpan dengan nama "testAjax.htm", seperti dibawah ini (catatan : tanpa tombol submit)
<script src="jsAjax.js">
Kunci pemrograman AJAX adalah objek XMLHttpRequest. Metode yang digunakan tidak sama antara Browser satu dengan yang lainnya. Internet Explorer menggunakan ActiveXObject, sementara browser lain menggunakan objek bawaan dari JavaScript yaitu XMLHttpRequest. Untuk menggunakan obyek ini dan aplikasi dapat berjalan pada beberapa browser yang berbeda, kita gunakan statement "try and catch".
Techno.Com, Vol. 7 No. 2, Mei 2007
118
Buat File Javascript, simpan dengan nama "jsAjax.js", seperti kode dibawah ini :
function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest();
}
catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
} return xmlHttp; }
Penjelasan aplikasi : Pertama-tama buat variable xmlHttp untuk menampung objek XMLHttpRequest dan set harga awal dengan nilai null (kosong) Kemudian ciptakan objek dengan perintah XMLHttp=new XMLHttpRequest(). Methode ini digunakan untuk browser Firefox,Opera dan safari. Jika penciptaan objek gagal kemudian dicoba untuk menggunakan try
Arsitektur Model Aplikasi Client/Server (Jupri)
119
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") untuk Internet Explorer 6.0+, jika gagal juga, dicoba try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") untuk Internet Explorer 5.5+. Jika ketiga methode masih tidak bekerja, berarti user menggunakan browser yang sudah ketinggalan dan menerima pesan bawha “browser doesn't support AJAX.” Terdapat tiga property penting pada objek XMLHttpRequest. 1. onreadystatechange 2. readyState 3. responseText
1. onreadystatechange Setelah request ke server, kita perlu memiliki fungsi yang dapat menerima data yang dikembalikan oleh server. Property ini menyimpan fungsi yang akan memproses response dari server.
2. readyState property ini menampung status reponse dari server. Setiap kali property readyState berubah, fungsi onreadystatechange di eksekusi. Dibawah ini nilai-nilai dari property readyState State
Description
0
request tdk inisialisasi
1
request telah di set up
2
request telah dikirim
3
request masih dalam pemrosesan
4
request telah complete/lengkap
3. responseText data yang dikirim balik dari server dapat diambil dengan menggunakan property responseText. Pada contoh kode diatas isi textbox result diambilkan dari responseText. Tambahkan kode pada jsAjax.js dengan fungsi showResult dan fungsi stateChanged , sebagai berikut.
Techno.Com, Vol. 7 No. 2, Mei 2007
120
function showResult(str) { if (str.length==0) { document.getElementById("result").innerHTML=""; return; } xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return;
}
var url="getResult.php"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { document.forms["myForm"].result.value=xmlHttp.responseText; } }
Arsitektur Model Aplikasi Client/Server (Jupri)
121
Penjelasan program : Fungsi showResult dipanggil oleh halaman test1.html pada even onBlur , dengan mengirimkan nilai yang diisikan pada text username.
if (str.length==0) { document.getElementById("result").innerHTML="";
return;
}
melakukan test terhadap nilai yang dikirim jika nilai yang dikirim kosong maka text box result dikosongkan, kemudian program pemanggilan fungsi ini berhenti.
xmlHttp=GetXmlHttpObject(); selanjutnya jika nilai yang dikirim ada isinya maka melakukan create objek xmlHttp.
if (xmlHttp==null) { alert ("Your browser does not support AJAX!");
return;
}
jika hasil create objek adalah null maka dimunculkan pesan browser tdk support dan eksekusi fungsi berhenti.
var url="getResult.php"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null);
jika browser support terhadap ajax, maka dilakukan eksekusi file getResult.php dengan mengirimkan nilai str , kemudian fungsi stateChanged dieksekusi untuk menampung hasil eksekusi file getResult.php pada text box form HTML. Methode Open() dan Send() digunakan untuk untuk mengirim request pada server.
Techno.Com, Vol. 7 No. 2, Mei 2007
122
Methode Open() mempunyai tiga argumen. Pertama mendefiniskan jenis methode yang digunakan untuk mengirim request(GET atau POST). Argument kedua mendefinisikan nama URL dari server-script (file php), ketiga mendefinisikan request sebagai asynchronous. Methode send() mengirimkan request off ke server.
Kode program untuk getResult.php adalah sebagai berikut : getResult.php
Penjelasan: kode tersebut membuat tulisan hello + nilai yang dikirim dari textbox name ke halaman web. Tampilan pada saat file html dipanggil :
Textbox Result akan berisi teks pada saat focus meninggalkan textbox Name
Arsitektur Model Aplikasi Client/Server (Jupri)
123
KESIMPULAN Pada contoh diatas aplikasi akan terlihat menampilkan response secara langsung dengan mengisikan objek hasil dengan nilai yang dikirim dari server, tanpa melakukan penghapusan content web yang sudah ada. hal inilah yang membuat aplikasi web menyerupai cara kerja aplikasi desktop sehingga aplikasi menjadi lebih user-friendly dan berjalan relative lebih cepat daripada aplikasi web biasa yang tanpa menggunakan AJAX. Dengan menggunakan AJAX, selain aplikasi-aplikasi Internet dapat dibuat lebih user friendly. Juga akan menambah kekuatan aplikasi web yaitu dari sisi deployment aplikasi (instalasi pada client). Server-script dapat menggunakan php , sehingga biaya pengembangan aplikasi menjadi lebih murah, dengan asumsi server menggunakan system operasi linux, web server menggunakan apache, dan database menggunakan mysql. Sementara dari sisi client/user hanya memerlukan suatu browser baik yang menggunakan windows ataupun Linux.
DAFTAR PUSTAKA 1. Team situs w3schools , AJAX Tutorial, http://www.w3schools.com 2008 2. M.Farid Azis, Pemrograman php4, Elex Media Komputindo, Jakarta, 2001
