Rabu, 10 September 2014

Tutorial singkat AJAX untuk mempercepat akses situs


Saya rasa artikel ini berguna apalagi bagi develop web... selain itu penggunaannya juga mudah bahkan untuk pemula.

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 madsud fungsi-fungsi itu satu per satu : ).
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...&argN=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 :

1. Nama File : Test.Html
<HTML>
<HEAD>
<!-- TAMBAHKAN SCRIPT DIATAS DISINI -->
<SCRIPT>...</SCRIPT>
</HEAD>
Klik tombol ini, input akan diproses diserver <br>
<INPUT TYPE=”BUTTON” VALUE=” 1 + 1 = ? “ onfiltered=”sndReq(‘nil1=1&nil2=1&opr=+’)”>
</HTML>

2. Nama File : file_proses.php
<?
$nil1=$HTTP_GET_VARS[‘nil1’];
$nil2=$HTTP_GET_VARS[‘nil2’];
$operator=$HTTP_GET_VARS[‘opr’];
echo _eval($nil1.$operator.$nil2);
?>

Simpan kedua file pada lokasi yang sama. Oh, iya 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, ato 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.

0 komentar:

Posting Komentar