Teknologi 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 request method yang ada, tetapi yang paling sering digunakan adalah GET dan 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 Properties

XMLHttpRequest memiliki properti yang dapat digunakan dan dimanipulasi, seperti dijelaskan di bawah.

1. onreadystatechange
   Properti ini adalah sebuah event handler yang memberikan anda untuk men-trigger sebuah blok kode atau function, ketika state (sampai dimana proses request berlangsung pada waktu tertentu) berubah. Contoh, misalnya anda ingin menampilkan pesan (alert) pada saat state telah berubah menjadi complete state.
2. readyState
   berisi informasi state dari object XMLHttpRequest pada saat properti ini digunakan (0: uninitialized, 1: loading,
   2: loaded, 3: interactive, 4: complete). Properti ini bisa digunakan untuk menangani kesalahan, memanggil blok kode atau function untuk setiap readyState. Misalnya, untuk menampilkan text "loading" pada saat readyState sama dengan 1 (fase loading) dan memanggil sebuah function pada saat readyState=4 (complete).
3. responseText
   Properti ini akan dihasilkan pada saat request telah berhasil/complete. Misalnya anda melakukan request terhadap sebuah document di server, respon dari server akan disimpan pada properti ini. Biasanya properti ini digunakan untuk mengganti properti innerHTML dari sebuah element HTML.
4. responseXML
   Properti ini sama dengan responseText, tetapi respon yang dihasilkan dalam format XML.
5. status
   Properti ini memberitahukan response code yang dihasilkan dari direquest yang dilakukan. Misalkan, jika file yang direquest ke server tidak ditemukan maka status akan berisi 404.
6. statusText
   Properti ini merupakan textual dari properti status, misal status sama dengan 404 maka statusText akan sama dengan Not Found.

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 method open(). 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.

Semoga Bermanfaat