Anda di halaman 1dari 18

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.


ABSTRAK
Pekembangan 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 I
PENDAHULUAN

A. LATAR BELAKANG
Kemajuan 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 II
ASYNCHRONOUS 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
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.

HTTP
Datastores,
User
Request
Web
CSS Interface
Server
backend
HTML +
http(s)
data
Browser Gambar 1 : Arsitektur Model Tradisional
processing, legacy
transport
Client
systems Pemrograman Web

Server-side
Systems
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 AJAX
AJAX 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.
HTML
Web +Ajax
CSS
Javascript
HTTP
XML data
Datastores,
User
and Interface
/Engine
request XML
backend,
server
Datacall
http(s)
Browser
processing, legacy
transportClient
systems

Server-side Systems

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.
1. TEKNOLOGI DI BALIK AJAX
Teknologi 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.

1. TEKNIK PENERAPAN AJAX


Teknik 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.

Gambar 3 : Teknik HTTP Request


XMLHttpRequest
Javascript
HTTP
5XMLHttpRequest
4
3
2
1 XML
HTMLUser
Datastore
Request
+ Data
Interface
CSSBrowser
WebServer-side
Server
callback()
Data
call Client
Systems

Data
Exchange

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.
1. KELEMAHAN AJAX
AJAX 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 III
PENUTUP

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/