Apakah Ajax?
Bagi Anda yang sering berselancar pada dunia maya dan terbiasa mengakses berbagai website, tentunya dapat menjelaskan “keterbatasan” sebuah website yang sering
ditemui, dibandingkan dengan aplikasi desktop. Sebagai contoh, jika Anda pernah melakukan chatting via web yang menggunakan refresh/reload halaman pada interval waktu tertentu, maka akan terlihat keseluruhan halaman tersebut memanggil ulang data
setiap kali melakukan refresh. Refresh halaman web secara keseluruhan, tentu akan menyebabkan fl icker yang sedikit mengusik mata pengguna. Contoh lain, jika Anda sedang menunggununggu sebuah berita hangat pada sebuah website, Anda mungkin dengan tidak sabar melakukan “update berita” secara manual, dengan menekan tombol F5 (refresh). Sehingga tidak mengherankan jika pengguna web sangat hapal posisi tombol F5 tersebut. Jika Anda menganggap kasus-kasus di atas sebagai sebuah penderitaan bagi Anda sebagai pengguna website yang setia, maka Ajax akan meringankan penderitaan tersebut. Apakah sesungguhnya Ajax itu? Ajax merupakan singkatan dari “Asynchronous JavaScript and XML”, sebuah teknik dalam mengembangkan aplikasi web yang interaktif. Ajax sendiri bukan merupakan teknologi
yang baru ditemukan, lebih tepatnya Ajax menggunakan gabungan beberapa teknologi
dan pemrograman yang telah dikenal, seperti HTML, XML, JavaScript, DOM (Document Object Model), dan XMLHttpRequest. Bagaimana cara Ajax bekerja? Tentunya Anda mengetahui, saat sebuah halaman web merespon aksi Anda, maka halaman tersebut harus melakukan pertukaran data dengan server. Hal tersebut yang menyebabkan jeda waktu, dan kurang interaktifnya sebuah halaman website. Ajax mengatasinya dengan melakukan pertukaran data yang kecil dan dilakukan behind the scene, atau di belakang layer sehingga Anda tidak terganggu dengan prosesnya.
Pentingnya Update Halaman Web
Halaman web diperuntukkan untuk memberikan informasi kepada Anda, jika perlu informasi yang diberikan harus yang paling up-to-date. Di sisi lain, client hanya memiliki satu requirement utama, yaitu browser. Tentu saja tidak bijaksana jika sebuah
website yang ingin menyebarkan informasi seluas mungkin, mengharuskan bermacammacam requirement dari sisi client. Karena itu, halaman web pada awalnya
memerlukan refresh keseluruhan halaman untuk meng-update content dan informasinya.
Tetapi bukan zaman teknologi namanya, jika tidak berusaha mencari jalan untuk mengatasi kekurangan tersebut. Teknik pemanggilan halaman web tanpa melakukan reload ulang keseluruhan halaman (disebut dengan istilah asynchronous loading) telah dikenal sejak tahun 1996-1997 dengan tipe elemen IFRAME dan LAYER, yang mungkin pernah Anda gunakan dalam mengembangkan sebuah website. Hal ini merupakan ide awal efek yang diperoleh dengan teknik Ajax, karena kedua elemen tersebut memiliki atribut src yang dapat mengambil link dari alamat URL external, ditambah dengan pemanggilan halaman menggunakan JavaScript yang memanipulasi halaman induk, maka akan didapat efek update halaman tanpa melakukan refresh keseluruhan halaman.
Selanjutnya, menggunakan Java applet, dan client browser berkomunikasi dengan
server dengan menggunakan JavaScript, dapat dihasilkan update data yang lebih baik
lagi (tanpa melakukan refresh keseluruhan halaman). Joko Nurjadi
Mengenal Ajax
Jika ada seorang rekan Anda bertanya, apa bedanya aplikasi desktop dengan aplikasi web? Janganlah sekali-kali menjawab bahwa aplikasi web kurang interaktif kepada pengguna, karena dengan teknik yang bernama Ajax, Anda dapat membangun
halaman web yang interaktif, tidak kalah dengan aplikasi desktop.
Google Suggest yang mengimplementasikan Ajax.
2. Penggunaan Bandwidth.
Dengan menghasilkan HTML secara local di dalam browser, halaman website
dengan menggunakan Ajax dapat tampil relatif lebih cepat, dan menggunakan bandwidth yang lebih sedikit.
3. Pemisahan Data, Format, Style, dan Function.
Dari sisi programming, developer Ajax akan diajak untuk lebih memahami teknologi-teknologi di dalam Ajax, mencakup JavaScript, CSS, DOM, database,
ataupun HTML/DHTML/XML sehingga penggunaan masing-masing teknologi tersebut memiliki fungsi yang jelas untuk menghasilkan website ala Ajax.
Apa yang Diperlukan
Pada dasarnya, Anda hanya membutuhkan requirement sederhana untuk dapat
mengimplementasikan Ajax. Yang Anda perlukan di dalam sistem komputer Anda
adalah sebuah text editor untuk keperluan mengetik program, web browser untuk
menampilkan halaman web, dan sebuah web server, seperti IIS (Internet Information
System) atau Apache Web Server. Ajax menggunakan object XMLHttpRequest yang diperkenalkan sejak dirilisnya Microsoft Internet Explorer 5.0. Karena itu, jika Anda menggunakan web browser Internet Explorer untuk keperluan Ajax, Anda harus menggunakan Internet Explorer 5.0 atau yang lebih baru. Untuk web browser lain yang mendukung Ajax, Anda dapat mempertimbangkan setidaknya browser Safari 1.2, Mozilla Firefox 1.0, Opera 8, atau Netscape 7. Tidak seperti fi le HTML yang dapat Anda
tampilkan dengan langsung memanggil fi le tersebut pada sembarang direktori, Ajax harus dipanggil melalui alamat URL, dan bukan lokasi direktori. Jika Anda bingung membedakannya, http://localhost/test adalah sebuah alamat URL, sedangkan c:\Inetpub\www\test adalah lokasi direktori.
Menulis Ajax
Sekarang kita akan membahas sisi pemrograman Ajax, agar Anda dapat menghasilkan website interaktif seperti yang telah Anda lihat pada contoh. Ajax sendiri bukanlah sebuah bahasa pemrograman yang baru, tetapi lebih merupakan sebuah teknik yang menggunakan standar yang telah ada, khususnya dalam hal ini adalah JavaScript dan HTTP request. Anda perlu mengetahui dasar pemrograman JavaScript untuk memulai Ajax. Di bawah ini adalah contoh sebuah script dari JavaScript: function test()<SPAN style=”mso-spacerun: yes”> </SPAN>{ alert(“halo”); } Script di atas adalah sebuah contoh function JavaScript yang sederhana. Script di atas menghasilkan sebuah kotak pesan “halo” pada browser, di mana script tersebut dapat digabungkan pada fi le HTML Anda, dan dipanggil dengan suatu event. Misalnya event OnClick, OnLoad, dan lain sebagainya. Anda yang telah mengenal HTML dan JavaScript, tentunya telah terbiasa menggunakan event-event pada elemen HTML, dan function-function JavaScript.
Sesuai dengan namanya, Ajax atau “Asynchronous JavaScript and XML”, pertukaran
data antara server dan browser dilakukan secara asynchronous, di mana data yang dikirimkan dapat berupa sebuah plain text ataupun dalam format XML. Mengapa penting untuk mengetahui JavaScript? Karena di dalam JavaScript tersebut, Anda akan memanggil object XMLHttpRequest, yang merupakan object inti dari Ajax. Object XMLHttpRequest inilah yang membangun koneksi antara browser dengan server, dan dilakukan behind the scene untuk men-download data. Object XMLHttpRequest harus diinisiasi terlebih dahulu oleh web browser melalui JavaScript. Di dalam menciptakan object XMLHttpRequest, Anda perlu membedakan web browser yang digunakan, karena
terdapat perbedaan dalam pembuatan object-nya. Web browser yang Anda gunakan dapat
dikategorikan menjadi dua bagian, yaitu browser buatan Microsoft (Internet Explorer)
dan browser yang non-Microsoft, seperti Mozilla Firefox, Opera, Netscape dan lain
sebagainya. Di bawah ini adalah potongan kode Java- Script yang digunakan sebagai salah satu cara untuk melakukan penciptaan Object XMLHttpRequest. Tetapi cikal bakal kelahiran Ajax, tidak lain adalah pada saat dirilisnya Microsoft Internet Explorer 5. Microsoft memperkenalkan object XMLHttpRequest, yang merupakan object inti yang digunakan dalam Ajax. Mungkin Anda penasaran, apa saja sih kemampuan yang ditawarkan Ajax? Dari sisi interface, banyak sekali yang dapat Anda lakukan dengan Ajax. Untuk melihat contoh live, Anda dapat mencari melalui search engine. Beragam website yang menggunakan Ajax. Secara acak, penulis mencari beberapa website yang mendemonstrasikan kemampuan Ajax, satu contoh dapat Anda lihat pada alamat http://www.mathertel.de/AJAXEngine/ S03_AJAXControls/TreeView.aspx, di mana terdapat hierarki data menyerupai Windows Explorer, untuk menunjukkan kotakota
di Amerika Serikat. Contoh lainnya terdapat pada salah satu variasi search engine Google, yang dikenal dengan Google Suggest yang beralamatkan di URL http://www.google. com/webhp?complete=1&hl=en. Setiap Anda mengetikkan sebuah huruf, Google Suggest secara otomatis akan menampilkan daftar kata yang kemungkinan ingin Anda cari, beserta dengan jumlah result-nya. Bisa dibilang, Google Suggest inilah yang mengawali pesatnya penggunaan Ajax. Secara keseluruhan, contoh di atas hanyalah
beberapa contoh bagaimana dengan Ajax, website Anda akan semakin interaktif dan menarik, menyerupai aplikasi desktop. Point yang penting adalah walau bisa jadi tetap terdapat waktu tunggu atau delay akibat proses pertukaran data, tetapi proses dilakukan behind the scene, sehingga tidak mengganggu kenyamanan Anda.
Keuntungan Menggunakan Ajax
Ajax bukan hanya menjadi solusi akan permasalahan pentingnya update halaman web. Beberapa keuntungan lain yang didapatkan dari penggunaan Ajax adalah:
1. User Interface.
Adanya proses refresh pada halaman web tradisional mengindikasikan sebuah
proses yang berat. Berbeda jika Anda menggunakan Ajax, di mana halaman dapat di-update secara otomatis, tanpa melakukan reload/refresh. Hal ini tentu saja mempercepat respon halaman terhadap interaksi dari pengguna. var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”); } Kondisi if (window.XMLHttpRequest)
akan bernilai true, jika web browser yang Anda gunakan adalah browser non-Microsoft, sementara kondisi if (window. ActiveXObject) akan bernilai true jika Anda menggunakan browser Microsoft Internet Explorer. Perbedaannya hanyalah pada cara pembuatan object XMLHttpRequest. Anda harus meletakkan script di atas pada awal
program, dan di luar dari semua function JavaScript, karena kode tersebut harus dieksekusi terlebih dahulu sebelum objectnya digunakan. Anda dapat menyimpan program Anda ke dalam fi le dengan ekstensi fi le, umumnya seperti *.html, *.asp, *.aspx, *.php, dan sebagainya. Sebagaimana umumnya sebuah object, object XMLHttpRequest yang Anda ciptakan memiliki property dan method. Terdapat
dua property penting, yaitu property ready- State dan status. Property ini menunjukkan
keadaan object yang direpresentasikan dengan nilai numerik. Kondisi-kondisi di atas perlu diketahui, untuk menentukan langkah-langkah selanjutnya pada program. Terutama pada saat property readyState bernilai 4 (Complete) dan property status bernilai 200 (OK), yang merupakan kondisi di mana object XMLHttpRequest berjalan sebagaimana diharapkan sehingga Anda dapat melanjutkan proses yang diinginkan. Property di atas hanya digunakan untuk mendeteksi status dan keadaan object XMLHttpRequest. Untuk melakukan proses selanjutnya, Anda dapat menggunakan method yang disediakan oleh object XMLHttpRequest. XMLHttpRequest menyediakan methodmethod yang dapat Anda manfaatkan, seperti method open digunakan untuk membuka fi le pada lokasi URL yang ditentukan, di mana fi le tersebut merupakan fi le text yang berisikan data text biasa, XML, atau bahkan script dalam bahasa yang dikenal oleh web server Anda, misalnya ASP atau PHP. Contoh method lain yang disediakan oleh XMLHttpRequest adalah abort, yang digunakan untuk membatalkan request yang aktif. juga dikenal method send, yang berfungsi untuk mengirimkan request. Script ASP, PHP ataupun bahasa pemrograman
lainnya, dapat Anda gunakan dalam Ajax untuk keperluan menghasilkan data yang dibutuhkan oleh object XMLHttpRequest, contohnya script Anda dapat mengakses table negara, dan menghasilkan data dalam format XML, yang akan dibaca oleh object XMLHttpRequest. Di sini Anda dapat melihat, teknik Ajax didukung oleh beragam teknologi dan bahasa pemrograman yang bekerja sama. Penulisan kode HTML, JavaScript, dan script pemrograman seperti PHP atau ASP dalam satu fi le seperti pada teknik Ajax ini, tentunya bukan hal yang baru, bagi Anda yang telah terbiasa melakukan web programming. Karena itu secara programming, teknik Ajax hanyalah sedikit modifi kasi, dan sama sekali tidak mengubah syntax atau paradigma apapun. Tetapi jika Anda baru memulai web programming, memang diperlukan pengenalan dan latihan yang lebih mendalam untuk mengimplementasikan Ajax, yang tentunya bukan hal yang mustahil tercapai dalam waktu yang relatif singkat jika kita memiliki motivasi dan minat.
Ajax Framework
Teknik Ajax terus berkembang seiring dengan kemampuannya yang mengagumkan untuk menciptakan website yang interaktif,dan dinamis. Untuk lebih memudahkan proses pemrograman bagi developer, maka dibuat Ajax Framework. Ajax Framework terdiri dari kumpulankumpulan fungsi dan library yang siap digunakan. Dengan adanya framework, developer yang menggunakan Ajax terbantu dari dua sisi, yaitu sisi client dan sisi server. Pada sisi client, framework menyediakan functionfunction JavaScript untuk mengirimkan
request ke server. Pada sisi server, framework melakukan proses terhadap request yang diterima, mencari data yang diinginkan, dan mengirimkannya kembali pada web browser.
Contoh framework yang dapat Anda gunakan adalah AjaxLib, yang beralamatkan
di http://karaszewki.com/tools/ajaxlib/. Anda dapat men-download library JavaScript yang disediakan, dan menggunakannya untuk mendevelop website Anda. AjaxLib menyediakan function-function untuk keperluan sisi client. AjaxLib hanyalah satu contoh Ajax Framework yang dapat Anda temukan di Internet. Masih banyak pilihan Ajax Framework yang tersedia dan siap pakai, baik dari sisi client ataupun server.
Ajax Framework dapat juga ditemui pada platform dan bahasa lainnya, misalnya pada
platform Windows .NET yang dikenal dengan ASP.NET AJAX (sebelumnya dikenal dengan nama Microsoft Atlas), yang menyediakan komponen-komponen yang dapat Anda gunakan dengan mudah. Beberapa contoh komponen/control yang diambil dari ASP.NET AJAX berikut ini dapat memperkaya kreativitas Anda untuk menghasilkan
web dinamis dan interaktif:
1. AlwaysVisible.
sebuah control yang mengijinkan Anda meletakkan sebuah informasi (misalnya
pengumuman, tanggal dan jam, dan seterusnya) pada suatu posisi yang tetap di halaman web, walaupun halaman tersebut di-scroll atau di-resize.
2. Animation.
Untuk membuat animasi pada suatu event tertentu, seperti OnClick, OnLoad, OnMouseOver, dan lain-lain.
3. CascadingDropDown.
Teknik yang cukup umum digunakan dalam Ajax, yaitu memuat data dinamis
NILAI KETERANGAN
0 Uninitialized 1 Loading 2 Loaded 3 Interactive 4 Complete
Tabel property readyState adalah sebagai berikut:
NILAI KETERANGAN
200 OK 201 Created 401 Unauthorized 403 Forbidden 404 Not Found 408 Request Time Out 500 Internal Server Error Property status memiliki lebih banyak kondisi, beberapa yang terutama antara lain adalah: di dalam sebuah dropdown.
4. NumericUpDown.
Banyak cara untuk memilih sebuah angka. Pada aplikasi desktop, Anda tentu telah
terbiasa memilih angka dengan cara mengklik tombol up untuk menaikkan nilai pada sebuah textbox, atau klik tombol down untuk menurunkan nilai. Contohnya saat menentukan margin pada aplikasi Microsoft Word. Pada halaman web tradisional, Anda
dapat menentukan angka dengan sebuah dropdown, ataupun mengetikkan secara
manual angka tersebut. Jika Anda ingin berkreasi, control NumericUpDown ini membuat Anda dapat menciptakan tombol up dan down yang serupa dengan aplikasi desktop.
5. UpdateProgress.
Salah satu control untuk mengatasi permasalahan waktu tunggu pada Ajax. Saat proses behind the scene terjadi, mungkin Anda perlu menampilkan sebuah status progress yang terjadi, sehingga pengguna menyadari bahwa halaman web sedang bekerja dan memanggil data.
Kerugian Ajax
Apakah terdapat kerugian dengan menggunakan Ajax? Tepatnya adalah terdapat beberapa konsekuensi, jika Anda menggunakan Ajax. Antara lain adalah:
1. Integrasi Browser.
Browser memiliki engine tersendiri untuk mengolah history, sehingga Anda dapat kembali ke halaman sebelumnya dengan mudah, dengan mengeksekusi tombol “Back”. Dengan menggunakan Ajax, halaman yang diciptakan secara dinamis tidak ter-register di dalam engine browser, sehingga mungkin navigasi (seperti contoh tombol “Back”) akan tidak berjalan sesuai keinginan Anda. Walaupun demikian, bukannya tidak ada
jalan atau trik pemrograman yang dapat mengatasi hal ini. Anda dapat mencari
artikel-artikel Ajax yang memberikan tip untuk mengatasi hal ini, setidaknya hal ini
memerlukan pemrograman yang relative rumit.
2. Waktu Tunggu.
Dengan Ajax, memang tidak terdapat lagi refresh keseluruhan halaman. Tetapi menimbulkan masalah baru, yaitu waktu tunggu yang terjadi karena pertukaran data antara request dari pengguna dengan response server, menjadi lebih terasa dan terkadang menyesatkan pengguna yang masih awam. Untuk itu, memberikan progress selama waktu tunggu, terlebih untuk data yang relatif cukup besar, akan dapat membantu permasalahan
tersebut.
3. Optimasi Search Engine.
Sebuah website yang statik mudah untuk di-index di dalam search engine, tidak demikian dengan halaman yang dibuat dengan Ajax. Masalah serupa dihadapi oleh semua website yang dinamis, di mana search engine tidak dapat mengenali content website Anda.
4. Kompatibilitas Browser.
JavaScript merupakan bahasa pemrograman utama di dalam Ajax. Permasalahannya
adalah masing-masing browser (juga browser yang sama tetapi dengan versi yang berbeda), mungkin mengimplementasikan JavaScript berbeda satu dengan yang lainnya. Untuk menghindarinya, JavaScript yang Anda gunakan perlu dites dengan berbagai
browser. Sebaiknya Anda menghindari solusi menuliskan JavaScript yang berbeda untuk browser yang berbeda, untuk mendukung kompatibilitas browser. Cara ini dapat memperumit kode program Anda dan menjadi tidak efi sien.
Open Source
Penggunaan Ajax cukup diminati hingga saat ini. Terbukti dari sekian banyak framework
yang ditawarkan, dan perkembanganperkembangan yang berbasis teknologi Ajax.
Framework yang dikembangkan tidak jarang berbasis open source. Salah satu pengembangan lain dari teknologi Ajax dalam dunia open source adalah pengembangan AppML (Application Markup Language) dari W3Schools. AppML menggunakan Ajax dalam pengembangannya, dan merupakan platform independen. Daftar di atas dapat bertambah dengan lebih banyak lagi referensi dan website yang dapat Anda gunakan, dan tidak tertutup kemungkinan Anda sendiri yang akan mengembangkan Ajax dalam karya
Anda.
Pengembangan
Ajax terus mengembangkan terobosanterobosan baru, salah satunya kemunculan
Comet Ajax, sebuah teknik pemrograman yang memungkinkan web server mengirimkan
data ke client, tanpa client melakukan request ke server. Hal ini membuat pemrograman aplikasi web semakin menyerupai pemrograman aplikasi desktop, karena memungkinkan kita menciptakan aplikasi berbasis event (eventdriven application), yang sebelumnya hanya dapat dijumpai pada aplikasi desktop. Untuk mewujudkan hal tersebut, diperlukan
koneksi yang tidak terputus antara client dan server, paling tidak hingga server memberikan data yang dihasilkan dari sebuah event pada client. Hal ini memang merupakan masalah tersendiri, terutama jika jaringan Internet yang Anda gunakan kurang mendukung. Hal ini masih terus dikembangkan dari sisi server dan aplikasi, agar dapat memberikan dukungan yang lebih baik terhadap teknologi Comet ini. Salah satu contoh implementasinya dapat Anda lihat pada http://one. virgil.nl/wps/portal, yang merupakan sebuah portal fi nansial.
Penutup
Walaupun bukan merupakan pemrograman yang terlalu kompleks (terutama jika Anda
telah menguasai elemen-elemen dasar web seperti HTML, XML, CSS, JavaScript, ataupun script pemrograman seperti ASP dan PHP), teknik Ajax memerlukan latihan dan praktik yang serius untuk dapat menciptakan website interaktif yang lebih baik, lebih cepat, dan user friendly. Di samping itu, pemrograman Ajax dapat merealisasikan kreativitas Anda yang tidak terbatas. Semoga artikel ini dapat menjadi awal bagi Anda untuk mewujudkan sebuah situs refreshless browsing yang semakin memanjakan pengunjungnya._
_ http://en.wikipedia.org/wiki/Ajax_ %28programming%29
_ http://www.w3schools.com/ajax/
_ http://www.onlamp.com/pub/a/ onlamp/2005/06/09/rails_ajax.html
Andriachi's Weblog 