METODE ASYNCHRONOUS JAVASCRIPT AND XML (AJAX)

Makalah Seminar

DIAJUKANKAN UNTUK MEMENUHI TUGAS MATA KULIAH

SEMINAR PENDIDIKAN ILMU KOMPUTER

OLEH :

ASEP SUFYAN TSAURI

NIM 056798

PROGRAM STUDI PENDIDIKAN ILMU KOMPUTER

FAKULTAS PENDIDIKAN MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS PENDIDIKAN INDONESIA

2008

LEMBAR PENGESAHAN

MAKALAH SEMINAR

“METODE ASYNCHRONOUS JAVASRIPT AND XML”

Dosen Pembimbing,

Yudi Wibisono, M.T.

ABSTRAKPekembangan teknologi internet mendorong manusia untuk beralih dari

aplikasi desktop menjadi menggunakan aplikasi berbasis web, hal ini merupakan bukti

dari pergeseran kultur masyarakat menjadi masyarakat yang membutuhkan informasi

yang lebih cepat. Namun, aplikasi berbasis web dengan metode tradisional belum

sepenuhnya dapat menggantikan aplikasi desktop, dengan alasan kecepatan akses,

interaktifitas dan kemudahan pemakaiannya.

Asynchronous Javascript and XML (AJAX) merupakan suatu metode

pemrograman web yang menjadi jawaban dari permasalahan “jurang pemisah” antara

aplikasi desktop dan aplikasi berbasis web selama ini. Dengan AJAX aplikasi web

dapat dijadikan seolah-olah menjadi aplikasi desktop. Hal ini disebabkan karena dengan

metode AJAX, pertukaran data antara klien dan server hanya dilakukan pada data yang

diperlukan saja.

Metode AJAX bukan merupakan teknologi baru, namun merupakan

kesatuan dari teknologi dan standar pemrograman web yang sudah ada sebelumnya,

diantaranya xHTML, DOM, Javascript dan XmlHttpRequest. Ide utama AJAX adalah

memindahkan sebagian besar interaksi ke sisi klien, dengan berbasiskan Javascript dan

request HTTP.

Kata kunci : AJAX, Aplikasi Berbasis Web, XmlHttpRequest

BAB IPENDAHULUAN

A. LATAR BELAKANGKemajuan teknologi internet medorong manusia beralih untuk menggunakan

aplikasi berbasis web, hal ini pun membawa pengaruh terhadap perkembangan teknik-

teknik dalam membangun halaman web. Awalnya, web bersifat statis yang artinya web

tidak dapat berubah ketika mengakses pada waktu yang berbeda. Kemudian, muncul

web dinamis yang dapat menampilkan isi yang berbeda ketika mengakses pada waktu

yang berbeda pula.

Perkembangan web dinamis membawa kemajuan yang besar terhadap teknik

pemrograman web. Namun terkait dengan kebutuhan yang terus berkembang pula,

pengguna menginginkan aplikasi yang lebih interaktif, lebih cepat dan mudah

digunakan seperti aplikasi desktop yang biasa mereka gunakan, sehingga diperlukan

suatu metode baru dalam pemrograman web untuk memecahkan permasalahan tersebut

dengan suatu metode baru, salah satu diantaranya Asynchronous Javascript and XML

disingkat AJAX.

AJAX adalah suatu teknik pemrograman berbasis web untuk menciptakan

aplikasi web lebih interaktif dan dinamis. Tujuannya adalah memindahkan sebagian

besar interaksi pada komputer server ke komputer klien, melakukan pertukaran data

dengan server di belakang layar, sehingga web tidak harus dibaca ulang secara

keseluruhan setiap kali seorang pengguna melakukan perubahan.

Hasil dari makalah ini berupa pemaparan detail mengenai Asynchronous

Javascript and XML sebagai teknik pemrograman web, sehingga dapat meningkatkan

interaktifitas dan kecepatan akses dari produk yang dihasilkannya. Makalah ini

memberi kontribusi pengetahuan berupa metode pemrograman web, selain itu pula ini

juga memberikan kontribusi praktis bahwa penerapan metode ini dapat dijadikan

arahan dalam proses pengembangan web dinamis yang lebih interaktif, cepat dan

mudah.

BAB IIASYNCHRONOUS JAVASCRIPT AND XML (AJAX)

A. ASYNCHRONOUS JAVASCRIPT AND XML (AJAX)

1. DEFINISI AJAX AJAX diperkenalkan oleh Jesse James Garret dari Adaptive Path pada tahun

2005. Ia mendeskripsikan bagaimana mengembangkan web yang berbeda dengan

metode tradisional. Ia memublikasikan sebuah artikel berjudul “AJAX : A New

Approach to Web Applications”. Pada artikelnya, Garret yakin bahwa aplikasi web

dapat menutup jurang pemisah antara web dengan aplikasi desktop selama ini.

(Jesse James Garrett, 2005) mendefinisikan AJAX bukan sebagai teknologi

baru dalam pemrograman web, tetapi merupakan gabungan teknologi pemrograman

web yang sudah ada sebelumnya, yaitu XHTML dan CSS, DOM, XML,

XMLHttpRequest dan Javascript.

Pengembangan web secara tradisional bekerja secara synchronously

(langsung), antara aplikasi dan komputer server. Setiap kali melakukan link atau

melakukan operasi “submit” pada form. Caranya, browser mengirim data ke server,

server merespon dan seluruh halaman di-refresh.

Aplikasi web yang bekerja dengan AJAX bekerja secara asynchronously

(tidak langsung), yang berarti mengirim dan menerima data dari pengguna ke server

tanpa perlu memanggil kembali seluruh halaman, melainkan hanya melakukan

pergantian pada bagian web yang hendak diubah. Penggunaan AJAX mulai populer

ketika digunakan oleh Google pada tahun 2005.

AJAX bukanlah bahasa pemrograman baru, tetapi merupakan metode baru

penggunaan standar yang telah ada. Dengan AJAX aplikasi web menjadi lebih baik,

yaitu menjadi lebih cepat dan menambah user-friendly serta lebih interaktif.

Dengan menggunakan Javascript, AJAX dapat mengirimkan dan menerima

data antara web server dan web browser. Teknik yang dimiliki AJAX akan bergantian

http(s) transport

Server-side Systems

Browser ClientUser Interface

Web Server

Datastores, backend processing, legacy

systems

HTTP Request

HTML + CSS data

bertukar data dan me-reload ulang seluruh halaman. Hal ini merupakan perbedaan

mendasar model AJAX dengan model tradisional.

Melalui AJAX, Javascript dapat dikomunikasikan secara langsung dengan

server menggunakan objek Javasript XMLHttpRequest. Objek Javascript ini dapat me-

trade data sebuah web server tanpa harus me-reload halaman web.

AJAX mengguanakan asynchronous data transfer (pada HTTP request)

antara browser dan web server, yang memperbolehkan halaman web memanggil bit

yang kecil atau seluruh informasi dari server. Teknik AJAX membuat aplikasi web

menjadi kecil, cepat dan lebih user-friendly.

2. MODEL TRADISIONAL

Model tradisional disini maksudnya adalah model pemrograman web yang

sering digunakan tanpa AJAX. Pertama, browser membuat sebuah HTTP request

dikirim ke server.

Gambar 1 : Arsitektur Model Tradisional Pemrograman Web

Browser Client

Server-side Systems

User Interface

Ajax Engine

Web and / XML server

http(s) transport

Datastores, backend, processing, legacy

systems

Javascript callHTML + CSS data

HTTP request

XML Data

Pada model ini, server mengirimkan respon berisi seluruh halaman termasuk

header, logo, navigasi, dan lain-lain. Ketika mengklik Next maka akan menampilkan

halaman baru lagi (artinya header, logo, footer dikirim ulang) dan seterusnya akan

mengirimkan data halaman baru lagi disetiap diminta request dari pengguna.

Halaman seperti ini tidak masalah ketika data yang ditampilkan tidak

memerlukan respon cepat. Namun, akan menjadi masalah jika pengguna menginginkan

respon yang cepat, misalnya ketika dipilih drop-down tertentu maka data yang

ditampilkan berubah menurut nilai dari drop-down.

3. MODEL AJAXAJAX berkomunikasi dengan server tanpa harus memanggil kembali semua

halaman. Konsep ini berbeda dengan aplikasi web sistem tradisional. Dalam model

AJAX, aksi dari sisi klien dibagi menjadi dua bagian, yaitu layer user-interface dan

layer AJAX.

Gambar 2 : Arsitektur Model AJAX

Ketika pengguna mengklik sebuah link atau mengirimkan sebuah form maka

input tersebut akan ditangani oleh layer AJAX dan diinteraksikan dengan server,

kemudian meng-update pengguna interface (UI). Jadi, dalam AJAX, interaksi UI

secara logika terpisah dengan interaksi jaringan.

Pendekatan yang digunakan AJAX adalah bagaimana mengirimkan jumlah

data yang kecil dari dan ke server atas request dari pengguna. Model aplikasi web

tradisional di mana browser akan merespon sendiri atas inisialisasi request, memproses

request dari web server. Dalam AJAX terdapat layer yang diberi nam “AJAX Engine”

untuk menangani komunikasi. “AJAX Engine” adalah sebuah Objek Javascript atau

fungsi yang dipanggil ketika informasi dibutuhkan dari server.

Proses yang dilakukan mesin AJAX adalah menerima respon dari server,

melakukan parsing data dan melakukan sedikit perubahan untuk keperluan

menampilkan informasi. Jika dibanding dengan model aplikasi web tradisional maka

pengguna interface diubah lebih cepat dan pengguna mampu melakukan pekerjaannya

dengan cepat.

Beberapa hal penting untuk menggambarkan AJAX :

Layer AJAX tidak memerlukan komunikasi dengan server (contohnya validasi form

karena dapat ditangani sepenuhnya oleh sisi klien)

Oleh karena request antar layer AJAX dan server berupa bagian kecil dari informasi

(tidak komplit satu halaman) maka sering digunakan untuk interaksi dengan basis

data sehingga waktu render dan waktu pengiriman menjadi pendek

Layer UI secara langsung bergantung pada respon server sehingga pengguna dapat

melanjutkan interaksi dengan sebuah halaman selama aktivitas dikerjakan di

background. Berarti, untuk beberapa interaksi, waktu tunggu pengguna hampir tidak

ada.

Komunikasi antar halaman dan server tidak selama memerlukan AJAX untuk

mengubah perubahan UI. Contoh, beberapa aplikasi menggunakan AJAX untuk

notifikasi dengan halaman, tetapi tidak melakukan apapun terhadap respon dari

server.

4. TEKNOLOGI DI BALIK AJAXTeknologi AJAX di dalamnya meliputi beberapa komponen, yaitu :

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. XHTML digunakan

untuk membuat halaman web dan dokumen lain-lain yang dapat ditampilkan dalam

sebuah browser. XHTML merupakan standar W3C. 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.

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 Ahax 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 kenyataannya, semua teknologi dapat digunakan untuk AJAX, tetapi

hanya tiga yang dibutuhkan, yaitu HTML/XHTML, DOM dan Javascript. XHTML

diperlukan untuk menampilkan informasi, sedangkan DOM diperlukan untuk halaman

XHTML tanpa di-reload ulang.

Javascript dibutuhkan untuk komunikasi client-server, sementara manipulasi

DOM untuk me-update halaman web. Teknologi lain digunakan agar AJAX lebih

bagus, tetapi agar lebih powerfull maka AJAX dapat digabungkan dengan aplikasi

pemrograman di sisi server seperti PHP, JSP atau .NET.

5. TEKNIK PENERAPAN AJAXTeknik AJAX memungkinkan pengembang web membuat halaman agar

pengguna tidak lagi menunggu untuk melakukan aksi selanjutnya (seperti terjadi dalam

model tradisional), yang berarti memungkinkan komunikasi ke server setiap waktu.

AJAX memiliki beberapa teknik untuk berkomunikasi. Masing-masing teknik memiliki

keuntungan dan kelemahan sehingga sangat penting untuk memilih teknik mana yang

harus digunakan. Teknik-teknik tersebut diantaranya adalah Hidden Frame atau iFrame,

HTTP Request, Cookie. Dari ketiga teknik tersebut yang akan dibahas adalah teknik

HTTP request.

a. Penjelasan Teknik HTTP Request

Dalam Javascript standar, jika akan memperoleh informasi dari basis data

atau file dalam server, atau mengirimkan informasi pengguna ke server akan

menggunakan form HTML dengan metode GET atau POST. Pengguna mengklik

tombol “Submit” untuk mengirimkan atau memperoleh informasi, menunggu respon

dari server, kemudian halaman baru akan di-load sebagai hasil.

Metode HTTP Request memanfaatkan ActiveX Object (IE) atau Objek

Javascript XMLHttpRequest (Mozilla/Firefox, Safari, Opera). Objek ini akan

melakukan post-back ke server dan menerima respon balik berupa data (bukan

halaman). Data yang didapat dari server kemudian diolah di klien untuk ditampilkan ke

halaman.

Oleh karena server mengembalikan halaman baru dengan pengguna lebih

dahulu mengirimkan input maka aplikasi web akan berjalan lambat. Dengan AJAX,

Javascript akan mengomunikasikan secara langsung ke web server menggunakan Objek

Javascript XMLHttpRequest.

HTTP Request, sebuah halaman web dapat meminta request atau

memperoleh respon dari web server tanpa me-reload halaman web. Pengguna masih di

halaman yang sama. Dan script akan bekerja di background sehingga pengguna tidak

melihat kerjanya.

Browser Client Server-side Systems

Data Exchange

XMLHttpRequest

User Interface

Web Server

Datastore

XMLHttpRequest callback()

HTTP Request

XML Data

Javascript call HTML +

CSS Data1

2 3

4

5

Gambar 3 : Teknik HTTP Request

XMLHttpRequest adalah metode yang banyak digunakan AJAX untuk

berkomunikasi karena memiliki dua fitur yang unik. Pertama adalah mempunyai

kemampuan me-load isi data baru tanpa mengubah seluruhnya dan ini merupakan hal

yang berbeda dibanding dengan cara konvensional (model tradisional). Fitur kedua

adalah memperbolehkan Javascript melakukan pemanggilan secara asynchronous.

b. Contoh Penggunaan Teknik HTTP Request

Gambar 4 : Fungsi GetXmlHttpObject

Keterangan :

Fungsi GetXmlHttpObject, berfungsi untuk membuat objek XmlHttpRequest di browser (dengan beberapa tipe browser), yang selanjutnya akan objek ini akan digunakan untuk fungsi lain.

Gambar 5 : Fungsi ShowMember

Keterangan :

Fungsi showMember, berfungsi untuk me-update tabel yang berisi daftar member,

namun dengan memanfaatkan fungsi GetXmlHttpObject diatas, sehingga proses update

tabel bekerja di belakang layar. Jadi proses antara Ajax Layer dengan server terdapat

pada fungsi ini, yaitu dengan memanggil proses di member.php.

C. CONTOH PENGGUNAAN AJAX DALAM BEBERAPA PRODUK

Pada saat ini sudah sangat banyak pemanfaatan AJAX dalam berbagai

aplikasi berbasis web, karena AJAX adalah pendorong utama lahirnya generasi web 2.0.

Beberapa produk aplikasi yang sangat memberikan gambaran bahwa aplikasi tersebut

menggunakan AJAX. Beberapa contoh tersebut diantaranya adalah :

1. Google Docs, adalah aplikasi yang dikembangkan oleh Google Inc. untuk

melakukan operasi pembuatan, pengubahan sampai dengan pengemasan dokumen

secara online.

2. Facebook, merupakan aplikasi web yang berupa aplikasi social networking

(Jejaring sosial).

3. Meebo, adalah aplikasi berbasis web untuk digunakan dalam aktifitas chatting

yang biasanya menggunakan aplikasi berbasis desktop seperti Yahoo!Messenger

dan Pidgin.

Selain produk yang telah menjadi sebuah aplikasi siap pakai, saat ini pula

telah banyak berkembang produk yang merupakan tools yang dapat digunakan sebagai

pengembangan aplikasi berbasis AJAX, produk-produk ini biasanya disebut dengan

istilah Framework.

Adapun beberapa framework yang populer saat ini diantaranya :

1. Google Web Toolkit (GWT)

2. Prototype

3. JQuery

4. MooTools.

6. KELEMAHAN AJAXAJAX merupakan metode baru dalam pengembangan aplikasi berbasis web selain

memiliki karakteristik yang unggul seperti diungkapkan sebelumnya, namun AJAX

tidaklah sempurna, tetap masih memiliki kelemahan-kelemahan. Diantaranya adalah :

1. AJAX tidak Search Engine Friendly, hal ini disebabkan karena produk yang

berbasis AJAX cenderung menggunakannya untuk content real-time update,

sedangkan Search Engine (mesin pencari), akan kesulitan me-crawl content

seperti itu. Maka, untuk web yang membutuhkan crawling dari Search Engine

disarankan untuk tetap menggunakan model tradisional.

2. Kompatibilitas. AJAX tidak didukung oleh beberapa browser, khususnya

browser-browser lama, sehingga aplikasi berbasis AJAX tidak dapat dijalankan

dalam browser-browser lama tersebut.

3. Menguras Bandwidth. Karena beberapa aplikasi AJAX melakukan auto-update,

maka meskipun aplikasi tidak digunakan dalam jangka waktu yang lama tetap

mengurangi bandwidth.

4. Keamanan data. Karena prinsip AJAX adalah memindahkan sebagian besar

proses di server ke klien, hal ini menimbulkan celah baru dalam keamanan data,

sehingga perlu diputuskan untuk beberapa proses penting untuk tetap

menggunakan metode tradisional.

BAB IIIPENUTUP

A. KESIMPULAN

Asynchronous Javascript and XML (AJAX) bukan merupakan teknologi

baru, tetapi merupakan kesatuan dari teknologi dan standar pemrograman web yang

telah ada sebelumnya. AJAX diciptakan untuk menjadikan aplikasi berbasis web dapat

menjadi lebih interaktif, cepat dan mudah digunakan.

AJAX dibandingkan dengan model tradisional memiliki beberapa

perbedaan, diantaranya dengan adanya Ajax Engine yang menjadi perantara antara client

dengan server, sehingga tidak seluruh permintaan harus diproses di sisi server. Selain

itu, Ajax engine juga melakukan pertukaran data dengan server dilakukan di belakang

layar, sehingga client dapat melakukan permintaan lain selama permintaan sebelumnya

masih diproses di server.

Namun, AJAX bukan tanpa kekurangan. AJAX memiliki beberapa

keterbatasan, diantaranya tidak search engine friendly, kompatibilitas (tidak didukung

oleh beberapa browser versi lama), menguras bandwidth, dan alasan keamanan data.

DAFTAR PUSTAKA

Crane, Dave. Ajax in Action. Manning. 2006.

Holdener, Anthony T. Ajax: The Definitive Guide. O’Reilly. 2008.

"Ajax: A New Approach to Web Applications".

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

http://id.wikipedia.org/wiki/AJAX

http://www.masykur.web.id/category/AJAX.aspx

http://www.w3schools.com/Ajax/