Pengantar AJAX

taken from http://www.masykur.web.id/post/Pengantar-AJAX.aspx

Banyak pertanyaan di milis dotnet@netindonesia.net mengenai apa itu AJAX. Tulisan ini adalah penyempurnaan tulisan saya di http://semarang.netindonesia.net/blogs/cahnom/. Dalam tulisan kali ini saya akan menjelaskan tentang dasar-dasar AJAX menggunakan native Javascript. Pada tulisan berikutnya Insya Allah akan saya bahas mengenai pemprograman AJAX menggunakan beberapa Framework yang sudah ada untuk mempercepat pembuatan program (RAD).

Sebelum membahas lebih jauh tentang AJAX. Apa sih sebenarnya AJAX? AJAX bukanlah barang baru dan bukan teknologi baru. AJAX merupakan paduan dari beberapa teknologi yang sudah dikenal sebalumnya yaitu HTML, DOM, XML, Javascript dan teknologi pendukung lainnya. AJAX adalah akronim dari Asynchronous JavaScript and XML, komponen-komponen AJAX meliputi:

• HTML (HyperText Markup Language) digunakan dalam membuat halaman web dan dokumen-dokumen lain yang dapat ditampilkan dalam browser. HTML merupakan standar internasional dengan spesifikasi yang ditetapkan oleh World Wide Web Consortium (W3C). Versi terakhir saat tulisan ini dibuat adalah HTML 4.01.
• XHTML (Extensible HyperText Markup Language), adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. Versi terakhir saat tulisan ini dibuat adalah XHTML 2.0.
• CSS (Cascading Style Sheets ) adalah sebuah mekanisme sederhana untuk memberikan style (seperti font, warna, jarak spasi, dll) kepada dokumen web yang ditulis dalam HTML atau XML (termasuk beberapa variasi bahasa XML seperti XHTML dan SVG).
• JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan pada produk dan aplikasi lain seperti peramban web.
• DOM (Document Object Model) adalah sebuah API (Application Program Interface) untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara terstruktur, dimungkinkan untuk merubah isi dan presentasi visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa pemprograman.
• XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar sistem yang beraneka ragam.
• XSLT (Extensible Stylesheet Language Transformations ) adalah sebuah bahasa berbasis-XML untuk transformasi dokumen XML. Walaupun proses merujuk pada transformasi, dokumen asli tidak berubah melainkan dokumen XML baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya digunakan untuk merubah skema XML ke halaman web atau dokumen PDF.
• Objek XMLHttpRequest untuk melakukan pertukaran data secara asinkron dengan peladen (server) web. Beberapa kerangka-kerja Ajax dan dalam beberapa situasi, objek IFrame digunakan selain objek XMLHttpRequest untuk melakukan pertukaran data dengan peladen web.
• JSON (JavaScript Object Notation) yaitu format pertukaran data komputer yang ringan dan mudah. Keuntungan JSON dibandingkan dengan XML adalah pada proses penterjemahan data menggunakan Javascript. Javascript dapat menterjemahkan JSON menggunakan built-in procedure eval().

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 halam dengan pembuatan/manipulasi objek dokumen menggunakan javascript.Klien mengirimkan data dalam format XML/JSON kepada server dan mendapatkan data dari server berupa XML/JSON. Data XML/JSON kemudian diolah untuk memanipulasi objek dokumen menggunakan DOM dan javascript.
• Parsial rendering. Pada teknik ini UI dan behaviour tidak diproses di klien melainkan diproses di server. Klien menerima UI dan behaviour kemudian melakukan rendering pada bagian halaman tertentu.

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.

1. Membuat Permintaan HTTP (HTTP Request)

Untuk membuat permintaan HTTP kepada server menggunakan JavaScript, diperlukan sebuah class yang menyediakan fungsi-fungsi ini. Pada Internet Explorer tersedia objek ActiveX yang disebut XMLHTTP. Pada Mozilla, Safari, Opera dan beberapa peramban lain, menerapkan sebuah class Javascript objek XMLHttpRequest yang mendukung method dan properties objek Microsoft ActiveX.

Untuk membuat instance (objek) class lintas-browser (cross-browser), dapat dilakukan dengan:

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest ();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
Catatan: kode di atas hanya sebagai ilustrasi saja. Kode tersebut merupakan versi paling sederhana untuk membuat instance XMLHttp. Untuk penggunaan secara nyata dapat lihat di bagian 3 artikel ini.

Beberapa versi browser Mozilla tidak bekerja dengan baik jika respon dari server tidak mengandung header mime-type XML. Untuk memenuhi kebutuhan ini, panggil method untuk mengganti/menambahkan header yang dikirim oleh server.

http_request = new XMLHttpRequest();
http_request overrideMimeType('text/xml');

Setelah itu, buat fungsi untuk mengolah setelah data diterima dari server berdasarkan permintaan yang dibuat sebelumnya. Tahap ini, daftarkan fungsi JavaScript yang menangani respon dari server. Setting properties onreadystatechange objek dengan nama fungsi Javascript yang disiapkan untuk mengerjakan proses respon.

http_request.onreadystatechange = namaFungsi;

Perlu dicatat bahwa tidak ada tanda kurung setelah nama fungsi dan tanpa parameter yang dilewatkan. Selain memberikan nama fungsi, dapat juga digunakan teknik JavaScript dalam pendefinisian fungsi (tanpa nama) saat program berjalan (run-time) -- yang disebut fungsi anonymous -- dan mendefinisikan tindakan untuk melakukan proses, seperti berikut:

http_request.onreadystatechange = function() {
// do the thing
};

Selanjutnya, setelah deklarasi dan segera setelah menerima respon, kemudian buat permintaan. Panggilmethod open() dan send() dari klas permintaan HTTP seperti kode berikut:

http_request.open('GET', 'http://www.example.org/somefile', true);
http_request.send(null);

• Parameter panggil pertama dari open() adalah method permintaan HTTP GET, POST, HEAD atau method lain yang didukung oleh server. Gunakan huruf kapital sebagaimana standar HTTP. Untuk informasi lebih lanjut mengenai method permintaan HTTP dapat dilihat pada spesifikasi W3C.
• Parameter kedua adalah URL dari halaman yang diminta. Demi keamanan, panggilan tidak dapat dilakukan pada halaman domain pihak ketiga. Pastikan untuk menggunakan nama domain yang pasti pada semua halaman jika tidak ingin mendapat error 'permision denied' ketika melakukan panggilan open().
• Parameter ketiga diset ketika permintaan adalah asinkron. Jika diset TRUE, eksekusi fungsi JavaScript akan berlanjut walau tanggapan dari peladen belum sampai. Ini adalah A dalam AJAX.

Parameter untuk method send() dapat berupa sembarang data untuk dikirim ke server saat mengirimkan permintaan POST. Data harus dalam format query string, seperti:

name=value&anothername=othervalue&so=on

Catatan bahwa jika ingin mengirim (POST) data, ganti tipe MIME permintaan menggunakan bari berikut:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Bila tidak, server akan mengabaikan data yang dikirim.

2. Penanganan Respon Server

Ingat bahwa ketika permintaan dikirim, fungsi JavaScript harus telah disediakan untuk menangani respon.

http_request.onreadystatechange = namaFungsi;

Apa yang seharusnya dikerjakan oleh fungsi ini. Pertama, fungsi untuk memeriksa status tanggapan. Jika status memiliki nilai 4, berarti bahwa seluruh tanggapan peladen telah diterima dan siap dilanjutkan proses berikutnya.

if (http_request.readyState == 4) {
// everything is good, the response is received
} else {
// still not ready
}

Berikut adalah daftar nilai status readyState

• 0 (tidak diinisialisasi)
• 1 (dalam proses memuat)
• 2 (telah dimuat)
• 3 (interaktif)
• 4 (lengkap)

Berikutnya adalah pemeriksaan kode status dari respon HTTP server. Daftar kode status respon HTTP dapat dilihat di situs W3C. Pada contoh kali ini hanya digunakan status 200 yaitu respon OK.

if (httpRequest.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}

Setelah semua status permintaan diperiksa dan kode status HTTP telah ada respon, data respon dari server dapat diolah. Terdapat dua pilihan untuk mengakses data.

• httpRequest.responseText -- akan mengembalikan respon berupa teks string
• httpRequest.responseXML -- akan mengembalikan respon berupa objek XMLDocument object yang dapat diakses dengan fungsi DOM JavaScript

3. Contoh Sederhana

Tulis bagian program menjadi satu permintaan HTTP sederhana. JavaScript akan meminta sebuah dokumen HTML yaitu test.html yang hanya mengandung tulisan "I'm a test" dan kemudian memanggil alert() dengan isi dari berkas test.html

Contoh AJaX

taken from: diskusiweb.com

".. Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML .."

http://www.adaptivepath.com/publications/essays/archives/000385.php

AJaX disebut pertama kali oleh James Garrett pada februari 2005 saat mengomentari layanan Google Suggest dan Google Maps. Di Adaptive Path, tempat James bernaung, teknologi yang dipakai layanan Google tersebut disebutnya dengan AJaX, kira-kira adalah kependekan dari Asynchronous Javascript and XML. AJaX adalah bagaimana James dan filosofinya menamai tekniknya itu. Kepopuleran teknik AJaX ini mendorong munculnya teknik-teknik pelengkapnya (framework), seperti xajax, injax, pajax, bajax, nglunjax, nanjax, nurun, kojax, kopajax, rujax dan teman-teman sekolahnya yang lain.

Jauh sebelum James dan AJaX nya, Microsoft mengawali teknologi agar aplikasi desktopnya dapat berkomunikasi dengan web dan demikian sebaliknya. Sebuah API (komponen/toolkit) untuk web application developer pun diberikan, disebut XMLHTTP. Mozilla dan developer browser lainnya termasuk Microsoft MASING-MASING kemudian mengembangkan jenis API ini, yang kini dikenal umum sebagai XMLHttpRequest. Artikel paling tua yang saya tahu tentang XML HTTP Request object dibuat pada bulan april 2002.

Jadi apakah AJaX ini? AJaX adalah teknik mendayagunakan API. Umumnya teknik AJaX ini unggul dibanding RIA tools lain karena dukungan cross-browser dan mempunyai kelengkapan metode request seperti put, head, delete, post, get, xml data, dll.Karena berbahan dasar API, setiap browser tidak dapat dipastikan mempunyai API yang mana, dan juga tidak bisa digeneralisir behaviour dari masing-masing API.

Acara Visitasi

Tim asesor yang dipercaya Dikti untuk melakukan proses visitasi di prodi TI STMIK IGM adalah Dr. Ir. Rila Mandala, M.Eng. (ITB) dan Ir. Agus Buono, M.Si., M.Kom. (IPB).
Dr. Rila tiba lebih dahulu, sekitar pukul 18.30 WIB, sedangkan Pak Agus baru tiba di Bandara pukul 21.30 WIB, karena beliau menyempatkan diri untuk mengajar terlebih dahulu.

Pagi hari, tanggal 17 Mei proses visitasi berlangsung dari 08.00 hingga 19.30 WIB dengan memverifikasi 48 butir dalam borang dan 5 indikator kinerja kunci dalam portfolio institusi. Setelah proses visitasi selesai para asesor diajak 'relaks' untuk menikmati keindahan sungai musi dan jembatan ampera di waktu malam. Para asesor menikmati santap malam mereka di warung Legenda, yang merupakan warung terapung di atas aliran sungai musi Palembang.

Sayangnya, saya tidak dapat menemani para asesor karena saya harus bangun subuh pada keesokan harinya. Salah satu asesor (Agus Buono) harus sudah di bandar udara jam 5 subuh pada keesokan harinya, tanggal 18 Mei 2008. Acara visitasi selesai.

Akreditasi TI

Siang ini, situasi di jurusan sudah santai. Semua keperluan untuk akreditasi telah dipersiapankan sesuai dengan Borang. Sore nanti, bapak-bapak asesor akan dijemput di bandara. Beliau berangkat dengan pesawat Garuda dan berangkat dari Jakarta pukul 17.30 WIB, sehingga diperkirakan akan tiba di Bandara Sultan Mahmud Badarudin II sekitar pukul 18.30 WIB.

Proses visitasi sendiri akan berlangsung pada hari Sabtu, 17 Mei 2008. Beliau akan menginap di Quality Hotel Daira, dekat dengan kampus STMIK IGM. InsyaAlloh nanti sore bersambung :-)