Membuat Object Koneksi AJAX Ke Server


Logo AJAX

Logo AJAX

AJAX (Asynchronous JavaScript and XML) adalah teknik pemrograman web dengan memberdayakan JavaScript untuk membuat aplikasi web dimana pertukaran data antara web browser dan server terjadi secara asynchronous. AJAX memungkinkan kita untuk meng-update bagian tertentu dari halaman web tanpa perlu me-reload seluruh halaman.

Latar belakang munculnya AJAX:

  • Terjadi perbedaan mencolok antara aplikasi desktop dan aplikasi website dimana aplikasi desktop lebih responsif dan interaktif.
  • Aplikasi website lebih mudah dalam hal implementasi, cukup sekali pasang di server (install once run anywhere), semua user dapat menggunakannya tanpa perlu instalasi/update pada desktop mereka.
  • Javasript memungkinkan aplikasi web lebih dinamis dan interaktif. Proses request-respond dengan javascript awalnya masih tinggi dan data yang dikirim oleh server cukup besar (satu webpage), sehingga aplikasi web menjadi lambat.
  • Jesse James Garrett dari Adaptive Paths (Feb 2005) memperkenalkan istilah AJAX dalam teknik pemrograman web , dan kemudian menjadi web standard secara official oleh W3C (Apr 2006)
  • AJAX memungkinkan JavaScript membuat website lebih responsif dan interaktif seperti aplikasi desktop (client-server) dimana proses request-respond dapat dilakukan secara asinkron, hanya sebagian dari halaman web yang reload dibandingkan seluruh halaman web.

AJAX bukanlah bahasa pemrograman web baru ataupun teknologi web baru melainkan merupakan gabungan dari teknik pemrograman web standard yang telah ada, yakni:

  • XHTML (Extensible HyperText Markup Language)
  • CSS (Cascading Style Sheets)
  • DOM (Document Object Model)
  • XML (Extensible Markup Language)
  • JavaScript dengan object XMLHttpRequest

Berikut ini fungsi umum AJAX untuk membuat object koneksi ke web server.

var xmlHttp = buatObjekXmlHttp();
function buatObjekXmlHttp()
{  var obj = null;
if (window.ActiveXObject)
obj = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
if (obj == null)
document.write("Browser tidak mendukung XMLHttpRequest");
return obj;
}
Perbandingan Model Aplikasi Web Klasik dan AJAX

Perbandingan Model Aplikasi Web Klasik dan AJAX

Dalam coding JavaScript tradisional, jika kita ingin mendapatkan informasi dari database atau file di server, atau mengirim informasi ke server, kita menggunakan method GET atau POST data ke server. User mengklik tombol “Submit” untuk mengirim / mendapatkan informasi, menunggu respon dari server, dan kemudian halaman baru akan loading hasilnya.

Karena server mengembalikan sebuah halaman baru setiap kali user melakukan request, aplikasi web tradisional menjadi lebih lambat dan cenderung kurang user-friendly. Dengan AJAX, JavaScript berkomunikasi langsung dengan server, melalui objek XMLHttpRequest.

Dengan HTTP request, web browser akan mendapatkan respon dari server web tanpa reload seluruh halaman. User akan tetap pada halaman yang sama, dan ia tidak akan melihat bahwa permintaan script, atau mengirim data ke server secara background.

Berikut ini beberapa kemampuan AJAX secara umum:

  • Real time validation
  • Partial web page update, contoh: Pengecekan username, password atau data field lainnya
  • Auto Complete / Auto Suggest, contoh: google search
  • Load on demand, dimana proses pengiriman dan pengambilan data ke dan dari server secara background
  • Refresh data dan server push, contoh: web menampilkan nilai tukar mata uang atau stock exchange, ramalan cuaca dll
  • Mashup (pencampuran aplikasi data dalam satu halaman)
  • Online Chat / shutbox
  • RSS Feed untuk subscribe website.

Keuntungan penggunaan AJAX :

  • Mengurangi penggunaan bandwidth yang berlebihan
  • Meningkatkan produktivitas dengan mempercepat proses interaksi website & user
  • Mengurangi development time sehingga menghemat biaya pengembangan website

Kekurangan/dampak penggunaan AJAX:

  • Karena alamat halaman tidak berubah ketika proses request-respond, maka tidak mudah untuk membuat bookmark suatu halaman web yang berbasis ajax
  • Search engine kemungkinan tidak dapat meng-index seluruh bagian halaman web
  • Tombol back pada browser menjadi tidak berfungsi karena seluruh aksi terjadi di halaman web yang sama
  • Tidak semua browser support AJAX
  • Aplikasi AJAX menjadi tidak berfungsi jika user men-disable JavaScript pada browser clientnya.

Leave your comment