Belajar Ajax, pelajari segala sesuatu tentang Ajax dari mulai dari dasar hingga contoh aplikasi Ajax

Ajax, kita tentu sudah sering mendengar kata-kata tersebut. Apalagi bagi Web Programmer, Ajax sudah menjadi teknologi yang wajib digunakan dalam membuat website moderen. Tapi sebenarnya apa sih Ajax itu? dan dari mana sebenarnya Ajax berasal? Mari kita bahas satu persatu.

Asal mula Ajax

Apa perbedaan antara aplikasi website dan aplikasi desktop pada komputer? Jawabannya hanya satu, aplikasi desktop lebih interaktif dan responsif dibanding aplikasi web. Jika anda pernah melihat aplikasi pada desktop, jika kita mengklik suatu tombol maka reaksi perubahannya akan langsung terlihat pada aplikasi tersebut yang membuat aplikasi desktop sangat interaktif. Tetapi pada website jika kita mengklik suatu tombol/link maka browser akan melakukan refresh pada browser dimana layar browser akan menjadi putih sesaat karena pada saat itu browser sedang meminta/merequest data dari server

Google Suggest merupakan aplikasi web pertama yang menggunakan Ajax. Istilah Ajax sendiri diperkenalkan oleh Jesse James Garrett

Hal itulah yang membuat aplikasi website menjadi kurang interaktif dan responsif dibanding aplikasi desktop. Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi website menjadi lebih interaktif dan responsif seperti aplikasi desktop. Saat ini Ajax sudah menjadi teknologi yang wajib ada bagi website-website moderen (atau istilahnya Web 2.0).

Asal mula Ajax

Ajax merupakan kepanjangan dari Asynchronous JavaScript + XML dan bukan merupakan bahasa pemrograman baru tetapi suatu metode/teknik baru yang menggunakan teknologi yang telah ada. Ajax menggunakan teknologi lama yaitu Javascript yang melakukan request ke server untuk meminta data dalam bentuk Text/XML. Coba anda bandingkan diagram proses suatu website keserver pada website konvensional dan website yang menggunakan Ajax:


Sekarang bandingkan dengan website yang menggunakan Ajax:

Jika anda lihat pada website yang menggunakan Ajax, proses request ke server dilakukan oleh Javascript. Sehingga tampilan pada browser client tidak mengalami perubahan (refresh). Kemudian hasilnya akan dikirim oleh server dalam bentuk Text/XML dan ditampilkan dibrowser client

Bagian mana dari tampilan website yang akan berubah? Ajax menggunakan CSS untuk menentukan bagian mana dari website untuk diisi oleh tampilan baru yang baru saja diambil dari server.

Ajax menggunakan Javascript, jadi jika Javascript pada browser tidak aktif aplikasi Ajax anda tidak berfungsi. Karena itu gunakan aplikasi Ajax sebagai pendukung website anda, maksudnya disini anda membuat website biasa tanpa Ajax, setelah jadi baru anda menambahkan Ajax pada website anda. Jadi jika kemungkinan terburuk terjadi yaitu browser pengunjung tidak mengaktifkan Javascript, maka pengunjung masih dapat menikmati website anda.

Aplikasi Ajax

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 fungsiXMLHttpRequest. dengan XMLHttpRequest suatu halaman web dapat meminta data dari server dan menerima hasilnya tanpa perlu terjadi refresh pada halaman web tersebut. XMLHttpRequest telah disupport oleh IE 5 keatas, Safari 1.2 keatas, Mozilla Firefox keatas dan Opera 8 keatas.

Ajax merupakan penggabungan teknologi-teknologi berikut ini:

• Javascript
• HTML/XHTML
• XML
• CSS

Jadi jika anda belum menguasai salah satu dari teknologi tersebut saya sarankan anda pelajari terlebih dahulu sebelum meneruskan membaca artikel ini. Percaya sama saya, Ajax bukan sesuatu yang mudah untuk dipelajari, anda perlu memahami ke empat teknologi tersebut.

Contoh aplikasi Ajax

Langsung saja akan saya berikan contoh aplikasi Ajax, saya akan berikan contoh dan nanti akan saya jelaskan dibawahnya. Sekarang anda tuliskan kode dibawah ini dan simpan dengan nama coba.html

<html>
<head>
<title>Request file dengan Ajax</title>
<script language = "javascript">
var XMLHttpRequestObject=false;
if (window.XMLHttpRequest) {
  XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getdata(url,divhasil) {
  if (XMLHttpRequestObject) {
    var obj = document.getElementById(divhasil);
    XMLHttpRequestObject.open("GET", url);
    XMLHttpRequestObject.onreadystatechange = function() {
    if (XMLHttpRequestObject.readyState == 4 && 

XMLHttpRequestObject.status == 200) {
      obj.innerHTML = XMLHttpRequestObject.responseText;
    }
    }
  XMLHttpRequestObject.send(null);
  }
}
</script>
</head>
<body>
<h1>Mengambil data dari file HTML</h1>
<form>
<input type="button" value="Tampilkan Data" onclick="getdata

('tampil.html','divhasil')">
</form>
<div id="divhasil">
Isi dari tampil.html akan ditampilkan disini 
</div>
</body>
</html>

Sekarang buat file tampil.html dan isilah dengan kode berikut ini:

Text ini diambil dengan <strong>Ajax</strong>

Lihat hasilnya disini

Jika anda lihat hasilnya, dan anda klik tombol "Tampilkan Data" maka text dibawahnya akan berubah tanpa me refresh halaman, text tersebut diambil dari file tampil.html.

Kita memanggil fungsi getdata pada tombol tersebut serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getdata:
<input type="button" value="Tampilkan Data" onclick="getdata('tampil.html','divhasil')">
Oke sekarang kita perlu membuat object XMLHttpRequest, objek ini wajib dipanggil jika kita ingin menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan kode berikut ini:

var XMLHttpRequestObject=false;
if (window.XMLHttpRequest) {
  XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}

Pertama-tama kita set XMLHttpRequestObject=false ini untuk berjaga-jaga jika sebelumnya XMLHttpRequestObject sudah aktif maka kita non aktifkan lagi. Kemudian baru kita aktifkan lagi dengan membuat objek yang baru XMLHttpRequestObject = new XMLHttpRequest();. Perlu diingat bahwa Internet Explorer menggunakan ActiveX untuk membuat XMLHttpRequest, karena itu kita membuat kode XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");

Oke setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsi function getdata (url,divhasil), yang didalamnya terdapat XMLHttpRequestObject.open ("GET", url); yang berarti kita mengambil url dengan method get. Perlu diingat jika kita menggunakan method get kita perlu mengirimkan sesuatu keserver, karena kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan kode:XMLHttpRequestObject.send(null);

XMLHttpRequestObject.onreadystatechange = function() merupakan sebuah fungsi dimana nanti kita akan memperoleh status dari request yang kita lakukan.XMLHttpRequestObject.readyState memiliki 4 status yaitu:

• 0 Request kita belum dibuat
• 1 Request kita sedang dalam proses (biasanya kita buat loading dengan ini)
• 2 Request kita sudah dikirim tapi hasil belum diterima
• 3 Request kita sedang diproses dikomputer klien
• 4 Request sudah sukses dikirim dan kita sudah sukses menerimanya

Sementara XMLHttpRequestObject.status merupakan status http standard. Jadi jika statusnya 200 berarti file html nya ada dan siap ditampilkan. Sehingga kita perlu mengecek kedua status tersebut dengan kode if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200). Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah obj.innerHTML = XMLHttpRequestObject.responseText. Dimana ini berarti kita menampilkannya diobj, sementara variabel obj telah kita isi dengan divhasil, ini kode ketika kita mengisi objdengan divhasil, var obj = document.getElementById(divhasil).

Dan karena pada kode HTML kita memiliki tag div dengan id="divhasil", maka isi dari tampil.html akan ditampilkan didalam tag div tersebut. Bagaimana mudah bukan? atau malah bingung? Pelajari lagi dan pahami berulang- ulang, karena yang tadi baru dasar dari Ajax.

Jika kita ingin menambahkan loading ketika request sedang berlangsung maka kita perlu menambahkan if lagi untuk mengecek status dariXMLHttpRequestObject.readyState. Ubahlah kode coba.html menjadi:

<html>
<head>
<title>Request file dengan Ajax</title>
<script language = "javascript">
var XMLHttpRequestObject=false;
if (window.XMLHttpRequest) {
  XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getdata(url,divhasil) {
  if (XMLHttpRequestObject) {
    var obj = document.getElementById(divhasil);
    XMLHttpRequestObject.open("GET", url);
    XMLHttpRequestObject.onreadystatechange = function() {
    if (XMLHttpRequestObject.readyState == 1) {
      obj.innerHTML = "Loading";
    }
    if (XMLHttpRequestObject.readyState == 4 && 

XMLHttpRequestObject.status == 200) {
      obj.innerHTML = XMLHttpRequestObject.responseText;
    }
    }
  XMLHttpRequestObject.send(null);
  }
}
</script>
</head>
<body>
<h1>Mengambil data dari file HTML</h1>
<form>
<input type="button" value="Tampilkan Data" onclick="getdata

('tampil.html','divhasil')">
</form>
<div id="divhasil">
Isi dari tampil.html akan ditampilkan disini 
</div>
</body>
</html>

Lihat hasilnya disini

Bagaimana mudah bukan? Jika anda ingin menambilnya dari file php maka anda cukup mengganti tampil.html menjadi file php saja, cukup mudah. Pelajarilah dasarnya sebelum membuat aplikasi yang lebih canggih. Walaupun hanya dasarnya saja anda bisa mengembangkannya hingga menjadi aplikasi yang luar biasa. Perlu diingat karena kita mengambil data dari klien maka kemungkinan website kita untuk diserang menjadi lebih mudah karena kode Javascript kita terlihat dibrowser. Untuk itu berhati-hatilah dengan kode Javascript anda jangan tampilkan informasi rahasia pada kode Javascript anda.

Pada aplikasi web biasa ibaratnya kita memiliki sebuah ruangan dengan pintu besar yang harus kita kunci dan lindungi agar orang tidak masuk melalui pintu tersebut. Pada aplikasi Ajax selain memiliki pintu, ruangan tersebut juga memiliki banyak jendela untuk dimasuki, karena itu kita harus waspada.

Saya pernah punya pengalaman buruk dengan Ajax (sebenarnya itu kesalahan saya, bukan Ajaxnya). Saya membuat sebuah aplikasi Ajax yang menampilkan jumlah pengunjung online di salah satu website saya yang saya hostingkan di Masterwebnet. Anda tentu pernah melihat website yang menampilkan jumlah pengunjung yang online diwebsite itu pada saat itu juga. Nah saya membuat aplikasi seperti itu dengan Ajax, apa kelebihannya? Ketika datang pengunjung ke website saya, maka pada saat itu juga angka jumlah pengunjung online akan bertambah, demikian juga jika ada yang pergi maka angkanya akan berkurang. Semua itu terjadi secara real time, cukup canggih kan. Jadi anda akan melihat angka jumlah pengunjung yang berubah-ubah setiap detik.

Bagaimana cara kerjanya? jika contoh tadi kita mengklik tombol untuk melakukan request ke file html, maka untuk yang ini saya membuatnya otomatis, jadi setiap detik program akan memanggil sebuah file.php.

Semua website saya dan klien-klien saya, saya hostingkan di Masterwebnet. Walaupun kadang- kadang support dan billingnya lama dalam merespon (mungkin terlalu sibuk atau pertanyaan saya yang terlalu aneh) tetapi saya tetap menggunakan jasa Masterwebnet, nggak tau juga kenapa, sepertinya saya sudah terlanjur jatuh hati dengan Masterwebnet. Yang jelas mereka harus menambahkan tenaga Support mereka.

Sampai pada suatu hari, saya mengakses website saya dan ada pesan website saya didisable. Kaget, waktu itu jam 9 malam, saya langsung kontak support hosting saya dan mengatakan kenapa website saya didsabled. Jawabannya sungguh mengejutkan, katanya ada trojan yang menyebabkan satu server ke restart terus (jadi semua website yang satu server dengan web saya, mati semua karena servernya restart terus :) ). Trojan?? bagaimana bisa, kemudian saya mengira ada masalah dengan ajaxnya, kemudian saya ceritakan kepada support bahwa saya memiliki aplikasi Ajax untuk mengetahui jumlah pungunjung online. Dan jawaban dari si support katanya tidak masalah, bukan itu masalahnya.

Tentu saja saya tidak percaya begitu saja, dan saya meminta hosting saya diaktifkan sebentar dan nanti saya akan matikan Ajaxnya untuk melihat apakah semuanya beres. Si support bilang ia perlu menanyakannya dulu ke seniornya, berarti saya lagi apes dapat support junior :)

Setelah beberapa sekitar 10 menitan, web saya aktif kembali. Kemudian saat itu juga saya matikan Ajax saya yang bermasalah. Dan saat itu juga si support bilang trojannya sudah hilang. Saya jawab saja "ya sudah, thanks".

Ajax = Trojan ??? Aplikasi pengunjung online saya memanggil sebuah file php setiap detik, ini membebankan server dan si hosting menganggapnya ini trojan. Sejak saat itu saya hilangkan saja aplikasi pengunjung online tersebut.

Kesimpulan: Berhati-hatilah dalam membuat aplikasi Ajax. Jika anda ingin membuat aplikasi seperti yang saya buat, siapkan server sendiri dengan bandwith yang besar :) jika tidak aplikasi anda malah dianggap trojan oleh perusahaan hosting. Selamat mencoba.

Sumber : http://www.dhimasronggobramantyo.com