AJAX with Pure JS

Share More

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.

Share this Post More

10 Responses to “AJAX with Pure JS”

  1. Chen Hendrawan Says:

    Contohnya nangguuungg πŸ™
    Kasih contoh nampilin teks kek, atau combo box bertingkat. Udah males nulisnya ya :p

  2. kocu Says:

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

  3. ashto Says:

    belum mudeng saya.. kasih contoh yang simple aja hat.. πŸ˜‰

  4. kocu Says:

    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 (^_^)

  5. eryco Says:

    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…

  6. kocu Says:

    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Ò€ℒ)

  7. zeri indra karisma Says:

    Hei teman-teman boleh minta tolong gak ! dikit aja….
    kasih tau tentang ajax dong !
    maklum baru 1 hari belajar….
    boleh dechh… kirim ke email….

  8. kocu Says:

    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

  9. Indra Says:

    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..

  10. kocu Says:

    alow Mas Indra, setau saya masih bisa ko πŸ™‚

Leave a Reply