Aiska Blog

Suatu Hari temanku bertanya Aiska punya program Ajax ngga. Dan aku pun diam tertegun, Lalu dia bilang lagi kalau Ajax sekarang lagi poluper karena Web kita jadi lebih cepat diakses ngga harus nunggu.

Ternyata tidak sedikit orang yang salah pengertian tentang Ajax. Banyak orang yang beranggapan bahwa Ajax adalah teknologi baru, Software baru yang membuat aplikasi web menjadi lebih cepat. Sebenarnya Ajax bukanlah teknologi, apalagi software baru. Ajax menurut saya adalah konsep baru dari pemrograman yang berbasis web. Dimana pola berpikir dan pola dalam penulisan scripting seorang programmer dirubah. Ajax adalah singkatan dari Asynchronous JavaScript and XML, dimana kita dapat mengoptimalkan dan menggabungkan JavaScript sebagai Server Side Scripting dan XML sebagai tempat penyimpanan data melalui prosedur XMLHttpRequest.

Analoginya seperti ini, anda tau google maps / wikimapia.com disana kita dapat melihat peta seluruh dunia, rumah kita (hanya kota besar). Dalam web tersebut hampir semua halaman menggunakan gambar. Seperti anda ketahui bahwa format gambar lebih lama dimuat ketibang format text karena kapasitasnya lebih besar tentunya. Dan anda bisa membayangkan gimana lamanya loading untuk dapat memuat semua peta tersebut tanpa bantuan Ajax. Yang ada anda hanya dapat melihat halaman putih pada browser anda ketika anda melakukan reload halaman web. Tapi dengan menggunakan Ajax hal tersebut dapat diantisipasi, karena ketika user menggeser peta keatas, kebawah atau kesamping pada google maps JavaScript bekerja untuk melakukan request data ke server namun halaman yang sudah tampil tidak perlu dimuat karena sudah tersimpan dalam XML sehingga user tidak menunggu dan melihat halaman putih yang membosankan sambil menunggu pada browser memuat seluruh halaman.

Jadi dengan melakukan optimalisasi XMLHttpRequest kita dapat memuat hanya sebagian halaman yang kita perlukan saja tanpa harus memuat seluruh halaman. Itulah alasannya kenapa web yang menggunakan Ajax terlihat lebih cepat dimuat.

OK sekarang kita buat scriptnya.

Sebelum anda mulai menulis script ada beberapa hal yang anda harus ketahui. Setiap Browser memiliki fungsi sendiri dalam menginterpretasikan request HTTP. Pada keluarga Internet Explorer yang sering dikenal sebagai ActiveX Object menggunakan XMLHTTP untuk melakukan request sedangkan pada Firefox, Safari, dll menggunakan fungsi XMLHttpRequest, sehingga agar dapat melakukan cross-browser maka diperlukan kode seperti ini

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

Fungsi diatas tidak akan dapat bekerja secara sempurna jika browser tidak mendukung XML mime-type header (beberapa Mozila versi lama) agar dapat bekerja kita dapat melakukan manipulasi dengan melakukan override pada header XML dengan menambahkan kode seperti ini:
httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType('text/xml');

Berikutnya anda harus memutuskan apa yang anda lakukan setelah server menerima request, dengan menggunakan JavaScript kita dapat memanggil fungsi onreadystatechange dan menambahkannya seperti ini:

httpRequest.onreadystatechange = nameOfTheFunction;
Catat: pada variabel nameOfTheFunction tidak ada Kurung tutup dan parameter karena anda hanya menambah referensi ke fungsi yang lain saja. Sebenarnya disini kita dapat menambahkan fungsi JavaScript sehingga dapat diproses saat itu juga, maka scriptnya akan terlihat seperti ini.

httpRequest.onreadystatechange = function(){
// taruh kode anda disini
};

Setelah anda melakukan deklarasi variabel dan telah mendapat respon dari server kita lakukan request data dari server dengan menggunakan fungsi open() dan send() seperti ini:

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);

bersambung...........