6/16/2010

Tutorial singkat AJAX untuk mempercepat akses situs

Apakah AJAX itu ?. AJAX merupakan teknologi yang menggabungkan engine _javascript dan XML. Jadi, teknik AJAX sangat berguna bagi anda yang suka meng-update isi berita mengunakan XML. Peng-update-an dilakukan secara real-time atau ditentukan dalam selang waktu tertentu. File apa sih yang diupdate ?? terserah ?? ntah itu format html biasa, txt, js, vbs, rss, yang penting bisa dibaca via-http. Jadi, nggak harus XML.
Bingung ?? Yeah, aku juga pertama kali kenal AJAX rada2 bingung, tapi k’lo udah ngeliat contoh ini pasti kamu ngerti deh.

Pertama-tama kita tambahkan script ini sebagai _javascript.

function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == “Microsoft Internet Explorer”){
ro = new ActiveXObject(“Microsoft.XMLHTTP”);
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq(param) {
http.open('get','file_proses.php?'+param);
http.onfiltered=handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
alert(response)
}
}

Baiklah aku akan jelaskan maksud dan fungsi-fungsi itu satu persatu :).
Fungsi createRequestObject() digunakan untuk memanggil object / activeX yang mendukung kelangsungan teknik AJAX ini. Disana terlihat diciptakan objectnya dengan variabel penampungnya adalah http. Lalu, ada fungsi sndReq(param) dengan tambahan input kepada fungsi ini yaitu param. Param artinya parameter yang nantinya digunakan oleh halaman proses sebagai input yang akan diolah untuk menghasilkan output yang kamu inginkan. Terlihat pada fungsi ini, file prosesnya bernama file_proses.php. Untuk parameter standar untuk semua http digunakan aturan arg1=val1&arg2=val2...&arg N=valN, dimana tiap-tiap argN dibaca sebagai variabel nantinya oleh web server yang memiliki nilai valN. Nah, setelah proses selesai kita ingin melihat hasil prosesnya.
Untuk itu kita panggil fungsi peng-handel proses yang terjadi yaitu handleResponse().
Pada fungsi ini setiap status proses yang terjadi akan selalu diberitahukan kepada
browser. Hingga kamu lihat ketika readyState = 4 maka proses selesai output siap
ditampung. Terlihat variabel response menampung hasil outputnya. Output ini terserah
mau kamu apakan. Dalam contoh diatas terlihat bahwa scriptnya menampilkan otuput
dalam bentuk popup message. Oke biar tambah pinter cobain aja contoh berikut :













Simpan kedua file pada lokasi yang sama. Oh, ya sampai lupa file kedua merupakan file PHP lho... maklum aku cuma bisa PHP kawan. Lagian untuk ngormatin Bapak Rasmus. Trus..trus apa hubungannya dengan mempercepat situs ?? Pertanyaan bagus kawan...
Disana terlihat jelas bahwa output yang dikeluarkan berupa teks. So, gambar, flash, atau apalah itu... tidak diambil jadi, tentunya mempercepat akses situs. Gini, aja... masa kita hanya untuk menghitung 1 + 1 = 2 harus me-load ulang halaman ??, nggak mau lagi!!!.
Kita dipaksa nge-load gambar, activex, bla..bla..bla hanya untuk menghasilkan nilai 2!!.
Udah yach semoga sukses. K’lo dikembangin bisa buat yang aneh2 deh. Termasuk untuk ngisengin temen2.

0 komentar: