Berkenalan dengan AJAX

Istilah AJAX Asynchronous JavaScript And XML) dalam pengembangan web menjadi populer pada beberapa tahun belakangan ini. AJAX ini sendiri bukan merupakan bahasa pemrograman baru, AJAX hanya merupakan sebuah teknik pemanfaatan object XMLHttpRequest dengan javascript untuk berkomunikasi dengan server secara Asynchronous,dengan pemanfaatan object XMLHttpRequest ini kita dapat membuat proses berjalan secara background atau bekerja dibelakang layar sementara user dapat tetap berinteraksi dengan halaman web yang ada. Pemanfaatan tehnik Asynchronous ini jugalah yang telah mendorong pengembangan web menjadi lebih kaya atau banyak yang menulisnya dengan istilah pengembangan Rich Internet Application (RIA) atau WEB 2.0.

AJAX pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul AJAX: A New Approach To Web Applications. Jesse James memberi istilah AJAX untuk singkatan dari Asynchronous JavaScript And XML, namun pada perkembangannya data yang dikomunikasikan secara Asynchronous tidaklah harus berupa XML data, kita mengunakan format data lain untuk dikomunikasikan secara Asynchronous dengan server seperti PLAIN TEXT FILE, HTML DATA atau juga berupa SWF data (Flash file).

Sejarah singkat AJAX

Tehnik komunikasi Asynchronous dengan server sendiri pertama kali dikembangkan oleh microsoft pada tahun 1997, kemudian pertama kali XMLHttpRequest Object diperkenalkan pada IE5 (circa 1998) dan kemudian dipergunakan secara luas pada Outlook web access. Jesse James Garrett's kemudian memberikan istilah AJAX untuk tehnik Asynchronous ini pada salah satu tulisannya di tahun 2005. Dan hingga saat ini telah banyak yang mengimplementasikan tehnik ini dalam pengembangan web, sebagai contoh pengunaan AJAX dalam web application bisa dilihat pada beberapa link berikut:
z Google Map
z Flickr.com
z gmail.com
z google sugest
z yahoo.com
dan masih banyak lagi contoh lainnya yang dapat ditemukan pada aplikasi web saat ini.

BERKENALAN DENGAN AJAX

Sebelum membahas panjang lebar tentang scripting dan coding,kita berkenalan dahulu dengan apa yang disebut dengan AJAX, siapa sebenarnya AJAX tersebut dan bagaimana
kelakuannya. AJAX bukan merupakan bahasa pemrograman baru, namun hanya sebuah istilah untuk tehnik pemanfaatan Javascript dalam mengontrol class object XMLHttpRequest untuk berkomunikasi dengan server kemudian merefresh/mengupdate content yang ada dalam halaman web tanpa melakuan Reload keseluruhan halaman web seperti pada metode Tradisional sebelumnya, AJAX sendiri merupakan singkatan dari "Asynchronous JavaScript And XML".

Asynchronous & Synchronous

Bagaimana AJAX bekerja? dan mengapa pemanfaatan AJAX ini membawa istilah baru pada pengembangan web sehingga muncul istilah WEB 2.0? dan ada beberapa istilah lain yang juga dapat ditemukan dengan menanfatan AJAX seperti Rich internet aplication (RIA).

Dari singkatan AJAX sebelumnya ditemukan istilah “Asynchronous”, sekarang kita bahas sedikit dahulu tentang istilah tersebut dalam pengembangan web. Jika ada tehnik Asynchronous maka juga terdapat tehnik Synchronous, apa sih perbedaan kedua tehnik tersebut dalam pengembangan web? Berikut sedikit gambaranya. Agar lebih mudah dipahami saya bahas dengan sedikit gambar berikut untuk proses
SYNCHRONOUS dalam pengembangan web yang telah lama digunakan sebelumnya.

Saat user berinteraksi dengan sebuah halaman web terdapat banyak pilihan link yang dapat ditemukan, dan saat link tersebut di click maka halaman web tersebut akan melakukan komunikasi dengan server melalui internet untuk meminta proses ke server (send Request) Selama server melakukan proses, user akan menunggu hasil proses tersebut.

Setelah server selesai melakukan proses yang diminta maka server akan mengembalikan hasil proses yang akan ditampilkan pada client webbrowser. Dalam proses synchronous ini user melakukan permintaan proses (request process) ke server dan menunggu hingga server mengembalikan hasil proses yang di minta, umumnya hasil proses dari server merupakan sebuah halaman web baru yang ditampilkan pada web browser user.

Pemanfaatan tehnik Asynchronous dengan Javascript ini dalam pengembangan web ini lebih dikenal dengan istilah WEB 2.0 (baca: web two point O). Dengan tehnik proses Asynchronous kita dapat membuat sebuah aplikasi web lebih kaya atau banyak yang menulis dengan istilah Rich internet aplication (RIA), kita dapat membiarkan user untuk tetap berinteraksi dengan halaman web yang ada selama proses request dilakukan dan selama server belum
mengembalikan hasil proses yang diminta. Dan saat hasil proses telah selesai kita hanya perlu mengupdate data halaman web yang telah ada, berikut gambaran dari proses kerja Asynchronous tersebut.

User berinteraksi dengan link‐link yang ada untuk meminta proses ke server, proses yang diminta akan dikirimkan secara background ke server, selama server belum mengembalikan data hasil proses, user dapat tetap bekerja dengan halaman web yang ada sebelumnya. Setelah server selesai melakukan proses, hasil proses tersebut akan dikirmkan kembali kepada web browser, saat data yang dikirimkan server telah diterima oleh webbrowser user maka data tersebut ditampilkan pada halaman web yang telah ada sebelumnya.

Disini terlihat semua proses komunikasi dengan server dilakukan secara background atau mungkin bisa dikatakan semua proses dilakukan Behind the Scene :)


XMLHttpRequest Object
Untuk dapat mengembangkan aplikasi web dengan tehnik AJAX ini kita perlu mengkombinasikan beberapa hal berikut:

z Javascript untuk membuat object XMLHttpRequest yang kita gunakan untuk berkomunikasi dengan server secara behind the scene.

z DOM (Document Object Model), hasil proses yang diterima akan kita tampilkan dengan memanipulasi object DOM yang telah kita persiapkan sebelumnya untuk menampilkan data hasil proses yang diberikan server.
z XML (eXtensible Markup Language) format data yang dikembalikan oleh server, data
XML ini siap dibaca dan ditampilkan untuk mengupdate content pada halaman web.
secara sederhana kita akan memanfaatkan beberapa kombinasi diatas untuk membuat aplikasi web dengan tehnik AJAX ini, namun kita masih dapat mengembangkannya lebih lanjut setelah mengetahui proses kerja dari tehnik AJAX ini.

Kelebihan utama AJAX sendiri terletak pada pemanfaatan class object XMLHttpRequest untuk berkomunikasi dengan Web Server secara background dalam melakukan request. Saat ini terdapat banyak aplikasi web browser, dan yang agak sedikit menyebalkan adalah karena masing‐masing browser mempunyai standart dan cara berbeda untuk membuat object XMLHttpRequest ini.

Untuk dapat berjalan dengan baik pada semua browser kita perlu menyiapkan beberapa kondisi untuk mendeteksi web browser yang digunakan oleh user, dan kemudian membuat object XMLHttpRequest tersebut sesuai web browser yang digunakan.



Bahan bacaan

a) AJAX: A New Approch To Web Applications http://www.adaptivepath.com/publications/essays/archives/000385.php
b) Mathew Ernisse: Build your own AJAX web application http://www.sitepoint.com/launch/53fc13


Referensi
a) www.w3c.org
b) Marini, Joe (2005): Developing AJAX aplication
c) Morgan, Kaufman (2007): Unleashing WEB 2.0, from concept to creativity
d) Babin, Leen (2007): Beginning Ajax with PHP: From Novice to Professional




OPEN SOURCE AJAX FRAMEWORK
a) Dojo : www.dojotoolkit.com
b) Yahoo User Interface : http://developer.yahoo.com/yui/
c) Adobe spry : http://labs.adobe.com/technologies/spry/
d) Mochikit : http://www.mochikit.com
e) Qooxdoo.org : http://qooxdoo.org/ Read More..