AJAX – Asynchronous JavaScript And XML (PART 1)

(Posting ulang, sebelumnya sudah pernah di posting di ruangkecil.or.id)

Istilah AJAX technology belakangan ini sering terdengar dalam pengembangan aplikasi web, berikut sedikit gambaran tentang AJAX dan cara memanfaatkannya dalam pengembangan web.

AJAX pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul AJAX: A New Approach To Web Applications.
AJAX bukan merupakan bahasa pemrograman baru, namun hanya sebuah tehnik pemanfaatan Javascript dalam mengontrol class object XMLHttpRequest untuk me-Refresh / mengupdate content dalam halaman web tanpa melakuan Reload keseluruhan halaman web seperti pada Metoede Tradisional, AJAX sendiri merupakan singkatan dari “Asynchronous JavaScript And XML”.

Kelebihan utama AJAX sendiri terletak pada pemanfaatan class object XMLHttpRequest untuk berkomunikasi dengan Web Server dalam melakukan request content, berikut pengunaan Javascript dalam membuat class object XMLHttpRequest :

Untuk membuat class object pada browser Firefox, Safari, IE7, Mozila, dsb.

oAJAX = new XMLHttpRequest();

Untuk membuat class object pada browser IE versi terbaru.

oAJAX= new ActiveXObject('MSXML2.XMLHTTP');

Untuk membuat class object pada browser IE versi lama.

oAJAX = new ActiveXObject('Microsoft.XMLHTTP');

Untuk dapat berjalan pada semua 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 saat membuat XMLHttpRequest!");
}else{
alert("XMLHttpRequest sukses dibuat!");
}
return oAJAX;
}

Mula-mula function diatas akan mencoba membuat class object XMLHttpRequest dengan sintaks IE versi terbaru, jika gagal maka akan di coba mengunakan sintaks pd IE versi sebelumnya jika masih gagal maka akan di coba mengunakan sintaks pembuatan pada browser Mozila, Firefox dsb.
Dengan pengabungan diatas di pastikan class object XMLHttpRequest akan terbentuk dan function akan mengembalikan class object yang telah berhasil dibuat (kecuali ada ada browser baru :) .

Untuk view example demo click disini

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

Untuk merequest data dari server pada contoh berikut di gunakan function requestContent yang akan di panggil saat 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
// jika sudah di dapat respon dari server, maka hasil respon akan di tampilkan pada DIV dengan ID="divContent"
oRequest.onreadystatechange = function () {
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;
}
}

oRequest.send(null);
}

Function diatas pertama kali akan membuat class object XMLHttpRequest dengan memanfaatkan function createRequest() yang ada sebelumnya, hasil pembuatan object akan di tampung kedalam variabel object oRequest.

setelah object XMLHttpRequest terbentuk, berikut akan dilakukan komunikasi dengan request dengan server untuk meminta data dari file dataLoad.html dengan GET method.

Sintaks open request sebagai berikut :

oXML.open(, , );

catatan Asynchronous status:

Setelah melakukan request kepada server function akan menunggu respon dari server

oRequest.onreadystatechange

selama 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 sudah di kirimkan, dan menunggu respon dari server.
3: interactive –> Respon dari server sedang dalam proses download.
4: completed –> Respon data dari server telah selesai di download.
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 selanjutnya data hasil respon di tampilkan pada div dengan nama “divcontent” yang telah di persiapkan sebelumnya, untuk menampilkan hasil respon ini mengunakan bantuan DOM (document object model) berikut :

document.getElementById("divContent").innerHTML = response;

Untuk view example demo click disini

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

Semua file contoh ini dapat di download disini

March 12, 2008 | Kategori : AJAX, PHP, Programming 

Komentar-komentar

6 Komentar untuk “AJAX – Asynchronous JavaScript And XML (PART 1)”

  1. AJAX - Asynchronous JavaScript And XML (PART 3) : slash.web.id pada March 12th, 2008 5:33 pm

    [...] posting pertama menjelaskan pembuatan class object XMLHttpRequest dan juga pemanfaatannya dalam melakukan [...]

  2. udhien.net - Weblog of Mohammad Syafiuddin » Penjelasan AJAX Bagi Pemula - techvolution (technology evolution) pada March 14th, 2008 11:54 am

    [...] AJAX Bagi Pemula Bagi anda yang ingin belajar AJAX, silahkan lihat  artikel AJAX (Bagian Pertama), AJAX (Bagian Kedua), dan AJAX (Bagian Ketiga) yang diulas dengan bahasa yang mudah dipahami. [...]

  3. stlowbelly pada June 4th, 2008 10:48 am

    saya mulai tertarik dengan ajax, karena sekarang saya sedang mengerjakan tugas akhir dan ada beberapa masalah…dan? mengharuskannya dengan ajax…

    apakah ajax dapat digabungkan dengan database sql server2000 dan pHp? mohon dbls ke email saya terima kasih…stlowbelly_23_10@yahoo.co.id

    Mohon bantuannya…

  4. hendro pada December 16th, 2008 4:52 pm

    gue bingung. cara makenya dimana ya? naroh codingnya dimana? gue php masih pemula. java belum tau banget. susah dong!

  5. neyra pada July 24th, 2009 4:41 pm

    mantabs mas..siip bgt!!thnks

  6. Iqbal pada October 4th, 2009 1:58 pm

    codingnya bisa ditulis pake apa ya?notepad kan kelamaan n rada mikir juga pake apa lg yah??maklum msh awam

Isi Balasan