Ajax PHP : Dasar Pemahaman Ajax yang Harus Diketahui Para Pemula

Posted on

Istilah AJAX technology belakangan ini sering terdengar pada pengembangan program web, dan telah banyak digunakan oleh para Web Developer. Diantara situs yang sangat terkenal yang telah menggunakan ajax yaitu Facebook, terutama di fasilitas chatingnya. berikut sedikit ilustrasi mengenai AJAX dan cara memanfaatkannya pada pengembangan web.

AJAX
 pertama-tama kali di perkenalkan oleh Jesse James Garrett di tulisannya yang berjudul AJAX: A New Approach To Web Applications.

AJAX
 bukan adalah bahasa pemrograman baru, namun hanya sebuah tehnik pemanfaatan Javascript pada memenej class object XMLHttpRequest bagi me-Refresh / mengupdate content pada halaman web tanpa melakuan Reload keseluruhan halaman web seperti di Metoede Tradisional, AJAX sendiri adalah singkatan dari “Asynchronous JavaScript And XML”.

Kelebihan utama AJAX sendiri terletak di pemanfaatan class object XMLHttpRequest bagi berkomunikasi dengan Web Server pada mengerjakan request content, berikut pengunaan Javascript pada merancang class object XMLHttpRequest :

Bagi merancang class object di browser Firefox, Safari, IE7, Mozila, dsb.

oAJAX = new XMLHttpRequest();

Bagi merancang class object di browser IE versi terbaru.

oAJAX= new ActiveXObject(‘MSXML2.XMLHTTP’);

Bagi merancang class object di browser IE versi lama.

oAJAX = new ActiveXObject(‘Microsoft.XMLHTTP’);

Bagi dapat berjalan di seluruh browser (Cross Browser), kita dapat mengabungkan kesemua script tersebut kedalam sebuah function pembuat class object XMLHttpRequest seperti berikut :

function createRequest()
{var oAJAX = false;
/*@cc_on @*/ /*@if (@_jscript_version >= 5) try { oAJAX = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) { try { oAJAX = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e2) { oAJAX = false;
} } @end @*/
if (!oAJAX && typeof XMLHttpRequest != ‘undefined’) { oAJAX = new XMLHttpRequest();
} if (!oAJAX){ alert(“Error dikala merancang XMLHttpRequest!”);
}else{ alert(“XMLHttpRequest sukses dikerjakan!”);
} return oAJAX;
}

Mula-mula function diatas akan mencoba merancang class object XMLHttpRequest dengan sintaks IE versi terbaru, kalau gagal karenanya akan di coba mengunakan sintaks di IE versi sebelumnya kalau masih gagal karenanya akan di coba mengunakan sintaks penyusunan di browser Mozila, Firefox dsb.

Dengan pengabungan diatas di pastikan class object XMLHttpRequest akan terbentuk dan function akan mengembalikan class object yang telah berhasil dikerjakan (kecuali ada ada browser baru.

Setelah object XMLHttpRequest terbentuk berikutnya kita dapa menanfaatkan object tersebut bagi berkomunikasi dengan server, berikut contoh pemanfaatan class object XMLHttpRequest bagi meminta content data dari server.

Bagi merequest data dari server di contoh berikut di gunakan function requestContent yang akan di panggil dikala sebuah link di click, detail script function yang digunakan seperti berikut :

function requestContent()
{ oRequest = createRequest();
var url = “dataLoad.html”;// Buka komunikasi dengan server
oRequest.open(“GET”, url, true);// menunggu respon dari server
ID=”divContent” oRequest.onreadystatechange = function ()
{ document.getElementById(“divContent”).innerHTML=”
Menunggu Respon server”;
if (oRequest.readyState == 4)
{
var response = oRequest.responseText;
document.getElementById(“divContent”).innerHTML = response;
} }
oRequest.send(null); }

Function diatas pertama-tama kali akan merancang class object XMLHttpRequest dengan memanfaatkan function createRequest() yang terdapat sebelumnya, hasil penyusunan object akan di tampung kedalam variabel object oRequest.
setelah object XMLHttpRequest terbentuk, berikut akan dilakukan komunikasi dengan request dengan server bagi meminta data dari file dataLoad.html dengan GET method.
Sintaks open request selaku berikut :

oXML.open(, , );

  • methode : POST atau GET
  • url_file : lokasi URL file yang akan di request
  • async_status : TRUE atau FALSE

catatan Asynchronous status:

  • Status TRUE :
    Javascript akan melanjutkan proses secara normal sementara menunggu respon dari server diterima
  • Status FALSE:
    akan menunggu hingga respon dari server, dalam rentang waktu respon belum di dapat proses yang terdapat berikutnya akan di hold hingga respon dari server di terima.

Setelah mengerjakan request kepada server function akan menunggu respon dari server

oRequest.onreadystatechange

dalam rentang waktu menggu respon dari server, bagian script berikut pd function akan dijalankan

document.getElementById(“divContent”).innerHTML=”Menunggu Respon server”;
if (oRequest.readyState == 4) { // baca data respon dari server
var response = oRequest.responseText;
document.getElementById(“divContent”).innerHTML = response;
}
}


ReadyState status:

0: uninitialized = Open status belum dijalankan
1: loading = Status request belum di jalankan
2: loaded = Status request telah di kirimkan, dan menunggu respon dari server.
3: interactive = Respon dari server sedang pada proses unduh.
4: completed = Respon data dari server telah selesai di unduh.

Function akan menunggu hingga status respon dari server oRequest.readyState == 4, nilai 4 tersebut berarti respon telah selesai diberikan oleh server, setelah respon selesai di kirimkan hasil respon di tampung kedalam variabel bernama response, proses menampung data respon ini mengunakan sintaks berikut :

var response = oRequest.responseText;

Dan berikutnya data hasil respon di tampilkan di div dengan nama “divcontent” yang telah di persiapkan sebelumnya, bagi menampilkan hasil respon ini mengunakan bantuan DOM (document object model) berikut :

document.getElementById(“divContent”).innerHTML = response;

Hingga disini baru terlihat pemanfaatan Javascript pada mengunakan object XMLHttpRequest saja, data yang di berikan oleh server masih berupa file content statis dan belum memanfaatkan XML data respon.

Leave a Reply

Your email address will not be published. Required fields are marked *