Belajar Ajax – Contoh sederhana AJAX

Seri Belajar Ajax

• Bagian 1. Pengenalan AJAX

Sebelum membaca tutorial ini lebih lanjut sebaiknya membaca seri belajar ajax sebelumnya

Arti XmlHttpRequest

XmlHttpRequest adalah sebuah object javascript yang digunakan untuk mengakses web server secara asingkron, jadi user dapat terus melakukan aktifitasnya di sebuah halaman web tanpa me-refresh halaman tersebut, karena proses requestnya dilakukan di background. Mengakses web server artinya adalah melakukan sebuah request biasa ke sebuah halaman di webserver yang berisi script (server side script). Teknisnya XMLHttpRequest (XHR) adalah sebuah DOM API yang dapat digunakan pada web browser scripting language seperti JavaScript.

Pada proses request ini, tentunya ada data yang akan kita lewatkan untuk diproses di sisi server. Metode request yang dapat dan biasa kita gunakan adalah GET atau POST. Tentunya akan sangat mudah bagi server untuk membaca data yang di kirimkan oleh client dengan menggunakan metode tersebut.


Setelah data tersebut terkirim, otomatis server akan mengirimkan respon balik atas request yang telah dilakukan. Berbeda dengan respon web server biasa, biasanya hasil respon tersebut dalam sebuah format yang mudah di parsing oleh javascript di sisi client. Walaupun berlabel XML kita juga dapat menggunakan data format lain seperti # HTML, JSON, CSV. Text Format yang banyak digunakan adalah XML dan Json. Xml banyak digunakan karena format ini sudah di dukung banyak system dan ada banyak library yang dapat digunakan untuk memanipulasi dokumen XML tersebut. Sedangkan JavaScript Object Notation (JSON) karena simple dalam mendecode dan ukurannya yang sangat kecil dan data oriented.

Sejarah XMLHttpRequest

Konsep utama XMLHttpRequest ini berasal dari Microsoft pada project Outlook Web Access. Sebuah interface bernama IXMLHTTPRequest telah diimplementasikan di MSXML. Dan pada versi kedua MSXML, IXMLHTTPRequest sudah dapat digunakan pada Internet Explorer 5.0(March 1999) menggunakan ActiveX wrapper.

Hal tersebut diikuti oleh Mozilla Foundation dengan membangun sebuah interface yang disebut nsIXMLHttpRequest pada browser engine mereka – gecko. Interface ini dibangun mirip dengan Microsoft’s IXMLHTTPRequest interface. Perbedaanya Mozzila menjadikannya sebagai salah satu object dalam javascript.

Karena konsepnya yang bagus, XMLHttpRequest menjadi standard diantara browser-browser besar. Safari mengimplementasikan pada February 2004 (safari 1.2), Konqueror, Opera 8.0 pada April 2005. Pada tahun 2006 World Wide Web Consortium (W3C) mempublish sebuah draft tentang XMLHttpRequest ini untuk menjadi standar yang lebih baku.

Implementasi XHR

Pada implementasinya, untuk membuat sebuah object XMLHttp cukup dengan meninstance class XMLHttpRequest(), tetapi pada browser IE, microsoft mengimplentasikannya pada sebuah ActiveX Control, jadi kita harus menggunakan ActiveX tersebut untuk mengimplmentasikan ajax pada IE. Contoh :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

var xmlHttp = createXmlHttpRequestObject(); function createXmlHttpRequestObject(){ var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch(e) { var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");   for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){ try{ xmlHttp = new ActiveXObject(XmlHttpVersions[i]); } catch (e) {} } } if (!xmlHttp) alert("Error creating the XMLHttpRequest object."); else return xmlHttp; }

Setelah object XMLHttp dibuat, kita dapat membuat HTTP request mengunakan javascript dengan memanggil fungsi open() yang merupakan member dari class XMLhttp. Fungsi ini mempunyai 3 parameter diantaranya:

• Type Request: Sebuah string yang menunjukkan dengan tipe request apa koneksiyang akan dilakukan.
• URL kemana kita akan mengirim request tersebut.
• Async: Sebuah value bertipe boolean yang menunjukkan apakah request akan diminta secara asingkron

Parameter terakhir Async sangat penting karena ia mengontrol javascript bagaimana cara menangani request. Ketika ia di set True maka request akan dilakukan secara asingkon, artinya javascript akan tetap menjalankan kode salanjutnya tanpa menunggu response dari server, Tetapi jika di set false maka browser akan menunggu sampai aja respon sebelum melanjutkan eksekusi code. Ini berarti jika respon membutuhkan waktu yang banyak, maka user tidak dapat berinteraksi dengan browser sampai request selesai.

Selanjutnya setelah object XMLhttp terbentuk, kita perlu mendefinisikan sebuah event handler onreadystatechange. Objek XMLHttp mempunyai sebuah properti dengan nama readyState yang berisi informasi tentang status response dari server. Ada 5 jenis status respondari server diantaranya:

• 0 (Uninitialized) : Objek XML Http sudah dibuat tetapi fungsi open belum dipanggil.
• 1 (Loading) : Fungsi open telah dipanggil tetapi request belum dikirim
• 2 (Loaded) : Request telah dikirim
• 3 (Interactive) : Sebagian response telah di terima
• 4 (Complete) : Semua data telah diterima

Setiap ada perubahan value pada property readystate maka eventhandler onreadystatechange akan di panggil. Adapun method/properties pada XMLHTTP Object adalah

Method/Property	keterangan
Abort ()	Membatalkan request yang telah dikirim
getAllResponseHeaders ()	Mendapatkan header respon sebagai string
Open ( “method”, ”URL”[,asyncflag [, “username” [, “pasword”]]])	Inisialiasi parameter request
Send (content)	Melakukan HTTP Request
setRequestHeader(“Label”, “value”)	Set pasangan label dan valuenya pada header request
Onreadystatechange	Digunakan untuk mengeset fungsi callback yang menghandle perubahan request state
readyState	Memberikan informasi status request
responseText	Mengembalikan respon server dalam format string
responseXML	Mengembalikan respon server dalam format XML
Status	Mengembalikan kode status request
statusText	Mengembalikan pesan status request

Sumber : http://www.koder.web.id

Read More

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

sumber : http://www.koder.web.id

Read More