Writen by Funkshit

Akhirnya blog saya yang jelek ini terjamah juga oleh sebuah teknologi bernama ajax . Awal mulanya sih cuman iseng2 aja nyobain script2 yang dapet dari internet. Nah secara cuman iseng.. jadi ngga bisa2 n ngga ngerti2. Kemudian seorang temen bernama yudist berkata seperti ini "manusia akan keluar kemampuan sesungguhnya di saat dia berada dalam keadaan terdesak. jadi cari kerjaan yg pake ajax". nah, jadi kepikiran pasang di blog deh .. . .

Jadi .. apakah ajax itu. nich sepengetahuan saya aja. Ajax adalah teknik yang digunakan untuk membuat web yang interaktif. Jadi aplikasi web dapat melayani request data kemudian memproses nya di server tanpa harus pindah halaman atau reload.

ajax itu adalah kependekan dari Asynchronous JavaScript and XML. web yang menerapkan teknologi ajax akan memakai file javascript yang menggunakan API XMLHttpRequest untuk transfer data antara client dan server. data yang ditransfer bisa berupa text,xml, html atau json(json itu apa saya ngga ngerti ).

script paling sederhana untuk penerapan ajax kaya gini nich . . example nya klik disini sedangkan untuk source kodenya disini

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

itu fungsi untuk membuat objek baru, untuk IE menggunakan perintah new ActiveXObject("Microsoft.XMLHTTP") . sedangkan opera, mozila sama safari menggunakan new XMLHttpRequest().

file Html nya yang ditampilkan di halaman web kira2 sederhananya seperti ini

<div id=load> </div><br>
<input type=text id=nama name=nama value="">
<input type=button value=klik onclick="proses(Funkshit)">
<div id=handler_element>kiriman dari server tampil disini</div>

nah ceritanya gini nich.. si button itu di klik dan menjalankan fungsi javascript proses() dengan parameter yang berisi value dari element dengan id "nama". function proses() terdiri dari beberapa perintah ini :

function proses(nama)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}

var post="post_name="+nama;
var url="ajax.php";
url=url+"?get_name="+nama+"&sid="+Math.random();

xmlHttp.onreadystatechange=loading;
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(post);
}

xmlHttp.open("POST",url,true);
perintah ini untuk membuka koneksi ke url yang didefinisikan di variable "url" yaitu ajax.php beserta parameternya, dengan menggunakan method POST. parameter ketiga yaitu "true" artinya request akan di tangani secara asynchronus, yaitu script akan diproses sampe method send(), tanpa menunggu respon dari server terlebih dahulu. untuk menggunakan method GET, tinggal ganti parameter "POST" dengan "GET". variable sid yang value nya adalah nilai Math.Random() dimaksudkan agar File handler yang dituju benar2 melakukan rekuest keserver, bukan ke cache.

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
script ini untuk menambahkan http header. perintah diatas dibutuhkn jika akan mengirimkan data dengan method POST

xmlHttp.send(post);
script untuk mengirimkan request. variable post berisi variable2 post yang ingin dikirim. untuk method get, diisi null aja.

nah di function proses itu ada perintah xmlHttp.onreadystatechange=loading;. itu maksudnya saat keadaan berubah (state changes) dia akan memanggil fungsi loading().function loading nya sepeti ini

function loading()
{
if (xmlHttp.readyState==2){
document.getElementById("load").innerHTML="Loading...";
}
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("handler_element").innerHTML=xmlHttp.responseText ;
document.getElementById("load").innerHTML="";
}
}

keadaan ato state itu ada beberapa.. yaitu :
0 = uninitialized
1 = open
2 = sent
3 = receiving
4 = loaded

di fungsi loading() itu ceritanya untuk menganalisa keadaan yang sedang terjadi. saat state nya adalah 2 (data terkirim), div dengan id "load" akan menampilkan tulisan "loading". nah ketika state nya adalah 4 (selesai diproses), div dengan id "handler_element" akan menampilkn hasil response dari pengaksesan file_handler.php
php file handlernya yang paling sederhana adalah menampilkan variable GET ama POST nya aaja

<?
print_r($_GET);
echo "<br>";
print_r($_POST);
?>

done. Rikuwes sudah terkirim dan mengembalikan response berupa array dari variable POST dan GET nya PHP, tanpa perlu me load halaman php nya di browser.

Nah Teknologi ajax ini saya pasang di bagian guestbook nya. semoga ada waktu dan ada kemampuan untuk ngembangin lagi deh . CMIIW yach

referensi : Wiki

---

Artikel Terkait
| Install Xampp Tidak selalu lancar ternyata |

 

Nama
Email
Website

B | I | U | S | Quote