AJAX | pengertian ajax dan dasar-dasar ajax

Pengertian AJAX

AJAX adalah singkatan dari Asynchronous JavaScript and XML. Pada dasarnya ajax menggunakan XMLHttpRequest object Javascript untuk membuat request ke server secara asynchronous atau tanpa melakukan refresh halaman website. Yang dibutuhkan agar ajax dapat berjalan adalah javascript harus di enable pada browser yang digunakan. Walaupun javascript merupakan dasar dari Ajax, dimana javascript sangat susah pada implementasi dan maintenance, tetapi Ajax memiliki struktur pemrograman yang lebih mudah untuk dipahami. Anda tinggal membuat object XMLHttpRequest dan memastikan object tersebut terbentuk dengan benar. Kemudian menentukan kemana hasilnya akan ditampilkan atau dikirim.

Ajax dapat digunakan untuk melakukan banyak hal, seperti loading halaman HTML tanpa refresh halaman web, validasi form dan banyak lagi yang bisa dilakukan dengan ajax. Di tutorial ini Ajax akan dipadukan dengan bahasa pemrograman PHP yang sangat powerfull. Ajax bertugas melakukan request ke web server dan PHP yang berada di server akan melakukan apa yang diminta oleh Ajax, mengirim hasilnya ke web browser dan Ajax menampilkannya kepada user. Karena Ajax dibangun dengan javascript maka untuk dapat mengikuti tutorial ini dengan baik anda perlu memiliki dasar-dasar javascript. Selain itu anda juga perlu memiliki dasar-dasar pemrograman PHP. Jika anda belum memiliki dasar-dasar PHP anda dapat memperoleh tutorialnya di website ini. Sedangkan untuk tutorial javascript anda bisa memperolehnya dari berbagai sumber yang ada di internet.

• Konsep HTTP Request dan Response

Untuk mengetahui bagaimana konsep dari Ajax anda perlu mengetahui bagaimana sebuah web browser memproses sebuah request dan menerima sebuah response dari web server. Standar yang digunakan web browser pada saat ini adalah HTTP (HyperText Transfer Protocol). HTTP digunakan oleh web browser untuk mengirim request dari website ke web server dan kemudian menerima response dari web server. HTTP request berkerja seperti email, memberitahukan kapan request dikirim, berisi header yang memberitahu apa yang harus dilakukan server dan bagaimana menghandle request tersebut.
Sekali sebuah request diterima, web server kemudian menentukan response apa yang akan diberikan. Terdapat banyak kode response, tabel dibawah memperlihatkan kode yang umumnya. 

 Terdapat banyak request method yang ada, tetapi yang paling sering digunakan adalah GETdan POST. Sekarang anda telah memiliki bayangan bagaimana request dikirim ke web server dan kemudian web server mengirim response dari request tersebut ke web browser, akan mudah bagi anda untuk memahami bagaimana XMLHttpRequest berkerja. Keduanya sangat mirip, tetapi XMLHttpRequest dioperasikan di belakang layar dan tanpa memerlukan refresh halaman.

  

• XMLHttpRequest Object

Ajax bisa dibilang adalah sebuah konsep untuk menerangkan interaksi antara client-side XMLHttpRequest Object dengan script server-side. Untuk membuat request ke web server menggunakan Ajax, anda harus membentuk Object XMLHttpRequest terlebih dahulu. Untuk membentuk object XMLHttpRequest berbeda pada setiap browser. Pada microsoft internet explorer object dibentuk sebagai ActiveX control, sedang pada browser seperti Firefox dan safari menggunakan basic javascript object.

• XMLHttpRequest Methods

Setelah XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa digunakan. Method-method tersebut dijelaskan di bawah ini.

1. abort()
   Method abort() digunakan untuk menghentikan request yang sedang berjalan. Method ini sangat berguna jika anda memperhitungkan lama waktu koneksi, misalnya jika waktu koneksi melebihi rentang waktu tertentu anda bisa menggunakan method abort() untuk menghentikan request secara prematur.
2. getAllResponseHeader()
   Anda dapat menggunakan method ini untuk memperoleh semua informasi dari semua header HTTP yang sedang diberikan oleh server. Misalnya set sebuah header akan terlihat seperti :
   
   Date: Sun, 13 Nov 2005 22:53:06 GMT
   Server: Apache/2.0.53 (Win32) PHP/5.0.3
   X-Powered-By: PHP/5.0.3
   Content-Length: 527
   Keep-Alive: timeout=15, max=98
   Connection: Keep-Alive
   Content-Type: text/html 
    
3. getResponseHeader("headername")
   Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header, sebagai contoh untuk memperoleh ukuran dari document yang sedang direquest, anda dapat menggunakan getResponseHeader("Content-Length").
4. open ("method","URL","async","username","pswd")
   Method ini merupakan method yang paling penting dan berguna pada XMLHttpRequest. Method ini digunakan untuk membuka koneksi dengan document yang ada di server. Dengan method ini anda memberitahukan kepada web server method apa yang digunakan untuk membuka file ("GET" atau "POST"). Sebagai catatan tidak semua argument pada method ini harus diisi, tergantung dengan situasi dan kebutuhan.
5. setRequestHeader("label","value")Method ini dapat digunakan untuk menentukan header pada saat melakukan request. Sebagai catatan, method ini hanya bisa dipanggil setelah method open digunakan dan sebelum method send dipanggil.
6. send("content")method ini digunakan untuk mengirim request ke server. Jika request dikirim secara asynchronous, maka response akan datang secepatnya. Jika tidak, response akan datang setelah response diterima oleh web browser. Parameter pada method ini tidak harus diisi, parameter ini sangat berguna untuk memproses HTML form dan memberikan anda untuk mengirim nilai dari element form ke web server.

• XMLHttpRequest Methods

Setelah XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa digunakan. Method-method tersebut dijelaskan di bawah ini.

1. abort()
   Method abort() digunakan untuk menghentikan request yang sedang berjalan. Method ini sangat berguna jika anda memperhitungkan lama waktu koneksi, misalnya jika waktu koneksi melebihi rentang waktu tertentu anda bisa menggunakan method abort() untuk menghentikan request secara prematur.
2. getAllResponseHeader()
   Anda dapat menggunakan method ini untuk memperoleh semua informasi dari semua header HTTP yang sedang diberikan oleh server. Misalnya set sebuah header akan terlihat seperti :
   
   Date: Sun, 13 Nov 2005 22:53:06 GMT
   Server: Apache/2.0.53 (Win32) PHP/5.0.3
   X-Powered-By: PHP/5.0.3
   Content-Length: 527
   Keep-Alive: timeout=15, max=98
   Connection: Keep-Alive
   Content-Type: text/html 
    
3. getResponseHeader("headername")
   Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header, sebagai contoh untuk memperoleh ukuran dari document yang sedang direquest, anda dapat menggunakan getResponseHeader("Content-Length").
4. open ("method","URL","async","username","pswd")
   Method ini merupakan method yang paling penting dan berguna pada XMLHttpRequest. Method ini digunakan untuk membuka koneksi dengan document yang ada di server. Dengan method ini anda memberitahukan kepada web server method apa yang digunakan untuk membuka file ("GET" atau "POST"). Sebagai catatan tidak semua argument pada method ini harus diisi, tergantung dengan situasi dan kebutuhan.
5. setRequestHeader("label","value")Method ini dapat digunakan untuk menentukan header pada saat melakukan request. Sebagai catatan, method ini hanya bisa dipanggil setelah method open digunakan dan sebelum method send dipanggil.
6. send("content")method ini digunakan untuk mengirim request ke server. Jika request dikirim secara asynchronous, maka response akan datang secepatnya. Jika tidak, response akan datang setelah response diterima oleh web browser. Parameter pada method ini tidak harus diisi, parameter ini sangat berguna untuk memproses HTML form dan memberikan anda untuk mengirim nilai dari element form ke web server.

Membentuk Object XMLHttpRequest

Untuk membentuk sebuah object XMLHttpRequest anda dapat menggunakan kode berikut ini :

 
function getXMLHttpRequest(){
//jika user menggunak IE
 if(window.ActiveXObject){
     return new ActiveXObject("Microsoft.XMLHTTP"); 
 }else if(window.XMLHttpRequest){
 //user menggunakan browser selain IE
     return new XMLHttpRequest();
 }else {alert("Status : can not create XMLHttpRequest Object");} 
}

Mengirim Request ke Server

Setelah selesai membuat object XMLHttpRequest anda dapat mengirim request ke server. Saat mengirim request ke server anda harus menentukan request method yang digunakan, apakah akan menggunakan GET atau POST. Jika anda ingin menampilkan informasi dari server maka anda akan menggunakan method GET, sedangkan jika anda mengirim informasi ke server maka gunakan method POST. Pada tutorial ini ada akan belajar menggunakan method GET (POST akan dijelaskan pada tutorial selanjunya). Untuk mengirim request ke server menggunakan method GET, anda dapat menggunakan kode di bawah.

var xmlhttp=getXMLHttpRequet();
function sendRequest(pageUrl,elementID){
 var obj=document.getElementById(elementID);
 var obj.innerHTML='loading... please wait'; 
 if(xmlhttp.readyState==4 || xmlhttp.readyState==0){
     xmlhttp.open("GET",pageUrl,true);
     xmlhttp.onreadystatechange=function(){
         if(xmlhttp.readyState==4 && xmlhttp.status==200){
             obj.innerHTML=xmlhttp.responseText;
         } 
     }
 xmlhttp.send(null); 
 } 
}

function di atas mengambil parameter HTML element ID dan URL dari file yang ada di server. Pertama yang dilakukan adalah mengganti properti innerHTML dari HTML element, untuk menampilkan text "loading...please wait". Kemudian membuka koneksi ke server dengan methodopen(). Jika properti readyState sama dengan 4 (complete) dan status sama dengan 200 (OK) maka tampilkan response dari server dengan mengganti properti innerHTML dari element HTML dengan properti responseText dari object XMLHttpRequest.