Ajax = Asyncronous Javascript and XML

pemprograman web makin canggih aja. Terutama Ajax, sebenernya barang ni dah lama, AJAX = Asyncronous Javascript and XML. Sebenernya AJAX bukan bahasa pemprograman tapi satu metode / teknik yg lebih baik dan juga bisa membantu perfomance web biar terlihat lebih interaktif… wah, keren gak tuh.Hehe..

Lewat teknik AJAX skrip / code javascript bisa langsung connect sama Server, padahal kita tahu kalo javascript sifatnya Client-side, biasanya javascript ngegunain objek XMLHttpRequest, gara -gara objek ini skrip javascript bisa request data(HTTP Request) ke Web Server tanpa harus menekan tombol submit, tanpa me-reload page berulang-ulang.

Beberapa browser menggunakan metode yang berbeda – beda untuk membuat Objek XMLHttpRequest. Internet Explorer biasanya menggunakan ActiveXObject, sedangkan Firefox, Opera, Safari, etc pake objek XMLHttpRequest. Atau saya sudah menuliskan javascript function’nya dibawah ini

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;  try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)    {
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)      {
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Browsernya tidak mensupport AJAX!! coba update browsernya dengan yang terbaru..");
return false;
}
}
}
}

Sebelum benar – benar mencoba untuk mengirim / menerima data dari Web server, lewat metode AJAX. Ada yang harus dan perlu di ketahui yaitu mengenai status respon dari server itu sendiri, yaitu properti onreadystatechange dan readyState yang tidak lain bawaan objek XMLHttpRequest.Berikut adalah beberapa kemungkinan nilai readyState

State Keterangan

0 request belum di inisialisasikan

1 request belum di set

2 request sudah di kirim

3 request sedang di proses

4 request sudah selesai (complete)

Berikut adalah skrip yang berfungsi merubah text field di form apabila readyState-nya bernilai complete

xmlHttp.onreadystatechange=function()
 {
if(xmlHttp.readyState==4)
{  document.myForm.IsianTextField.value=xmlHttp.responseText; //isi textfield berubah kalo statenya complete
  }
}

Sekarang kita mencoba mengirim data lewat properti / method Open dan Send. Open parameter pertamanya adalah metode action nya apakah menggunakan POST / GET. Parameter kedua adalah path / query nya. Sedangkan yang ketiga bersifat Boolean tentang mengunakan Asyncronous Http Request.

xmlHttp.Open(“GET”,proses.php.true);
xmlHttp.Send(null);
</script>

Skrip diatas adalah salah satu file javascript yang disimpan di header HTML. Kemudian biasanya dipanggil fungsinya oleh tag input dari form seperti OnClick / OnChange / OnBlur / OnKeyUp Contoh :

<form name="myForm">
Name: <input type="text" onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>

Demikian mudahnya kan membuat web biar lebih menarik dan interaktif tanpa harus mereload page berulang – ulang… Hehe..