Selasa, 20 September 2011

Belajar Ajax – Pengenalan Ajax



Belajar Ajax  – Pengenalan Ajax
Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Sebelum mengenal lebih jauh mengenai AJAX ada baiknya kita review kenapa AJAX ini muncul serta perkembangan Teknologi web.
Tutorial ini berasal dari blog lama (www.ibnoe.web.id) yang sudah tidak di maintain

Sejarah Aplikasi Web

Seiring dengan perkembangan internet pada awal tahun 1990-an dan di temukannya HTTP (Hyper Text Transfer Protokol) yang digunakan untuk mengirimkan data di internet, sejak itulah sejarah aplikasi web dimulai. Pada waktu itu tipe dokumen standar yang digunakan di internet adalah HTML (Hyper Text Markup Language). HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser (Sebuah perangkat lunak yang berfungsi menampilkan dan melakukan interaksi dengan dokumen-dokumen yang disediakan oleh webserver). HTML tidak dirancang untuk membuat sebuah aplikasi web yang komplek melainkan hanya untuk menampilkan content dan formatnya dalam bentuk teks dan gambar dalam bentuk yang statis.
Aplikasi Web adalah sebuah aplikasi yang menggunakan kemampuan webserver untk memproses data dan mengirimkannya ke user melalui network/internet. Berbeda dengan aplikasi desktop , dimana harus melakukan instalasi di sisi client, untuk dapat menggunakan aplikasi tersebut. Aplikasi web hanya membutuhkan sebuah web browser yang digunakan hanya untuk menampilkan data yang diterima dari server.
Karena keterbatasan diatas akhirnya muncullah beberapa teknologi yang dapat membuat aplikasi web lebih dinamis. Teknologi ini dapat dikelompokkan menjadi dua jenis :
  1. Teknologi Client-Side. Teknologi ini membuat aplikasi web menjadi dinamis dengan melakukan manipulasi data disisi user. Contoh teknologi ini adalah JavaScript, Java Applet, Flash dan lain-lain. Keuntungan yang ditawarkan teknologi ini adalah mempermudah dan memberikan “keinteraktifan” pada web user interface.
  2. Teknologi Server-Side. Teknologi ini menawarkan ke-interaktifan data dari sisi server, karena semua data di manipulasi di sisi server.Client hanya menerima output dari server dalam bentuk HTML biasa. Contoh teknologi ini adalah CGI, PHP, ASP, JSP, ColdFusion dan lain lain.
Untuk mendapatkan aplikasi web yang baik biasanya programmer menggunakan kedua teknologi diatas, supaya dapat menghasilkan sebuah aplikasi web yang powerful, karena kedua teknologi tersebut menawarkan keuntungan yang sangat berbeda antara satu dan lainnya.
Keuntungan aplikasi web :
  • Aplikasi web lebih mudah dan murah untuk digunakan. Dengan aplikasi web, kita dapat mengurangi biaya untuk mengimplemntasi/menginstall aplikasi disisi client.
  • Aplikasi web lebih mudah dan murah untuk di upgrade. Biaya perawatan dan upgrade lebih murah karena hanya mengubah di sisi server.
  • Aplikasi web lebih fleksibel. Dengan aplikasi web, kita tidak perlu memikirkan masalah sistem operasi, karena secara default sebuah sistem operasi sudah dilengkapi web browser.

Masa Depan Aplikasi Web Dengan AJAX

AJAX yang dimaksud disini bukanlah nama club sepakbola yang berasal dari Amsterdam, belanda atau pun nama pahlawan dalam sejarah perang Trojan, tetapi AJAX disini adalah singkatan dari Asynchronous JavaScript and XML. Pada intinya ajax itu merupakan gabungan beberapa teknologi yang bertujuan untuk menghindari page reload. Dengan menghindari page reload, kita dapat menghindari paradigma click-and-wait serta memberikan sebuah fitur yang cukup kompleks pada website seperti validasi data secara realtime, drag n drop dan fitur-fitur lain yang belum dimiliki web biasa.
Dengan AJAX, suatu aplikasi web dapat mengambil data kemudian diolah di client melalui request asynchronous HTTP yang diinisiasi oleh Javascript, sehingga dapat mengupdate bagian-bagian tertentu dari web tanpa harus memanggil keseluruhan halaman web. Request ini dapat dieksekusi dalam beberapa cara dan beberapa format transmisi data. Dikombinasikannya cara pengambilan data remote dengan interaktivitas dari Document Object Model (DOM) telah menghasilkan generasi terbaru dari aplikasi web yang mengebrak aturan-aturan tradisional tentang apa yang dapat terjadi di dalam web.
AJAX memberikan keseimbangan lebih baik antara fungsionalitas client dengan fungsionalitas server ketika mengeksekusi aksi yang diminta oleh user. Hingga saat ini, fungsionalitas di sisi client dan server dipandang sebagai fungsionalitas yang terpisah yang bekerja hanya satu dalam suatu waktu untuk merespon aksi dari user. Dengan adanya AJAX, dihasilkan solusi untuk menyeimbangkan loading web antara client dan server dengan cara memperkenankan komunikasi secara background ketika user bekerja dengan page saat itu. Gambar di bawah ini adalah visualisasi dari apa yang terjadi ketika halaman web dengan AJAX diminta oleh user
AJAX dibangun dari beberapa teknologi yang telah disediakan oleh web browser modern, seperti Mozilla Firefox, Internet Explorer, atau Opera, sehingga client tidak perlu menginstall modul extra untuk menjalankan website AJAX. AJAX ini dikonstruksi dari:
  • JavaScript adalah unsur terpenting dari AJAX, yang dapat membangun fungsionalitas client site. Dalam fungsi-fungsi JavaScript akan banyak digunakan Document Object Model (DOM) untuk memanipulasi bagian dari halaman HTML.
  • Objek XMLHTTPRequest memperkenankan JavaScript untuk mengakses server secara asynchronous, sehingga user dapat melanjutkan pekerjaan, sementara waktu proses dilakukan di background. Mengakses server singkatnya adalah membuat request HTTP sederhana untuk suatu file atau script yang terletak di server. Request HTTP mudah dibuat dan tidak menyebabkan permasalahan yang berhubungan dengan firewall.
  • Teknologi server-side diperlukan untuk menangani request yang datang dari client JavaScript.
Dalam modul ini digunakan PHP untuk menjalankan bagian dari proses yang ada di sisi server. Untuk komunikasi client-server diperlukan jalan untuk melewatkan data dan memahami data tersebut. Melewatkan data adalah bagian yang mudah. Script client yang mengakses server (menggunakan object XMLHTTPRequest) dapat mengirimkan data name-value menggunakan GET dan POST. Sangat mudah untuk membaca nilai ini di script server apapun.
Script server kemudian mengirim balik respose melalui HTTP, tetapi tidak seperti website umumnya, response dibuat dengan format yang dapat dengan mudah di-parsing oleh kode JavaScript yang ada di client. Format yang disarankan adalah XML, karena mempunyai kelebihan yaitu secara luas didukung dan banyak library yang membuat dokumen XML mudah untuk dimanipulasi. Jika anda lebih consern kepada kecepatan maka JSON lah pilihan terbaik anda
Skenario umum dimana AJAX dapat digunakan antara lain:
  • Validasi form server-side yang dilakukan dengan segera, sangat berguna di kondisi yang tidak memungkinkan pengiriman keseluruhan data ke client yang dibutuhkan untuk melakukan validasi ketika halaman di-load di awal mula.
  • Membuat chat online sederhana yang tidak membutuhkan library eksternal seperti Java Runtime Machine atau Flash
  • Membuat aplikasi dengan fungsionalitas seperti Google Suggest.
  • Mendayagunakan teknologi yang telah ada secara lebih efektif. Misalnya pembuatan grafik secara real time menggunakan Scalable Vector Graphics (SVG), atau membuat list drag-and-drop sederhana.
  • Pembuatan data grid yang responsif yang mengupdate database server-side secara on-the-fly.
  • Membuat aplikasi yang membutuhkan update secara real time dari berbagai sumber eksternal, misalnya RSS.
Beberapa kemungkinan permasalahan dengan AJAX antara lain:
  • Karena alamat halaman tidak berubah ketika proses bekerja, maka tidak mudah untuk membuat bookmark suatu halaman yang berbasis AJAX.
  • Search Engine mungkin tidak dapat meng-indexing seluruh bagian dari situs dengan aplikasi AJAX.
  • Tombol Back di browser, tidak memberikan hasil yang sama dengan aplikasi web klasik, karena seluruh aksi terjadi di halaman yang sama.
  • JavaScript dapat di-disable di sisi client, sehingga aplikasi AJAX tidak berfungsi.
Apa sih kelebihan menggunakan AJAX?
  • Mengurangi Penggunaan Bandwidth Berlebihan
  • Meningkatkan produktivitas tanpa harus menunggu proses / action yang berbelit-belit
  • Menghemat biaya pengeluaran karena banyak mengurangi proses development.
  • Meningkatkan Interaksi User/usability pada situs Anda

0 comments:

Poskan Komentar