Ajax, what is it?
Beberapa dari anda mungkin sudah familiar dengan istilah Ajax. Yang pasti bukan Ajax Amsterdam, tapi Asynchronous JavaScript and XML, salah satu teknologi pengembangan web yang memang lagi populer di kalangan web developer.Jika anda salah seorang web developer, tentunya anda tahu dengan baik konsep web yang refresh-based itu... Setiap kali click sesuatu, entah itu link, entah itu button, pasti page-nya bakal pindah atau refresh. Inilah yang ingin dihindari, karena refresh yang terlalu sering jadi tidak enak dipandang mata (karena flicker-effect), lagipula bisa memboroskan bandwidth.
The birth of <frame>
Dulu sempat ada konsep <frame> di html. Intinya, suatu halaman web dipecah jadi beberapa bagian, dan masing-masing bagian itu diproses secara terpisah. Contoh gamblangnya bisa anda lihat di Java API.Konsep <frame> ini tadinya diharapkan bisa menghemat bandwidth dan mengurangi flicker-effect dari suatu web. Tapi ternyata lama-lama konsep ini ditinggalkan. Gw sendiri kurang tahu apa sebabnya, tapi menurut gw sih konsep frame ini menyebabkan komunikasi antar frame jadi sulit.
Nah, Ajax yang belakangan ini populer datang untuk menggantikan frame. Tujuannya kurang lebih sama, tapi implementasinya jauh lebih baik daripada frame.
How does it work?
In a nutshell, Ajax memanfaatkan teknologi JavaScript untuk melakukan request di background, menunggu response secara asynchronous (hence it's name), dan -setelah responsenya datang- menampilkan hasilnya di web tanpa me-refresh halaman.Sebagai catatan, response yang diberikan oleh server adalah dalam format XML, walau sebenarnya bisa juga berbentuk plain-text biasa, seperti pada contoh yang nanti akan gw berikan.
Untuk melakukan implementasi Ajax, anda perlu mengetahui sedikit (sedikit, tidak perlu banyak) tentang Javascript dan XML. Di Javascript, yang penting udah ngerti cara bikin fungsi, looping, yah basic-basicnya ajalah. Kalo XML malah ga perlu belajar menurut gw, cukup mengerti konsepnya saja.
Gw sangat menganjurkan buku Ajax for Dummies, karena penjelasan mengenai Ajax-nya sangat bagus. Selain itu, buku itu juga menjelaskan apa itu Javascript dan XML, jadi bagi yang newbie di kedua teknologi ini ga perlu kuatir.
Example
OK, sekarang gw bakal kasi contoh paling sederhana dari implementasi Ajax.Misalkan kita akan membuat "Hello World" di suatu halaman web. Pertamanya halaman web ini kosong. Terus kita tekan satu tombol, lalu muncul tulisan "Hello World", tapi bukan pake JavaScript doang, tapi melibatkan request ke server, misalnya ke PHP.
Pertama-tama, kita buat file index.html. Ini adalah halaman web yang akan kita akses.
file: index.html
<html>
<head>
<script type="text/javascript" src="ajax.js">
</script>
</head>
<body>
<div id="isi">Bakal muncul di sini...</div>
<input type="button" value="Hello!"
onClick="sayHello()" />
</body>
</html>
Lalu kita siapkan file PHP yang nantinya akan dipanggil oleh si Ajax...
file: hello.php
<?php
echo "Hello World <br>";
echo "Now is: " . date("r", time());
?>
Terakhir, javascript-nya... Nah yang ini kelihatannya agak ribet, tapi anda baca saja commentnya. Yang ini gw kasi dalam bentuk image, supaya ada syntax highlighting-nya. Lagipula server gw tidak mengizinkan tulisan-tulisan berbau X M L H t t p R e q u e s t, ga tau kenapa...
Kalau mau copy-paste, ambil di sini.
file: ajax.js
We're done!
Code-code di atas silakan anda copy-paste untuk dicoba. Jangan lupa untuk meletakkan ketiga file dalam 1 folder yang sama.Selamat mencoba Ajax!
)
