AJAX-enabled Web Application

Apakah AJAX? AJAX merupakan paduan dari beberapa teknologi yang sudah dikenal sebalumnya yaitu HTML, DOM, XML, Javascript dan teknologi pendukung lainnya. AJAX adalah singkatan dari Asynchronous JavaScript and XML.
Komponen-komponen AJAX meliputi HTML (HyperText Markup Language), XHTML (Extensible HyperText Markup Language), CSS (Cascading Style Sheets), JavaScript, DOM (Document Object Model), XML (Extensible Markup Language), XSLT (Extensible Stylesheet Language Transformations), XMLHttpRequest, dan JSON (JavaScript Object Notation).
Dalam penerapannya, tidak semua teknologi di atas digunakan. Terdapat beberapa teknik komunikasi yang digunakan untuk implementasi AJAX. Teknik yang umum digunakan adalah dengan menggunakan:



 Hidden Frame Metode ini memanfaatkan frame yang tersembunyi. Biasanya salah satu frame diset dengan ukuran tinggi/lebar 0 sehingga tidak terlihat di halaman. Frame tersembunyi inilah yang sebenarnya melakukan request ke dan menerima respon dari server, sehingga frame yang tampil kelihatan tidak melakukan postback ke server. Javascript digunakan untuk mengambil data dan mengisi data yang ada di frame tersembunyi ini.
 Hidden IFrame Metode ini hampir sama dengan hidden frame, perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan Frame.
 Objek XMLHttpRequest Metode yang satu ini memanfaatkan ActiveX Objek (IE) atau objek javascript XMLHttpRequest (Mozilla/Firefox, Safari, Opera). Objek ini yang akan melakukan postback ke server dan menerima respon balik berupa data (bukan halaman). Data yang didapat dari server kemudian diolah di klien untuk ditampilkan ke halaman.
Teknik pemprosesan halaman secara umum ada dua:
 Pemprosesan halaman dengan pembuatan/manipulasi objek dokumen menggunakan javascripKlien mengirimkan data dalam format XML/JSON kepada server dan mendapatkan data darserver berupa XML/JSON. Data XML/JSON kemudian diolah untuk memanipulasi objek dokumenmenggunakan DOM dan javascript.
 Parsial rendering. Pada teknik ini UI dan behaviour tidak diproses di klien melainkan diproses server. Klien menerima UI dan behaviour kemudian melakukan rendering pada bagian halamantertentu.

Perpaduan teknologi-teknologi tersebut dapat meningkatkan kinerja aplikasi web dan lebih responsif terhadap aksi pengguna. Dengan AJAX pertukaran data antara klien dan server lebih ringan karena hanya data yang dipertukarkan (bukan halaman) sehingga aplikasi web dapat berjalan lebih cepat.

Penggunaan Dasar Dua keistimewaan Ajax adalah dapat:
 Membuat permintaan kepada server tanpa memuat kembali (reload) halaman.
 Mengurai (parse) dan bekerja dengan dokumen XML dan atau JSON.
Langkah-langkah:




1. Pada berkas design form Default.aspx tambahkan komponen ScriptManager dari AJAX Extentions di Toolbox. Lihat Gambar

Gambar Komponen ScriptManager

Letakkan diposisi teratas dari semua komponen label atau teksbox yang menyusun form default HitungHutang. Lihat Gambar dibawah.

Gambar Posisi Komponen ScriptManager

2. Pada jendela source Default.aspx, geser kode komponen ScriptManager ke posisi dibawah kode form seperti Gambar dibawah.

Gambar Kode ScriptManager

3. Tetap di jendela source, tambahkan komponen UpdatePanel dari AJAX Extentions di Toolbox. Lihat Gambar .

Gambar Toolbox UpdatePanel

Letakkan kode dari komponen UpdatePanel pada posisi diatas kode label, seperti pada Gambar dibawah.

Gambar Kode UpdatePanel

4. Pindahkan semua kode label, textbox, dan button diantara kode UpdatePanel, sehingga
jendela design akan terlihat semua label, textbox dan button akan ditampung diUpdatePanel. Lihat Gambar.

Gambar Posisi Kode UpdatePanel

5. Menguji program HitungHutang melalui Debug > Start Debugging atau tekan tombol F5. Isikan beban hutang, tingkat bunga, dan lama waktu. Setelah itu, tekan tombol Hitung, sehingga didapatkan jumlah total yang harus dibayarkan pada field terakhir. Tahap ini sama seperti pengujian pada program yang belum dipasangi AJAX. Bedanya pada saat tombol Total ditekan, kita tidak akan melihat form di-reload.