AJAX - Asynchronous JavaScript And XML Istilah AJAX technology belakangan ini sering terdengar dalam pengembangan aplikasi web, berikut sedikit gambaran tentang AJAX dan cara memanfaatkannya dalam pengembangan web. AJAX pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul AJAX: A New Approach To Web Applications AJAX bukan merupakan bahasa pemrograman baru, namun hanya sebuah tehnik pemanfaatan Javascript dalam mengontrol class object XMLHttpRequest untuk me-Refresh / mengupdate content dalam halaman web tanpa melakuan Reload keseluruhan halaman web seperti pada Metoede Tradisional, AJAX sendiri merupakan singkatan dari “Asynchronous JavaScript And XML”.

Gambar : Mekanisme proses penggunaan AJAX dengan PHP

Teknologi Dibalik AJAX •

XHTML (Extensible HyperText Markup Language), adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. Versi terakhir saat tulisan ini dibuat adalah XHTML 2.0.

•

CSS (Cascading Style Sheets ) adalah sebuah mekanisme sederhana untuk memberikan style (seperti font, warna, jarak spasi, dll) kepada dokumen web yang ditulis dalam HTML atau XML (termasuk beberapa variasi bahasa XML seperti XHTML dan SVG).

•

JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan pada produk dan aplikasi lain seperti peramban web.

•

DOM (Document Object Model) adalah sebuah API (Application Program Interface) untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara terstruktur, dimungkinkan untuk merubah isi dan

presentasi visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa pemprograman. •

XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar sistem yang beraneka ragam.

•

Objek XMLHttpRequest untuk melakukan pertukaran data asinkronus dengan web server. Pada beberapa framework dan kasus AJAX, objek IFrame lebih dipilih daripada XMLHttpRequest untuk melakukan pertukaran data dengan web server.

Cara Kerja AJAX Ditinjau dari cara kerjanya, teknologi AJAX dibagi menjadi dua, yaitu front end dan back end. Bagian Front adalah JavaScript. Javascript dapat digunakan untuk mengakses data dari dan ke server. Sipat dari koneksi AJAX adalah asinkronus, artinya browser tidak perlu menunggu server selesai merespon, untuk kemudian melanjutkan pekerjaannya menampilkan halaman web atau menunggu input dari user. Berikut ini merupaka cara kerja AJAX disisi front end : 1. JavaScript membuat sebuah objek XMLHttpRequest dan mengirimkan objek ini ke web server. 2. Server kemudian merespon dengan cara mengirimkan output berupa data dari server side. 3. Ketika respon sudah datang dari server, terdapat kode JavaScript lain yang bertugas mengolah data tersebut untuk kemudian di tampilkan di browser. 4. Agar ditak perlu refresh, data biasanya ditampilkan menggunakan DOM. Sementara dari sisi Back-End adalah bagian dari aplikasi yang terletak di bagian web server. Back-end yang paling sederhana di AJAX adalah file teks standar, atau file XML yang dapat diambil dengan menggunakan perintah ResponseXML. Sementara back-end yang lebih canggih adalah dengan memanfaatkan bahasa pemrograman server-side seperti PHP, ASP dan sebagainnya

Kegunaan AJAX AJAX memiliki banyak kegunaan yang dapat dipakai untuk membuat website yang dibangun jadi lebih menarik, atraktif dan lebih profesional. Berikut ini beberapa contoh penggunaan AJAX :

•

Validasi Data yang real time : dalam hal ini AJAX dapat melakukan proses validasi secara langsung tampa melalui proses refresh pada saat user melakukan pengisian data melalui form.

•

Autocomplete : AJAX dapat digunakan untuk melakukan aoutocomplete pada saat user sedang mengisi data pada sebuah form, dengan demikian karakter yang sedang dituliskan oleh user akan bisa langsung dilengkapi oleh entry-entry yang disarankan

•

Load on demand : Berdasarkan event tertentu, halaman HTML bisa mengambil tambahan dari bakcground sehingga memungkinkan browser manampilkan halaman web secara lebih cepat dan bisa diatur kapan tampilnya.

•

Refresh data dan server push : Halaman web bisa mengambil data dari server tertentu untuk menampilkan informasi terkini, misalnya ramalan cuaca, kurs dolar, jadwal penerbangan dan lain sebagainya. Dengan demikian halaman web bisa mengambil data terebut secara real time tampa memalui proses refresh.

•

Mencampur data / Mashup : Halaman web bisa manampilkan data menggunakan berbagai media seperti proxy server-side ataupun menggunakan skrip eksternal. Sebagai contoh anda bisa menggabungkan nilai tukar dolar ke rupiah untuk halaman web e-commerce.

•

Patrial Submit : Halaman web bisa melakukan submit sebagian form terlebih dahulu tampa meminta halaman web direfresh terlebih dahulu.

•

Menjadikan sebuah halaman web sebagai aplikasi: Teknik-teknik AJAX memungkinkan halaman yang mengandung kode AJAX untuk bereaksi dan memiliki tampilan layaknya aplikasi desktop.

Kelebihan dan kekurangan AJAX Kelebihan utama AJAX sendiri terletak pada pemanfaatan class object XMLHttpRequest untuk berkomunikasi dengan Web Server dalam melakukan request content,

Langkah Penggunaan AJAX berikut pengunaan Javascript dalam membuat class object XMLHttpRequest : Untuk membuat class object pada browser Firefox, Safari, IE7, Mozila, dsb. oAJAX = new XMLHttpRequest(); Untuk membuat class object pada browser IE versi terbaru.

oAJAX= new ActiveXObject('MSXML2.XMLHTTP'); Untuk membuat class object pada browser IE versi lama. oAJAX = new ActiveXObject('Microsoft.XMLHTTP'); Untuk dapat berjalan pada semua browser (Cross Browser), kita dapat mengabungkan kesemua script tersebut kedalam sebuah function pembuat class object XMLHttpRequest seperti berikut : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="javascript"> function createRequest(){ var oAJAX = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { oAJAX = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { oAJAX = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { oAJAX = false; } } @end @*/ if (!oAJAX && typeof XMLHttpRequest != 'undefined') { oAJAX = new XMLHttpRequest(); } if (!oAJAX){ alert("Error saat membuat XMLHttpRequest!"); }else{ alert("XMLHttpRequest sukses dibuat!"); } return oAJAX; } <style type="text/css"> Halaman ini memangil function pembuatan class object XMLHttpRequest
Jika gagal atau pun berhasil akan di tampilkan Alert message.



Mula-mula function diatas akan mencoba membuat class object XMLHttpRequest dengan sintaks IE versi terbaru, jika gagal maka akan di coba mengunakan sintaks pd IE versi sebelumnya jika masih gagal maka akan di coba mengunakan sintaks pembuatan pada browser Mozila, Firefox dsb. Dengan pengabungan diatas di pastikan class object XMLHttpRequest akan terbentuk dan function akan mengembalikan class object yang telah berhasil dibuat (kecuali ada ada browser baru :). Setelah object XMLHttpRequest terbentuk selanjutnya kita dapa menanfaatkan object tersebut untuk berkomunikasi dengan server, berikut contoh pemanfaatan class object XMLHttpRequest untuk meminta content data dari server. Untuk merequest data dari server pada contoh berikut di gunakan function requestContent yang akan di panggil saat sebuah link di click, detail script function yang digunakan seperti berikut : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="javascript"> function createRequest(){ var oAJAX = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { oAJAX = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { oAJAX = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { oAJAX = false; } } @end @*/ if (!oAJAX && typeof XMLHttpRequest != 'undefined') { oAJAX = new XMLHttpRequest(); } if (!oAJAX){ alert("Error saat membuat XMLHttpRequest!"); } return oAJAX; } function requestContent(){ oRequest = createRequest(); var url = "dataLoad.html"; // Buka komunikasi dengan server oRequest.open("GET", url, true);

// menunggu respon dari server // jika sudah di dapat respon dari server, maka hasil respon akan di tampilkan pada DIV dengan ID='divContent' oRequest.onreadystatechange = function () { document.getElementById("divContent").innerHTML=""; if (oRequest.readyState == 4) { // baca data respon dari server var response = oRequest.responseText; document.getElementById("divContent").innerHTML = response;

}

} } // Send the request oRequest.send(null);

<style type="text/css">

Pemanfaatan class object XMLHttpRequest untuk berkomunikasi dengan server Click disini untuk load Data

Function diatas pertama kali akan membuat class object XMLHttpRequest dengan memanfaatkan function createRequest() yang ada sebelumnya, hasil pembuatan object akan di tampung kedalam variabel object oRequest. setelah object XMLHttpRequest terbentuk, berikut akan dilakukan komunikasi dengan request dengan server untuk meminta data dari file dataLoad.html dengan GET method. Sintaks open request sebagai berikut : oXML.open(<method>, , );< /method> •

methode : POST atau GET

• •

url_file : lokasi URL file yang akan di request async_status : TRUE atau FALSE

catatan Asynchronous status: • •

Status TRUE : Javascript akan melanjutkan proses secara normal sementara menunggu respon dari server diterima Status FALSE: akan menunggu hingga respon dari server, selama respon belum di dapat proses yang ada berikutnya akan di hold hingga respon dari server di terima.

Setelah melakukan request kepada server function akan menunggu respon dari server oRequest.onreadystatechange selama menggu respon dari server, bagian script berikut pada function akan dijalankan 1. document.getElementById("divContent").innerHTML=" 2.

Menunggu Respon server"; 3. if (oRequest.readyState == 4) { 4. // baca data respon dari server 5. var response = oRequest.responseText; 6. document.getElementById("divContent").innerHTML = response; 7. } 8. }

ReadyState status: 0: uninitialized –> Open status belum dijalankan 1: loading –> Status request belum di jalankan 2: loaded –> Status request sudah di kirimkan, dan menunggu respon dari server. 3: interactive –> Respon dari server sedang dalam proses download. 4: completed –> Respon data dari server telah selesai di download. Function akan menunggu hingga status respon dari server oRequest.readyState == 4, nilai 4 tersebut berarti respon telah selesai diberikan oleh server, setelah respon selesai di kirimkan hasil respon di tampung kedalam variabel bernama response, proses menampung data respon ini mengunakan sintaks berikut : var response = oRequest.responseText; Dan selanjutnya data hasil respon di tampilkan pada div dengan nama “divcontent” yang telah di persiapkan sebelumnya, untuk menampilkan hasil respon ini mengunakan bantuan DOM (document object model) berikut : document.getElementById("divContent").innerHTML = response; Sampai disini baru terlihat pemanfaatan Javascript dalam mengunakan object XMLHttpRequest saja, data yang di berikan oleh server masih berupa file content statis dan belum memanfaatkan XML data respon.

Latihan 1 (Membuat halaman web dengan AJAX) 1. Membuat halaman utama <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript">
//If we are using Internet Explorer. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); alert ("Anda Menggunakan Browser Microsoft Internet Explorer."); } catch (E) { //Else we must be using a non-IE browser. xmlhttp = false; } } //If we are using a non-IE browser, create a javascript instance of the object. if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); alert ("Anda Tidak Menggunakan Browser Microsoft Internet Explorer."); } function makerequest(serverPage, objID) { var obj = document.getElementById(objID); xmlhttp.open("GET", serverPage); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { obj.innerHTML = xmlhttp.responseText; } } xmlhttp.send(null); } //--> 2. Membuat halam pertama

3. Membuat halam kedua 4. Membuat halam ketiga

5. Membuat halam keempat