Kali ini gw mau share pengalaman gw menggunakan AJAX. Sejujurnya gw bukan expertise ajax ataupun Javascript, gw cuma pernah aplikasiin ajax dalam beberapa proyek gw. Buat yg blom tau AJAX itu singkatan dari Asynchronous Javascript And XML. Kegunaan utamanya ialah meningkatkan interaktivitas sebuah halaman, dengan melakukan transfer data sekecil mungkin antara browser dan web server di belakang layar (tanpa terasa oleh user). Mungkin lebih mudahnya biasa disebut tanpa refresh (load kembali halaman).

AJAX CompareMerefresh halaman tentu saja akan meload kembali seluruh isi halaman tersebut dari server ke client. Hal itu tentu saja akan memakan bandwith yang lebih besar dibandingkan bila kita bisa meload hanya data baru yang diperlukan. Banyak Web Developer yang sudah pernah melakukan hal yang hampir sama menggunakan Frame/iFrame. Dengan iframe kita bisa meload sebagian kecil halaman web kita tanpa harus meload kembali seluruhnya. Kegunaannya memang hampir sama, hanya saja cara yang digunakan berbeda.

Dalam eksplorasi gw sendiri terhadap ajax, gw menemukan banyak kesulitan mencari jawaban dengan contoh yang jelas. Karena banyak solusi ajax sudah menjadi suatu framework yang di embed ke Server Side Scripting. Tentu saja itu membuat javascript yang ialah kunci utama justru tidak terlihat jelas. Setelah gw temukan solusi yang masih pure javascript, gw mulai coba-coba utak atik dari yang paling sederhana. Inti dari Javascript itu sendiri ialah pemanfaatan Object XMLHttpRequest. Berikut Fungsi Utama yang sederhana tapi cukup powerfull (gw slalu pake ini dan work fine di IE dan FF).

function GetXmlHttpObject(handler)  { 
  var objXmlHttp=null;
  if (navigator.userAgent.indexOf("Opera")>=0) {
    alert("This example doesn't work in Opera");
    return;
  }
  if (navigator.userAgent.indexOf("MSIE")>=0) { 
    var strName="Msxml2.XMLHTTP"
    if (navigator.appVersion.indexOf("MSIE 5.5")>=0) strName="Microsoft.XMLHTTP"; 
    try { 
      objXmlHttp=new ActiveXObject(strName);
      objXmlHttp.onreadystatechange=handler; 
      return objXmlHttp;
    } catch(e) {
      alert("Error. Scripting for ActiveX might be disabled");
      return;
    }
  }
  if (navigator.userAgent.indexOf("Mozilla")>=0) {
    objXmlHttp=new XMLHttpRequest();
    objXmlHttp.onload=handler;
    objXmlHttp.onerror=handler;
    return objXmlHttp;
  }
}

Function diatas yang akan mengatur komunikasi dengan server. Setelah itu ada 2 function lagi yang perlu kita siapkan, yaitu function untuk memanggil function tersebut, dan satu lagi ialah function yang akan dijalankan setelah hasil didapat dari server. Berikut contoh sederhana kedua function:

function loadServer(url) {
  xmlHttp=GetXmlHttpObject(loadServerDone);
  xmlHttp.open("GET", url , true);
  xmlHttp.send(null);
}
  
function loadServerDone() {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    if (xmlHttp.status == 200) {
      var response = self.xmlHttp.responseXML;
      //response will filled with what your server return
      //do what you want after load server done below
    } else {
      alert("Server Failed!");
    }
  }
}

Parameter url pada function loadServer ialah file yang akan kita akses di server, bisa berupa file php atau scripting server side apapun. Nanti hasil file tersebut akan diterima oleh variable response di function loadServerDone. Gw bukan orang yg mahir berteori. Gw biasa belajar dengan metode trial n error :p Jadi gw rasa cuma bisa share segini ya, selebihnya silahkan dicoba-coba sendiri deh. Step terakhir tinggal buat link atau button untuk memanggil function loadServer. Mudah2an cukup membantu.

One thought on “AJAX with Pure JS

  1. hehe… abis udah kepanjangan kayanya πŸ˜€
    ini juga udah 1 mingguan nongkrong di draft gw karna gak selesai2 mo di publish πŸ˜€

  2. Gini,
    – lu kopi tuh 3 fungsi di atas ke file index.php (jangan lupa tag scriptnya ya)
    – bikin satu lagi file test.php isi aja
    ========================================
    echo "Hello Mama!";
    ========================================

    Trus di index.php:
    1. bikin satu button dengan onclick=”loadServer(‘test.php’)”
    2. bikin satu textbox dengan id=”hasil”
    3. tambahin di loadServerDone setelah //do what you want…
    ========================================
    document.getElementById("hasil").text = response;
    ========================================

    gimana? bisa gak? setelah itu tinggal dicoba2 yg laen deh (^_^)

  3. thanks nih blog nya cukup membantu.. :p
    saya mau tanya, kalo misalnya saya mau kirim parameter ke halaman .php yang mau saya load, gmana ya?

    thanks…

  4. eryco: allow, syukurlah kalau ada yg merasa terbantu. cara paling gampang sih pake querystring aja. Jadi di file php yg dipanggil tinggal tambahkan querystring yang kita inginkan. jadi manggilnya nanti kira2 jadi begini: loadServer(Ò€ℒtest.php?data1=test&data2=kirimÒ€ℒ)

  5. alow zeri! trims udah mampir. tapi sori, gw sih ga punya bahan yang bisa di email, soalnya gw biasa search2 aja di google terus baca di tempat πŸ˜› jadi ga ada yg gw simpen (^_^) tapi mudah2an posting ini cukup membantu

  6. Mas, mau nanya nih..
    Klo pingin bisa back ke halaman sebelumnya itu gmn caranya klo pake ajax.

    Soalnya pake javascript:history.go(-1) udah gak bisa uy,,,

    Ma kasih..

Leave a Reply

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