Asynchronous Javascript And XML (AJAX)

Apalah ajax itu? Ajax merupalan teknologi yang digunakan dalam membuat sebuah website modern dan dinamis.

Pada website tradisional biasa jika kita mengklik suatu link tertentu maka browser akan melakukan refresh dimana document HTML akan di baca dari awal dan layar browser akan loading page merequest data dari web server dan hal itulah yang membuat aplikasi website menjadi kurang interaktif dan responsif. Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi website menjadi lebih interaktif dan responsif serta memiliki kecepatan dalam memproses request ke server.

Ajax merupakan singkatan dari Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dengan adanya Ajax, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisne biasa. Hal ini dikarenakan Ajax tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. Ajax dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll. Manfaat Ajax adalah menghemat penggunaan bandwidth, load halaman lebih cepat, aplikasinya hampir sama seperti aplikasi dekstop. Keunggulan Ajax adalah tanpa reload halaman, karena pertukaran data berada di belakang layar, kemudian kecepatan transfer data antara client ke server lebih ringan karena hanya data saja yang diperlukan. Rata-rata Ajax diaplikasikan dalam website untuk validasi data secara real time, auto complete, kontrol user interface and effect, dan reload data. Perhatikan mekanisme proses Ajax menggunakan PHP berikut ini

Pada mekanisme di atas, proses berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascript tersebut akhirnya akan  ditampilkan di web client sebagai output tanpa harus merefresh halaman web. Bandingkan dengan mekanisme biasa dalam menjalankan PHP seperti yang ditunjukan pada gambar berikut

pada mekanisme biasa, respon yang dihasilkan oleh server berupa HTML yang mengakibatkan halaman web akan merefresh tampilan.  Dilihat dari sisi efisien, hal ini tentu kurang sekali. Sedangkan kekurangan Ajax dibandingkan mekanisme biasa adalah memiliki tingkat kesukaran pemrograman yang lebih tinggi.

Pada aplikasi Javascript konvensional jika kita menginginkan data dari server kita menggunakan form dan memanggilnya dengan method GET atau POST. Sehingga pengunjung perlu mengklik tombol dan kemudian halaman akan kerefresh untuk menampilkan hasil dari request tersebut. Nah, kalau dengan Ajax, Javascript berkomunikasi langsung keserver dengan sebuah fungsi yang disebut XMLHttpRequest.

Dengan XMLHttpRequest suatu halaman web dapat direquest dari server dan diterima hasilnya tanpa perlu terjadi refresh pada halaman web tersebut. Ajax merupakan penggabungan teknologi-teknologi Javascript, HTML,/XHTML, XML, CSS dan Server Side Client.

Pada pembahasan kali ini saya akan memberikan contoh Ajax yang paling sederhana. Untuk memulainya silahkan anda buat sebuah file PHP dan tulisakan kode dibawah ini lalu simpan dengan nama koneksi.php

Sekarang buat file PHP dengan nama index.php yang disimpan dengan folder yang sama dengan file diatas kemudian isilah dengan kode berikut ini :

Stasiun Asal : 
 
 
  ">
 

Stasiun Tujuan : 
 
 
  ">
 
 

Sekarang buat file PHP dengan nama get.php yang disimpan dengan folder yang sama dengan file diatas kemudian isilah dengan kode berikut ini :

";
 echo "";
   
 while($row = mysql_fetch_array($result)){
  echo "";
   echo "";
   echo "";
   echo "";
   echo "";
   echo "";
   echo "";
   echo "";
   echo "";
   echo "";
  echo "";
 }
 echo "

   


   
No
   
ID KA
   
Nama KA
   
Berangkat
   
Tiba
   
Kelas
   
Tarif Dewasa
   
Tarif Anak
   
Tarif Bayi
   
".$row['no']."
".$row['jadwal']."
".$row['nama']."
".$row['berangkat']."
".$row['tiba']."
".$row['kelas']."
".$row['tarifdewasa']."
".$row['tarifanak']."
".$row['tarifbayi']."

"
?>>

Sekarang buat file JavaScript dengan nama select.js yang disimpan dengan folder yang sama dengan file diatas kemudian isilah dengan kode berikut ini :

var xmlHttp

function showJadwal(){
 xmlHttp=GetXmlHttpObject()
 if(xmlHttp==null){
  alert("Browser anda tidak support")
  return
  }

var kotaasal = document.getElementById('kotaasal').value; 
var kotatujuan = document.getElementById('kotatujuan').value; 
var url="get.php"

url = url+"?q="+kotaasal+"&k="+kotatujuan
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged(){
 if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
  document.getElementById("txtHint").innerHTML=xmlHttp.responseText
 }
}

function GetXmlHttpObject(){
 var xmlHttp=null;
 
 try{
  xmlHttp = new XMLHttpRequest();
 }catch(e){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 return xmlHttp;
}

Pada file select.js diset xmlHttp=null tidak aktif, kemudian baru diaktifkan kembali dengan membuat objek yang baru xmlHttp = new XMLHttpRequest(); karena menggunakan ActiveX untuk membuat XMLHttpRequest harus membuat kode xmlHttp = new ActiveXObject(" Microsoft.XMLHTTP"); 

fungsi var kotaasal = document.getElementById('kotaasal').value; digunakan untuk mengambil nilai dari id 'kotaasal' dan var kotatujuan = document.getElementById( 'kotatujuan').value; digunakan untuk mengambil nilai dari id 'kotatujuan' yang ada pada file index.php. var url="get.php" ,url merupakan variabel dari file get.php. Dari kode url = url+ "?q="+kotaasal+"&k="+kotatujuan tampak bahwa url membutuhkan 2 parameter untuk memproses. Parameter pertama adalah 'q' yang diberi nilai variabel kotaasal dan parameter kedua adalah 'k' yang diberi nilai variabel kotatujuan. Kode tersebut untuk melakukan injection pada script get.php.

function showJadwal() didalamnya terdapat  xmlHttp.open("GET",url,true); yang berfungsi mengambil url dengan method get. Dengan menggunakan method get inputan akan dikirimkan ke server, untuk inputan yang bernilai kosong menggunakan kode xmlHttp.send(null).

xmlHttp.onreadystatechange=stateChanged merupakan sebuah fungsi untuk memperoleh status dari request file yang telah dilakukan. xmlHttp.readyState memiliki 4 status yaitu :

0 request belum dibuat

1 request sedang dalam proses

2 request sudah dikirim tapi hasil belum diterima

3 request sedang diproses dikomputer client

4 request sudah sukses dikirim dan sudah sukses diterima

Jika kode if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") sudah bernilai true maka akan menampilakan perintah document.getElementById("txtHint").innerHTML=xmlHttp.responseText, perintah tersebut untuk menampilkan document yang tersimpan pada txtHint.

Fugsi showJadwal digunakan pada tombol serta mengirimkan url yang akan ditampilakan. Kode yang digunakan untuk memanggil fungsi  showJadwal  <button type="submit" value="Cari" onclick="showJadwal(document.getElementById('kotaasal').value, document.getElementById('kotatujuan').value)">Cari</button>

menginputkan data menggunakan combobox

 output

Source code silahkan didownload disini.