Jumaat, 20 Ogos 2010

Contoh Implementasi AJAX

Bahasan mengenai pengenalan Ajax sudah pernah dibahas pada Mengenal Ajax dan JQuery. Pada postingan kali ini saya akan membahas sedikit bagaimana implementasi AJAX pada aplikasi website secara sederhana saja ya??? okee???

Secara garis besar, Ajax digunakan untuk pertukaran data secara diam-diam antara aplikasi web yang disisi client dengan aplikasi web yang berada di sisi server. Namun sebelum proses pertukaran data dilakukan, terlebih dahulu harus dibentuk sebuah objek untuk melakukan pertukaran data tersebut di javascript. Objek tersebut dinamakan XMLHTTPRequest.
Oke, tanpa perlu banyak basa-basi lagi, saya akan memulai memberikan contoh pembuatan pertukaran data. Disini saya menggunakan PHP sebagai bahasa di sisi server. Oleh sebab itu, diharapkan bagi yang mau mencoba ini paling tidak, dikit banyak mesti ngerti PHP ya??? 

Buatlah file ajax.js dengan isi sebagai berikut:


//---------------------------------------------------------------
function buatHTTPReq()
{
  var http;
  if(window.XMLHttpRequest)
  {
    http = new XMLHttpRequest();
  }
 else
 {
    http = new ActiveXObject("Microsoft.XMLHTTP"); 
 }
 return http;
}


//---------------------------------------------------------------
function tukerData(permintaan, idobjek)
{
   var req;
   
   req = buatHTTPReq();
   req.onreadystatechange = function(){
     if(req.readyState==4 && req.status==200)
     {
       document.getElementById(idobjek).innerHTML = req.responseText;
     }
   };
   req.open("GET", permintaan, true);
   req.send();
  
}
//---------------------------------------------------------------


Pada coding diatas, fungsi buatHTTPReq() digunakan untuk membuat objek XMLHTTPRequest, kemudian pada fungsi tukerData() digunakan untuk meminta data ke server dengan metode GET, kemudian hasil permintaan data akan ditampilkan pada idobjek. Setelah dibuat coding diatas, maka buatlah sebuah file proses.php dengan isi contoh sebagai berikut:
<?php
    echo "tulisan ini hasil permintaan dengan ajax";
?>
Setelah membuat proses.php diatas, barulah buat file index.html untuk menguji ajax yang telah dibuat dengan isi sebagai berikut:
<html>

  <head>
    <title> Implementasi Ajax </title>
    <script  type="text/javascript" src="ajax.js"></script>     
  </head>
  <body>
    <div id="hasil_ajax"></div>
    <button onclick="tukerData('proses.php','hasil_ajax')"> Proses 
    </button>
  </body>
</html>
Oke.. silahkan dicoba dengan aktifkan terlebih dahulu server apache agar proses.php nya berjalan dengan baik, dan gunakan file yang index.html untuk mencoba aplikasinya. 
Hasil dari aplikasi tersebut akan menampilkan tulisan "tulisan ini hasil dari permintaan ajax" setelah menekan tombol proses, hal tersebut terjadi karena proses pertukaran data secara diam-diam, yaitu meminta ke proses.php dan ditampilkan pada objek hasil_ajax. Kalo dicoba dengan data yang kecil di komputer lokal tentunya tidak akan terasa banyak dengan proses yang non ajax, namun kalo dibuat dengan data yang diminta besar dan di letakan via internet tentunya akan sangat terasa proses yang terjadi dengan proses yang non ajax. 


Kesimpulan
Dari penerapan AJAX yang telah dilakukan, dapat ditarik beberapa kesimpulan seperti:

  1. Dalam penerapan Ajax diperlukannya objek XMLHttpRequest untuk browser IE7+, Safari, Opera, Chrome, Firefox dan ActiveXObject("Microsoft.XMLHTTP") untuk IE
  2. Objek XMLHTTP merupakan pustaka yang sudah diintegrasikan pada webbrowser yang memiliki kegunaan seperti pertukaran data secara GET / POST
  3. Pada saat terjadinya pertukaran data hanya melakukan proses pada bagian tertentu saja, tidak merubah seluruh halaman penuh, sehingga meningkatkan kecepatan.
  4. Pada objek XMLHttpRequest maupun XMLHTTP memiliki struktur yang hampir sama. Memilki event onreadystatechange yang berguna untuk mengetahui response pertukaran data akan, sedang dan sudah berlangsung.
  5. Memiliki Method open() untuk menentukan cara/metode dan kemana pertukaran data harus terjadi
  6. memiliki Method send() untuk memulai pertukaran data.
  7. Dalam penggunaannya dihalaman HTML, ajax digunakan pada bagian bahasa Javascript
  8. Pertukaran data yang dilakukan dengan menggunakan teknik AJAX ini haruslah dengan file yang berada pada satu server yang sama.



Kemudian lakukanlah jurus utak-atik untuk membuat aplikasi web yang lebih keren lagi. Semoga dapat menjadi referensi yang bermanfaat dalam membangun aplikasi web yang interaktif.

Tiada ulasan: