Posted on 11.45

Intro to AJAX and Reverse AJAX



AJAX atau kepanjangannya Asynchronous Javascript and XML merupakan cara bertukar data dengan server tanpa harus me-reload halaman web. Penggunaan AJAX tidak bisa dilakukan secara berdiri sendiri tetapi digabungkan dengan teknologi yang lain seperti HTML dan CSS. Javascript dan XMLHttpRequest menyediakan metode untuk terjadinya pertukaran data secara asynchronous. Nah pada prinsipnya AJAX ini berfungsi untuk meminta server bisa mengirimkan data tanpa prosesnya diketahui oleh pengguna, jadi simplenya tiba-tiba data sudah disajikan kepada pengguna.

Sudah sangat banyak pembahasan tentang si AJAX ini. Disini yang mau lebih saya bahas adalah sedikit pengenalan untuk Reverse Ajax. Jadi beberapa waktu yang lalu (sekitar akhir tahun 2013), saya membaca sebuah artikel dari IBM yang temanya adalah Streaming and Long Polling for Responsive Communication Between Your Server and Client dan artikel tersebut tertanggal 19 Juli 2011, hehehe telat banget saya taunya. Saya juga kebetulan nemu itu artikel karena saya waktu itu lagi butuh nyekrip  bikin live notification yang kaya punyanya si Facebook. Pertamanya saya pikir notifikasi model gitu itu pakainya AJAX tapi ternyata setelah baca teorinya agak lebih dalam, penggunaan AJAX untuk live notification  ini boros, karena bisa aja ketika client meminta kepada server untuk dikirimkan notifikasi ternyata tidak ada notifikasi baru alias permintaan seperti itu harusnya tidak perlu. Dari situlah akhirnya saya menemukan dan sedikit tahu tentang reverse Ajax.

Konsep dasar dari reverse AJAX adalah kemampuan untuk mengirimkan data secara cepat dari server ke client. Tujuan dari reverse AJAX adalah untuk mengijinkan server bisa segera mengirimkan informasi kepada client, tentunya tanpa harus ada reload halaman ataupun aksi tertentu yang dilakukan oleh pengguna.

Teknik-Teknik Reverse AJAX

HTTP Polling dan JSONP Polling

Polling melibatkan permintaan dari client ke server untuk meminta suatu data. Secara konsep Polling tidak ada bedanya dengan AJAX. Untuk bisa mendapatkan event dari server secepat mungkin maka interval waktu antar polling harus seminimal mungkin. Akibatnya adalah client akan meminta terlalu banyak permintaan dan dari permintaan tersebut tidak semuanya membawa data yang dibutuhkan sehingga boros bandwidth. Gambar berikut bisa dilihat untuk mengilustrasikan Polling:



Advantages
  • Mudah diimplementasikan
  • Tidak butuh resource tambahan pada server
  • Bisa jalan di semua browser
Disadvantages
  • Boros bandwidth
Piggyback

Teknik ini sedikit lebih cerdas dibandingkan dengan polling karena akan menghilangkan permintaan-permintaan tanpa hasil. Tidak ada interval waktu tertentu, permintaan dikirimkan ke server ketika client membutuhkan data dari server. Perbedaan dengan polling ada pada response yang dihasilkan. Pada teknik ini, response dibagi menjadi dua response untuk data yang diminta dan server event. Gambar berikut merupakan ilustrasi untuk teknik piggyback:



Advantages
  • Client dapat mengontrol kapan permintaan dikirim
  • Tidak membutuhkan resource tambahan pada server
Disadvantages
  • Tidak diketahui kapan terdapat event di server akan dikirimkan karena membutuhkan permintaan dari client untuk megirimkan event
Comet

Comet merupakan salah satu model aplikasi web dimana permintaan akan dikirimkan kepada server dan permintaan tersebut akan tetap terjadi dalam waktu yang lama sampai time out atau sampai terjadi server event. Ketika sebuah permintaan selesai dijalankan, permintaan yang lain akan segera dikirimkan dan menunggu adanya server event lagi, begitu seterusnya.

Keuntungan dari comet adalah setiap client selalu memiliki sambungan yang terbuka ke server. Server dapat mem-push event sesegera mungkin setiap ada event terjadi. Karena itu, untuk bisa menggunakan comet dibutuhkan fitur tambahan pada server untuk menghadle permintaan jangka panjang ini. Gambar berikut merupakan ilustrasi Comet:



Terdapat dua jenis implementasi Comet yaitu Streaming mode dan Long Polling.

Streaming Mode

Pada mode ini satu koneksi dibuka. Hanya aka nada satu permintaan yang sifatnya long-lived dan setiap event yang terjadi di server akan dikirimkan melalui koneksi yang sama. Pada client side dibutuhkan langkah untuk membedakan response yang dating dari koneksi yang sama. Terdapat dua cara yang umum digunakan yaitu:
  • Forever iframes
Menggunakan hidden iframe tag yang diletakkan pada halaman dengan atribut src yang merujuk pada servlet path yang mengembalikan event server. Setiap terdapat event yang diterima, servlet menuliskan code javascript baru di dalamnya. Konten pada iframe akan ditambahkan dengan kode ini untuk dieksekusi.
  • Multipart XMLHttpRequest
Matode ini menggunakan AJAX yang dikirimkan dan terus terbuka di server. Setiap terdapat event, multipart response dituliskan melalui koneksi yang sama. Pada server side, harus di set terlebih dahulu multipart request kemudian melakukan suspend koneksi. Setiap terjadi event semua koneksi yang disuspend akan diiterasi kemudian menuliskan data didalamnya.

Long Polling

Long Polling mode dilakukan dengan membuat koneksi yang selalu terbuka dan ketika terjadi event response akan di commit dan koneksi ditutup. Kemudian sesegera mungkin koneksi baru dibuka. Terdapat dua cara mengimplementasikan mode ini, yaitu:
  • Script Tags
Implementasi dilakukan dengan menambahkan script tag pada halaman supaya script tersebut dieksekusi. Server akan melakukan suspend koneksi sampai terdapat event, mengirimkan konten script ke browser, dan membuka script tag yang lain untuk mendapatkan event selanjutnya.
  • XMLHttpRequest Long Polling
Implementasi dilakukan dengan membuka permintaan AJAX ke server dan menunggu response. Dibutuhkan fitur khusus pada server untuk mengijinkan permintaan untuk dapat di suspend. Segera setelah terjadi event server mengirimkan response dan menutup koneksi. Client kemudian menerima response dan membuka kembali permintaan AJAX ke server.

WebSocket

Pembahasan websocket bersambung suatu hari nanti ya, begitu juga dengan beberapa contoh implementasinya… Read More

0 Responses to Intro to AJAX and Reverse AJAX

Posting Komentar