r,*,,*lliffi iill`I

Pengenalan AIAX
Arief Hamdani Gunawan* & Albinur Limbong**
..
r,*,,*lliffi
iill'I*,,
-
u*,u
Abstrak
Ada beberapa orang yang bergurau mengenai Internet sebagai "world wide
waif . Mengapa hal tersebut bisa terjadi? Gurauan atau ungkapan di atas lahir di masa
lalu terutama ketika dengan beberapa aplikasi, web tidak mengalami perubahan yang
berarti. Pada sisi user, mungkin kita sering mengalami, hta mengisi suatu form pada
suatu web, setelah dikirimkan kemudian halaman web hilang, dan terus ditunggu,
akhimya page berganti, kemudhn kita melakukan perbaikan. Hal inilah yang dapat
diperbaiki oleh Ajax melalui dasar komunikasi asinkronus. Dengan Ajax, beberapa tools
pada browser dapat terpengaruh, seperti bukmark dan bck karena teknologi Ajax
dapat secara dinamis mengalihkan sebuah web pge yang sudah di-downlod. Hal
tersebut juga menjadi perhatian, karena walaupun hal tersebut mampu dfawab oleh
Ajax, namun sering dilupakan oleh developer. Tulisan ini merupakan pengantar untuk
mempelajari Ajax, dan berturut-turut akan dibahas mengenai dukungan teknologi
pada Ajax, implementasi Ajax, dan pada bagian aldir diberikan contoh p€mrograman.
Introduction to AIAX
Abstract
There are some people make a joke regarding intemet as'*world wide wait'.
How come? This joke or statement appeared in the past mainly due to the fact that
since with various applications the web did not change significanUy. On user side, we
may often o<perience, we fill in a form on a web, after submitted the web page
disappears, and we keep waiting, finally the page changes, then we do maintenance.
This problem can be solved by Ajax through the fundamental of asynchronous
communication. With Ajax, some tmls on the browsers can be influenced, like
bookmark and back since Ajax technology can dynamically direct a web page that has
been downloaded. This is a @ncern, since atthough this can be answered by Ajax, but
it is often forgotten by a developer. This article is an introduction to study Ajax, and
will be described about technology support on Ajax, Ajax implementation, and at the
last section is given an example of programming.
Jumal TelKa, Volume 2, Nomor 2, Des€mber 2009:
Dukungan teknologi
Ajax merupakan kependekan dari AsYnchronous JavaScript and XML. AJAX merupakan
gabungan dari sejumlah teknologi standard yang sudah populer, yaitu; JavaScripU
XMLHttpRequesU Fxtensible Markup LanguagE (XML); HTML dan Carading Style
Sheets; Document Object Model (DOM); serta Extensible Style sheet Language and
Transformation (XSLT).
JavaScript merupakan bahasa p€rnrograman yang menambahlon dynamic
ripting pada sebuah web pge atau halaman web. Kode tersebut dapat ditanamkan
pada ke dalam untuk memungkinkan suatu page memiliki perilaku baru yang
diinginkan, dan hal ini sering disebut dengan client-side xnpdng. Teknik ini sudah
sangat tua dan hampir setua umur web itu sendiri.
XMlHttpRequest merupakan sebuah object atau sub-set dari kode pada
JavaScript yang dapat menghubungkan dengan server menggunakan protokol HTTP'
Hal ini sangat sangat mendukukung AIAX dalam berhubungan dengan
banyak
browser, beberapa browser yang mendukungnya seperti Mozilla Firefox, Intemet
Explorer 5, Safari, dan Opera 7.6.
HTML dan Cascading Style Sheets mengontrol apa yang dilihat oleh
w& Fge Web develonrdapat menggunakan JavaScript untuk
membuat perubahan dinamis menjadi antarmuka visual dengan pemrograman HTML
element dan CSS styles.
pengguna pada suatu
Document Object Model (DOM) merupakan sebuah model yang
pge sebagai suatu kumpulan dari obyekobyek yang
saling terkait yang dapat dimanipulasi secara dinamis, bahkan setelah pengguna
merepresentasikan sebuah web
wg[ page distrukturkan sebagai suatu
pohon
yang
dengan cabang-cabangnya. Setiap
sampai
terdiri clari titik akar
hirarki
HTML element direpresentasikan dengan tiUk atau cabang yang dapat diakses oleh
selesai men-dawnlud p5ageterge;but. Tampilan
JavaScript.
Extensible Style sheet Language and Transformation (XSLT) merupakan
suatu templating technology unb.rk mengontrol penampilan dari informasiyang berasal
dari XML format.
Implementasi
Ajax sudah banyak dipakai mulai dari skala individu sampai dengan perusahaan besar.
Maps, Coogle Mail, sebuah kolaborasi yang
Contoh aplikasi dapat diliha pada
dikenal dengan Zmbra, Rollyo (http://www.rollyo.com/) personal search engine tool
@le
dan aplikasi peta di Swiss (lihat: http://map.search.ch/indsr.en.html)' Wikipedia
mempublikasikan penggunaan Ajax
ini
pada:
http://en. wikipedia.org/wiki/List-of-websites-using-Ajax.
Untuk mempelajari Ajax, yang dapat disiapkan adalah; browftr, Java
Derelopment Kit, Apache Ant,
&n
application #ruer.
Brower yang dibutuhkan adalah browser yang mendukung lavaScripL
seperti Intemet Explorer, Safari, Mozilla, Opera, Firefox.
10
PengsElan AIAX
Java Development Kit dibutuhkan sebagai )ava compiler dan libnies, dalam
hal ini bisa digunakan Java 5 or Java 6.
Apache Ant dapat di-downlud secara gratis di http://ant.apache.org. Selain
Apache Ant dapat juga menggunakan Ivlaven.
Appliation eruer yang digunakan sebagai host Java servlets dan dapat
berkomunikasi dengan HTTP. Contoh yang populer untuk application eruer adalah
Sun's JDK 1.5, Apache Tomcat 5.0, JRun, JBoss, Resin, Weblogic, WebSphere, dan
Glassfish. Tomcat
http /fi
:
a
dapat di-downlud secam gratis di website ini:
karta. apache. orgltomcav.
Contoh pemrograman sederhana
Pemrograman sederhana dapat kita lakukan dengan nelibatkan HTML code,
JavaScript, dan CSS code. FIIML code, JavaScript, dan CSS code tersebut dapat clibuat
dengan text editor seperti notepad, kemudian disimpan sesuai dengan format yang
diperlukan.
Contoh program HTML code adalah sebagai berikut:
<html>
<head>
<link rel,="stylesheet" type:"text/css" href:"style. css">
Ianguage="Javascript" src:"ajax. js"></SCRfPT>
<tj,tle>Ajax On Java</titLe>
<SCRIPT
</head>
<body onload:"focusIn( );">
<h1> A.JAX CHARACTER DECODER </hl>
<h2> Press a key to find its val-ue. </h2>
<tabl-e>
<tr>
<td>
Enter Key Here ->
<input type="text" id="key" name="key"
onkeyup:"convertToDecimal ( ) .' ">
</td>
</Lr>
</tab1e>
<br />
<tabLe>
<t.r>
<td colspan:rr5rr style:"border-bottom:solrd bl-ack 1px;">
Key Pressed:
<input type="text" readonly id="keypressed">
</td>
</tr>
<tr>
<td> Decima] </td>
</Lr>
11
Jumal TelKa, Volurne 2, Nomor 2, Desernber 2009:
<Lr>
<td><input type="text" readonly id="decj-mal"></Ld>
</Lr>
</tabl-e>
</body>
</htm1>
Code tersebut dapat disimpan rnenjadi indo(.html.
Contoh progmm Javascript adalah sebagai berikut:
var req,'
function convertToDecimal( ) (
var key = document.getEl-ementByld("key"),'
var keypressed = document.getElementByld("keypressed"),'
keypressed.value : key.value,'
var url = "/ajaxdecimalcodeconverter/response?key=rr +
escape (key.value);
rf (window.XMLHttpRequest) {
req = new xMlHttpRequest( );
)
(window.Actl-vexobject) t
req : new Activexobject("Ml-crosoft.)0"ILHTTP"
eLse if
);
)
url, true ) ,'
req. onreadystatechange = callback,'
req. open
req.send1nu1l);
]
function callback( )
if (req. readYState=:4 )
if (req.status := 200)
var decimal- = document. getElementByld ( 'decimal-' ) ;
decr-ma].val-ue = req.responseText.'
{
{
{
)
)
clear (
)
,'
)
function clear( ) {
var key = document. getElementByld ( "key"
)
,'
keY. value=" ",'
)
function focusln( )
[
document. getEl-ementByld("key")
.
focus (
);
)
Script tersebut dapat disimpan menjadi aiax.js dengan direKori yang sama
dengan index.html.
t2
Pengenalan AJAX
Contoh program CSS Code adalah sebagai berikut:
body
{
font-famil-y: Arial, Helvetrca, sans-serj.f;
font-size: sma1I,'
text-aIign: center,'
background: #cbdada;
)
#keypressed
width
(
: 3 0,'
border : none,'
)
#key
1
width:2Opx;
paddlng : 0,'
marqin: O ,'
border : none,'
text-aIrgn:1eft
)
hl, h2
(
font-size:.I2O%;
text-align: center;
)
h2(
font-size:110?
)
tab-le, input
(
margin-J.ef t: auto,'
margin-right: auto,'
padding:Opx 10px;
text-a.l-i gn : center,'
color: bf ack,'
text-aIign: center;
background: #a0f6f5;
border:soIid black 1px;
)
rd(
margin: lOpx
1Opx,'
padding: Opx 5px;
border : none,'
]
input {
width:80,'
border: none;
border-top:solid #999999
font-size:80%;
color: #555555,'
1px,'
)
13
Jumal TeIKa, Volurne 2, Nornor 2, Desember 2009:
Code tersebut dapat disimpan menjadi style.css dengan direktori yang sama
dengan inder.html.
Program tersebut dapat dijalankan dengan mernbuka index.html di browser,
dan hasilnya dapat dilihat pada Gambar 1 berikut ini:
.l
tiqx on Java . licrffill lnlernel frglorsl
J
jl d -j
;r--is..a
;f
1!r".,r., @
:i- +
-d
-
ruAx CHIIRACTERDECODER
PrBrLytoltdtr v{r.
lErrtett(.yFlere-;-l
ttyCCb
0!.4
Gambar 1. Contoh Implementasi Ajax
Daftar Pustaka
Olson, S.D., (2007), Ajax on Java, O'Reilly.
Perry, B., (2006), Ajax Hacks, ClReilly.
Powers, 5., (2007), Adding A1ax, O'Reilly.
Wells, C., (2007), fuuing Ajax Applications, O'Reilly.
Zammetti, F.W., (2007), Pnctial
Apress.
t4
Jauaknb{', NM *ipting, and Ajax Projet,