AJAX adalah singkatan dari Asynchronous JavaScript And XML. AJAX bukan merupakan bahasa pemrograman baru, tetapi merupakan teknik yang membuat aplikasi web kita menjadi lebih baik, lebih cepat dan lebih interaktif.
Jika anda pengguna Yahoo!Mail atau GMail atau pengguna blog di wordpress ini, semuanya sudah dibuat dengan teknik AJAX. Dengan menggunakan AJAX maka script yang berjalan disisi client (JavaScript) bisa berkomunikasi langsung dengan server tanpa merefresh ulang keseluruhan halaman yang ada. Jadi JavaScript yang berjalan disisi client bisa menjalankan script disisi server secara background (script di sisi server bisa berupa ASP, PHP, JSP dll).
Contoh mudah : Misalnya ada form HTML yang dipakai untuk registrasi user, dimana ada kolom propinsi yang berupa pilihan (combobox), propinsi ini tergantung dari Negara yang dipilih sebelumnya. Pada saat user memilih Negara, maka ada script JavaScript yang diexecute untuk membaca ke server list dari propinsi yang ada di negara yang dipilih (secara background), setelah ketemu akan mengembalikan nilai yang akan menjadi pilihan propinsi.
AJAX sebenarnya menggunakan teknologi yang sudah ada : JavaScript, HTML, DHTML, CSS dan XML. Jika anda sudah terbiasa menggunakan DHTML, bagaimana membuat layer menggunakan <span>, <div>, menggunakan innerHTML atau outerHTML, maka teknologi seperti itu juga akan dipakai dalam AJAX. Dimana setelah JavaScript mendapatkan data dari server, maka data tersebut harus dilempar ke client melalui object2 yang sudah kita definisikan sebelumnya (menggunakan <span> atau ,<div>)
AJAX menggunakan HTTP Request
Dalam aplikasi JavaScript tradisional, jika anda ingin mendapatkan informasi dari database (di sisi server) maka anda harus membuat HTML form dan mengirimnya ke server (pakai method POST atau GET). Setelah form kita isi dan click ‘submit’ maka informasi yang kita masukkan akan dikirim ke server, diproses oleh server script dan halaman HTML baru akan di load beserta data yang diinginkan. Server selalu mengembalikan keseluruhan halaman setiap user submit data. Disinilah yang menyebabkan pemborosan sehingga aplikasi web terasa lambat.
Dengan menggunakan object yang ada di JavaScript yaitu XMLHTTPRequest, maka proses request ke server ini bisa dilakukan oleh JavaScript secara langsung. JavaScript ini bisa ditriger dari user input misalnya onchange, onclick, onkeyup, onmousedown dll. Sehingga bisa jadi user tidak tahu kalau JavaScript sudah request ke server sebelum user submit. Hal ini sangat berguna saat ada diperlukan validasi ke server sebelum user submit form secara keseluruhan.
Untuk melihat contoh nyata dari AJAX adalah Google Suggest http://www.google.com/webhp?complete=1&hl=en, kalau kita menuliskan keyword maka goggle bisa langsung menghitung keyword tersebut ke database sebelum kita submit. Jadi disini pada tiap entri-an kita di keyword JavaScrypt jalan mengexecute script di server sehingga bisa menampilkan/menghitung jumlah keyword tersebut di database. Atau kalau anda punya Account BLOGGER disitu pada saat saat kita edit tulisan/draft secara periodik hasil yang kita tulis langsung tersimpan di server tanpa harus click tombol Simpan/Save.Kuncinya adalah object XMLHttpRequest, karena dengan menggunakan object ini dari javascript, maka request data ke server dapat dilakukan tanpa mengirimkan keseluruhan halaman. XMLHttpRequest sudah disupport dalam Internet Explorer 5.0+, Safaru 1.2, Mozilla 1.0/Firefox, Opera 8+ dan Netscape 7.
Attributes
| readyState | the code successively changes value from 0 to 4 that means for “ready”. |
Methods
| open(mode, url, boolean) | mode: type of request, GET or POST url: the location of the file, with a path. boolean: true (asynchronous) / false (synchronous). optionally, a login and a password may be added to arguments. |
ReadyState merupakan atribute yang cukup benting, berikut adalah keterangan nilai dari atribut readystate
| State | Description |
|---|
Ada sedikit perbedaan mengenaih initialisasi Object XMLHttpRequest di beberapa browser :
Internet Explorer :
- xmlHttp = new ActiveXObject (“Msxml2.XMLHTTP”) ;
- xmlHttp = new ActiveXObject (“Microsoft.XMLHTTP”) ;
Firefox, Opera 8.0+, Safari
- xmlHTTP = new XMLHttpRequest();
Untuk mempermudah pemahaman tentang teknik AJAX, berikut adalah contoh script. Script terdiri dari 2 file, file pertama adalah file HTML yang sudah ada script JavaScript yang berfungsi memanggil server script, file ke dua adalah file server script (saya menggunakan Active Server Pages). Kedua file tersebut dapat dilihat di script dibawah ini :
File "AJAX.HTML" <html>
<body><script type="text/javascript">
function ajaxFunction() {
var xmlHttp; try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
} xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);
}
</script><form name="myForm"><input type="button" value="Test AJAX" onclick="ajaxFunction();" name="username" />
Time: <input type="text" name="time" size="50" /></form></body></html>
File “Time.asp”
<%response.expires=-1response.write "Waktu server saat ini adalah " & (time)%>
Contoh diatas merupakan contoh teknik AJAX yang sangat simple, dimana file AJAX.Html akan menampilkan sebuah tombol ‘Test AJAX’ dan sebuah TextBox yangn nantinya berisi hasil dari script ‘Time.asp’. Jika tombol ‘Test Ajax’ diclick maka script ajaxFunction akan dijalankan.
If (xmlHttp.readyState==4) maksudnya adalah untuk ngecek apakah request sudah selesai , jika sudah selesai maka hasilnya (responseText) ditaruh ke dalam value dari textbox ‘time’. Maka tampillah waktu server di textbox tersebut.
If (xmlHttp.readyState==4) maksudnya adalah untuk ngecek apakah request sudah selesai , jika sudah selesai maka hasilnya (responseText) ditaruh ke dalam value dari textbox ‘time’. Maka tampillah waktu server di textbox tersebut.
0 komentar: