Jerrypeter Ajax

BerkenalandenganAJAX
JerryPeter
Jerry.peter@gmail.com
http://www.ruangkecil.or.id
Lisensi Dokumen:
Copyright 2003-2007 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus
atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin
terlebih dahulu dari IlmuKomputer.Com.
Istilah AJAX (Asynchronous JavaScript And XML) dalam pengembangan web menjadi populer
padabeberapatahunbelakanganini.AJAXinisendiribukanmerupakanbahasapemrograman
baru, AJAX hanya merupakan sebuah teknik pemanfaatan object XMLHttpRequest dengan
javascript untuk berkomunikasi dengan server secara Asynchronous, dengan pemanfaatan
object XMLHttpRequest ini kita dapat membuat proses berjalan secara background atau
bekerja dibelakang layar sementara user dapat tetap berinteraksi dengan halaman web yang
ada.PemanfaatantehnikAsynchronousinijugalahyangtelahmendorongpengembanganweb
menjadilebihkayaatau banyakyang menulisnyadenganistilah pengembanganRichInternet
Application(RIA)atauWEB2.0
Pendahuluan
AJAXpertamakalidiperkenalkanolehJesseJamesGarrettpadatulisannyayangberjudulAJAX:
ANewApproachToWebApplications.JesseJamesmemberiistilahAJAXuntuksingkatandari
AsynchronousJavaScriptAndXML,namunpadaperkembangannyadatayangdikomunikasikan
secaraAsynchronoustidaklahharusberupaXMLdata,kitamengunakanformatdatalainuntuk
dikomunikasikansecaraAsynchronousdenganserversepertiPLAINTEXTFILE,HTMLDATAatau
jugaberupaSWFdata(Flashfile).
PadaartikeinikitaakanmembahasdanbekenalandenganpemanfaatantehnikAsynchronous
denganmengunakanobjectXMLHttpRequestyangdibuatdenganJavascript.
Komunitas eLearning IlmuKomputer.Com

1
SejarahsingkatAJAX
Tehnik komunikasi Asynchronous dengan server sendiri pertama kali dikembangkan oleh
microsoft pada tahun 1997, kemudian pertama kali XMLHttpRequest Object diperkenalkan
padaIE5(circa1998) dankemudiandipergunakansecaraluaspadaOutlookwebaccess.Jesse
JamesGarrett'skemudianmemberikanistilahAJAXuntuktehnikAsynchronousinipadasalah
satu tulisannya di tahun 2005. Dan hingga saat ini telah banyak yang mengimplementasikan
tehnikinidalampengembanganweb,sebagaicontohpengunaanAJAXdalamwebapplication
bisadilihatpadabeberapalinkberikut:
z GoogleMap
z Flickr.com
z gmail.com
z googlesugest
z yahoo.com
danmasihbanyaklagicontohlainnyayangdapatditemukanpadaaplikasiwebsaatini.
TIPS
Sebelummemulaimembacalebihlanjutsebaiknyapastikanuntukmendownloadfilecontoh
source.zipyangjugadisertakandalamilmukomputer.com.Filetersebutadalahfilefilesource
contohyangakankitagunakandalamarttikelini.
SetelahselesaimendownloadfiletersebutbuatlahsebuahfolderLATIHANdidalamkomputer
anda dan extract isi file contohsource.zip tersebut kedalamnya, nantinya kita akan
mengunakan filefile dalam folder LATIHAN tersebut untuk mencoba contohcontoh dalam
artikelini.
*Berikutnya setelah selesai menyiapkan folder LATIHAN sebaiknya mulailah membuat kopi
panassebagaitemanselamamembacadanmencobaartikelini
*langkahinibersifatoptional
BERKENALANDENGANAJAX
Sebelum membahas panjang lebar tentang scripting dan coding, kita berkenalan dahulu
dengan apa yang disebut dengan AJAX, siapa sebenarnya AJAX tersebut dan bagaimana

2
kelakuannya.
AJAXbukanmerupakanbahasapemrogramanbaru,namunhanyasebuahistilahuntuktehnik
pemanfaatanJavascriptdalammengontrolclassobjectXMLHttpRequestuntukberkomunikasi
denganserverkemudianmerefresh/mengupdatecontentyangadadalamhalamanwebtanpa
melakuan Reload keseluruhan halaman web seperti pada metode Tradisional sebelumnya,
AJAXsendirimerupakansingkatandari"AsynchronousJavaScriptAndXML".
Asynchronous&Synchronous
Bagaimana AJAX bekerja? dan mengapa pemanfaatan AJAX ini membawa istilah baru pada
pengembanganwebsehinggamunculistilahWEB2.0?danadabeberapaistilahlainyangjuga
dapatditemukandenganmenanfatanAJAXsepertiRichinternetaplication(RIA).
DarisingkatanAJAXsebelumnyaditemukanistilahAsynchronous,sekarangkitabahassedikit
dahulutentangistilahtersebutdalampengembanganweb.JikaadatehnikAsynchronousmaka
juga terdapat tehnik Synchronous, apa sih perbedaan kedua tehnik tersebut dalam
pengembanganweb?Berikutsedikitgambaranya.
Agar lebih mudah dipahami saya bahas dengan sedikit gambar berikut untuk proses
SYNCHRONOUSdalampengembanganwebyangtelahlamadigunakansebelumnya.
Gambar1
(Synchronousproses)
Saat user berinteraksi dengan sebuah halaman web terdapat banyak pilihan link yang dapat
ditemukan, dan saat link tersebut di click maka halaman web tersebut akan melakukan

3
komunikasidenganservermelaluiinternetuntukmemintaproseskeserver(sendRequest)
Selamaservermelakukanproses,userakanmenungguhasilprosestersebut.
Setelahserverselesaimelakukanprosesyangdimintamakaserverakanmengembalikanhasil
prosesyangakanditampilkanpadaclientwebbrowser.
Dalamprosessynchronousiniusermelakukanpermintaanproses(requestprocess)keserver
dan menunggu hingga server mengembalikan hasil proses yang di minta, umumnya hasil
prosesdariservermerupakansebuahhalamanwebbaruyangditampilkanpadawebbrowser
user.
Pemanfaatan tehnik Asynchronous dengan Javascript ini dalam pengembangan web ini lebih
dikenaldenganistilahWEB2.0(baca:webtwopointO).DengantehnikprosesAsynchronous
kitadapatmembuatsebuahaplikasiweblebihkayaataubanyakyangmenulisdenganistilah
Rich internet aplication (RIA), kita dapat membiarkan user untuk tetap berinteraksi dengan
halaman web yang ada selama proses request dilakukan dan selama server belum
mengembalikanhasilprosesyangdiminta.Dansaathasilprosestelahselesaikitahanyaperlu
mengupdate data halaman web yang telah ada, berikut gambaran dari proses kerja
Asynchronoustersebut:
Gambar2
(Asynchronousproses)
User berinteraksi dengan linklink yang ada untuk meminta proses ke server, proses yang
diminta akan dikirimkan secara background ke server, selama server belum mengembalikan
datahasilproses,userdapattetapbekerjadenganhalamanwebyangadasebelumnya.
Setelahserverselesaimelakukanproses,hasilprosestersebutakandikirmkankembalikepada

4
webbrowser,saatdatayangdikirimkanservertelahditerimaolehwebbrowserusermakadata
tersebutditampilkanpadahalamanwebyangtelahadasebelumnya.
Disini terlihat semua proses komunikasi dengan server dilakukan secara background atau
mungkinbisadikatakansemuaprosesdilakukanBehindtheScene:)
XMLHttpRequestObject
Untuk dapat mengembangkan aplikasi web dengan tehnik AJAX ini kita perlu meng
kombinasikanbeberapahalberikut:
z
Javascript untuk membuat object XMLHttpRequest yang kita gunakan untuk

berkomunikasidenganserversecarabehindthescene.
DOM(DocumentObjectModel),hasilprosesyangditerimaakankitatampilkandengan
memanipulasiobjectDOMyangtelahkitapersiapkansebelumnyauntukmenampilkan
datahasilprosesyangdiberikanserver.
XML (eXtensible Markup Language) format data yang dikembalikan oleh server, data
XMLinisiapdibacadanditampilkanuntukmengupdatecontentpadahalamanweb.
secarasederhanakitaakanmemanfaatkanbeberapakombinasidiatasuntukmembuataplikasi
webdengantehnikAJAXini,namunkitamasihdapatmengembangkannyalebihlanjutsetelah
mengetahuiproseskerjadaritehnikAJAXini.
KelebihanutamaAJAXsendiriterletakpadapemanfaatanclassobjectXMLHttpRequestuntuk
berkomunikasidenganWebServersecarabackgrounddalammelakukanrequest.
Saat ini terdapat banyak aplikasi web browser, dan yang agak sedikit menyebalkan adalah
karenamasingmasingbrowsermempunyaistandartdancaraberbedauntukmembuatobject
XMLHttpRequestini.
Untuk dapat berjalan dengan baik pada semua browser kita perlu menyiapkan beberapa
kondisi untuk mendeteksi web browser yang digunakan oleh user, dan kemudian membuat
objectXMLHttpRequesttersebutsesuaiwebbrowseryangdigunakan.
Saatinisetidaknyaada5webbrowseryangbanyakdigunakan(Firefox,Mozilla,IE7,IEsebelum
versi7,OperadanjugaSafari),berikut pembuatanobjectXMLHttpRequest denganjavascript
padamasingmasingwebbrowsetersebut:
z UntukmembuatclassobjectpadabrowserFirefox,Safari,Mozila,Opera.
oAJAX=newXMLHttpRequest();
z
UntukmembuatclassobjectpadabrowserIE7

5
oAJAX=newActiveXObject('MSXML2.XMLHTTP');
z
UntukmembuatclassobjectpadabrowserIEversilama
oAJAX=newActiveXObject('Microsoft.XMLHTTP');
Dari 3 kemungkinan diatas kita akan menyiapkan sebuat sebuah function untuk pembuatan
object XMLHttpRequest dengan mendeteksi web browser yang digunakan oleh user, berikut
functionjavascriptlengkapnya:
functioncreateRequest(){
varoAJAX=false;
try{
oAJAX=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{

oAJAX=newActiveXObject("Microsoft.XMLHTTP");
}catch(e2){

oAJAX=false;
}
}
if(!oAJAX&&typeofXMLHttpRequest!='undefined'){
}
if(!oAJAX){
alert("ErrorsaatmembuatXMLHttpRequest!");
}else{
alert("XMLHttpRequestsuksesdibuat!");
}
returnoAJAX;
Function createRequest() diatas akan mengembalikan object XMLHttpRequest jika berhasil

dibuat. Pada bagian awal function akan dibuat deklarasi sebuah variable oAJAX dengan nilai
awalFALSE.
varoAJAX=false;

6
Setelah membuat deklarasi object oAJAX, script berikutnya mencoba membuat object
XMLHttpRequestuntukIE7.
try{
}
Jikaterjadikegagalanatauerrordalampembuatanobject,makapersiapanantisipasierrorakan
dijalankandanmencobamembentukobjectdenganscriptIEversisebelumnya.
catch(e){
try{

}catch(e2){

oAJAX=false;
}
}
Jika pembuatanobjectmasihgagalmakasetelahoAJAXakantetapdalam kondisiFALSE, dan
dapat dipastikan selesai block TRY ... CACTH diatas web browser yang digunakan bukan IE.
Maka selanjutnya kita mencoba membuat object XMLHttpRequest untuk Firefox, Mozilla,
OperaatauSafari.
}
Bagian script diatas akan memeriksa terlebih dahulu status object oAJAX, jika masih dalam
kondisiFALSEatauundefinedmakaprosespembuatanakancobadilakukandenganpembuatan
objectuntukFirefox,Mozilla,OperadanSafari.
Bagian script berikutnya hanya akan menampilkan message Alert apakah object
XMLHttpRequesttelahberhasilterbentukatautidak.
if(!oAJAX){
}else{
}
Jika hingga akhir function object XMLHttpRequest belum terbentuk, kemungkinan besar web
browseryangdigunakanbukankelimayangkitasebutkansebelumnya.

7
Sekarang mari kita coba function diatas dalam sebuah file HTML untuk mencoba membuat
objectXMLHttpRequest.PertamabuatlahsebuahstrukturfileHTMLdenganeditoryangbiasa
anda gunakan dan copy paste semua script dibawah ini untuk mengantikan script yang ada
didalamnya.
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="ContentType"content="text/html;charset=iso88591"/>
<title>AJAXDemo1</title>
<scriptlanguage="javascript">
varoAJAX=false;
try{
}catch(e){
try{
}catch(e2){
oAJAX=false;
}
}
}
if(!oAJAX){
}else{
}
returnoAJAX;
}
</script>
</head>
<bodyonload="javascript:createRequest();">
HalamaninimemangilfunctionpembuatanclassobjectXMLHttpRequest
<br/>JikagagalataupunberhasilakanditampilkanAlertmessage.
</body>
</html>

8
Contohscriptdiatasjugadisertakandalamfilesourcecode.zipyangdapatdidownloaddari
ilmukomputer.com.
Setelah selesai membuat file tersebut cobalah buka file tersebut pada sebuah web browser
maka akan ditampilkan ALERT message jika object XMLHttpRequest telah berhasil dibentuk
sepertigambar1dibawahini.
Gambar3
(MembuatobjectXMLHttpRequest)
SetelahberhasilmembuatobjectXMLHttpRequest,selanjutnyakitacobamemanfaatkanobject
tersebutuntukberkomunikasisecaraAsynchronousdenganserver.
Untuk berkomunikasi dengan server dan merespon hasil yang dikembalikan oleh server kita
akan menfaatkan bebera Method, Event dan Property dari object XMLHttpRequest, berikut
beberapahaltersebutyangakankitagunakan:
z Open(method)
z onreadystatechange(event)
z readyState(property)
z responseText(property)
z Send(method)
OPENMethod
MethodOPENiniakankitagunakanuntukmembukakomunikasirequestkepadaserveruntuk
melakukanpermintaanproses,syntaxlengkapnyaadalahsebagaiberikut:
(XMLHttpRequestObject).open(<Type_request>,<url_file>,<async_status>);
Type_status =statusprosesyangdilakukan(GET/POST)
url_file =alamaturl/fileyangakandirequestkeserver
async_status =statusasynchronous(TRUE/FALSE)
ONREADYSTATECHANGEEvent
Eventberikutdapatkitamanfaatkanuntukmengetahuistatusstatushasilrequestkitakepada
server,saatterjadiperubahanstatusrequestyangkitamintaeventiniakandijalankan.

9

ONREADYSTATEProperty
Propertyberikutakanberisiflagstatusrequest,untukmengetahuiperubahanstatusdisinikita
memanfaatkaneventOnreadystatechangeyangdijelaskansebelumnya,setiapkalipropertyini
berubah event Onreadystatechange akan dijalankan, sehingga kita hanya perlu memeriksa
setiap perubahan status pada pada event Onreadystatechage. Berikut beberapa status yang
adadalampropertyini:
z 0:uninitialized>Openstatusbelumdijalankan
z 1:loading>Statusrequestbelumdijalankan
z 2:loaded>Statusrequestsudahdikirimkan,danmenunggurespondariserver.
z 3:interactive>Respondariserversedangdalamprosesdownload.
z 4:completed>Respondatadariservertelahselesaididownload.
RESPONSETEXTProperty
Property berikut akan berisi data hasil pengembalian dari server jika telah diterima oleh
browser.
SENDmethod
Methodinilahyangkitagunakanuntukmengirimkanrequestdatakepadawebserver,method
OPEN sebelumnya hanya untuk membuka jalur komunikasi dengan server. Pada proses SEND
inilahkomunikasirequestdikirimkankepadaserver,berikutsintakslengkapnya:
(XMLHttpRequestObject).send();
Berikut contoh function untuk melakukan komunikasi kepada server dengan memanfaatkan
objectXMLHttpRequest.
functionrequestContent(){
oRequest=createRequest();
varurl="dataLoad.html";
//Bukakomunikasidenganserver
oRequest.open("GET",url,true);
//menunggurespondariserver
//jikasudahdidapatrespondariserver,makahasilresponditampilkan
oRequest.onreadystatechange=function(){

document.getElementById("divContent").innerHTML=
"<divalign='center'>MenungguResponserver</div>";
if(oRequest.readyState==4){
//bacadatarespondariserver
varresponse=oRequest.responseText;
document.getElementById("divContent").innerHTML=response;

10
}
}
oRequest.send(null);
}
Pada bagian awal function akan coba dibuat object XMLHttpRequest dengan memanfaatkan
functioncreateRequest()yangkitabahassebelumnya,jikaberhasilmakahasilobjecttersebut
akanditampungkedalamsebuahvariableobjectyangdiberinamaoRequest.
BagianscriptberikutnyaadalahdeklarasialamatURLyangakandirequestkeserver,disinikita
akanmemintaservermemprosesfiledataLoad.html.
Bagian script berikutnya adalah proses request yang kita lakukan kepada server dengan
memanfaatkanmethodOPENpadaobjectXMLHttpRequest.
Selanjutnya kita menyiapkan sebuah function yang akan dijalankan setiap kali nilai variable
ReadyState berubah, kita dapat memeriksa perubahan tersebut melalui event
onreadystatechangekarenaeventiniakanselaludijalankansetiapkaliterjadiperubahanpada
variableReadyState.
SepertidijelaskansebelumnyanilaipadavariableReadyStatedapatberisiantara(0,1,2,3atau
4),saatnilaivariablereadyState=4berartisemuadatahasilresponyangdikirimkanolehserver
telah diterima dengan selamat sampai di web browser, selanjutnya adalah tugas kita untuk
memanfaatkandatatersebut.Padacontohdiataskitamemampilkandatahasilrespontersebut
kedalamDIVAREAyangkitatelahpersiapkan.

response;
}
}

11
UntukmenampilkandatahasilresponserverinikitamemanfaatkaninnerHTMLdariDIVAREA
yangtelahkitaberiID=divContentsebelumnya.
INNERHTMLINFO
berikut sedikit penjelasan tentang innerHTML yang digunakan diatas, innerHTML fnction
untunkmengambilnilai/valueyanggberadadiantaraTAGPEMBUKA&TAGPENUTUP,contoh:
<div>innerHTMLdisini</div>
<span>innerHTMLdisini</span>
UntukdapatmenuliskandatapadainnerHTMLsuatutagkitaperlumemberiIDpengenalpada
TAGtersebut,dankemudianmemangilIDtersebutdanmenuliskandatadidalamnya.
SelamastatusreadyStatebelumbernilai4ataucompleted,makastatusinnerHTMLpadaDIV
AREAyangkitapersiapkansebelumnyadiisidenganpesanMenungguResponserver.
Contoh sederhana ini kita hanya berikan status menunggu tersebut berupa flat text, namun
sebenarnyakitadapatmengantinyadenganimagesfile,flashfileatausebagainyadisinisesuai
keperluanagarlebihfancydanmenarik.
PadacontohdisinikitajugahanyamemeriksastatusreadyState==4,ataustatusdimanaserver
telah memberikan respon dan respon tersebut telah selesai diterima oleh web browser, jika
diperlukan kita dapat membuat pemeriksaan status readyState dan menampilkan pesan
berbedauntukmasingmasingstatusreadyState.
Untuk memcoba penjelasan panjang lebar diatas buatlah file dan beri nama sesuai dengan
keinginananda,dankemudianisikanscriptdidalamnyaseperticontohberikutini:
(Padacontohsourcecodeyangdisertakanfileinidiberinamacontoh2responText.html)
<head>
<title>AJAXDemo1</title>
varoAJAX=false;
try{

12
}catch(e){
try{
}catch(e2){
oAJAX=false;
}
}
}
if(!oAJAX){
}
returnoAJAX;
}
document.getElementById("divContent").innerHTML=response;
}
}
//Sendtherequest
}
</script>

13
<styletype="text/css">
<!
body,td,th{
fontfamily:Verdana,Arial,Helvetica,sansserif;
fontsize:11px;
color:#006699;
}
>
</style>
</head>
<body>
<tablewidth="100%"border="0"cellspacing="0"cellpadding="3">
<tr>
<td>
PemanfaatanclassobjectXMLHttpRequestuntuk
berkomunikasidenganserver<br/>
<ahref="#"onclick="javascript:requestContent();">
ClickdisiniuntukloadData</a>
</td>
</tr>
<tr>
<td>
<divid="divContent"></div>
</td>
</tr>
</table>
</body>
</html>
Dan buat juga sebuah file lain dan beri nama sesuai keinginan anda , file ini merupakan file
datayangakandirequestdariserver.IsikanscriptberikutpadafiledataLoad.htmltersebut:
(PadacontohsourcecodeyangdisertakanfileinidiberinamadataLoad.html)
<head>
<title>UntitledDocument</title>
<!
body,td,th{

14
fontsize:11px;
color:#006699;
}
.table{
fontsize:11px;
fontstyle:normal;
lineheight:normal;
fontweight:normal;
fontvariant:normal;
texttransform:none;
color:#006699;
textdecoration:none;
backgroundcolor:#FFFFEA;
border:1pxsolid#0099CC;
}
>
</style>
</head>
<body>
<tablewidth="500"border="0"cellpadding="3"cellspacing="0"class="table">
<tr>
<td><strong>FiledataLoad.html</strong><br/>
ApapunisicontentdarifileiniakandiloaddanditampilkanpadalokasiDIVcontentyangdi
tuju.<br/>
<br/>
Fileyangdiloadinibisaberupafilestatisbiasa,ataupunfileberisicontentyangdiproses
terlebihdahuluolehserver.</td>
</tr>
</table>
</body>
</html>
Contohscriptdiatasjugadisertakandalamfilesourcecode.zipyangdapatdidownloaddari
ilmukomputer.com.
FiledataLoad.htmlyangditampilkandisinihanyanampilkansebuahpesansederhanasaya
sebagaicontohawal,padacontohinikitahanyasedikitmendemonstrasikanpengunaanobject
XMLHtmlRequestdalammelakukanprosesAsynchronousdenganserver.
Untukmencobacontohdiatasletakankeduafiletersebutpadasatufolderyangsama,
kemudianbukafiledemo1.htmlpadawebbrowserhasilnyaakansepertigambar2dibawahini.

15
Gambar4
(RequestdatadenganobjectXMLHttpRequest)
Setelahdatadiatastampilpadawebbrowsercobalahclicklinkyangadadidalamnya,dan
setelahdiclickprosesrequestakandilakukanuntukmemprosesfiledataLoad.html.Saathasil
prosesselesaiditerimaolehwebbrowsermakasecaraautomatisdatatersebutakan
ditampilkanpadaDIVAREAyangkitapersiapkandibawahnya.Berikutgambarhasilproses
setelahwebbrowsermenerimadatadariserver.

16
Gambar5
(Hasilresponyangditampilkan)
Semuacontohfileyangadadalamtulisaninijugadapatdidownloaddarilinkyangdisertakan
padailmukomputer.com.
XMLDATAFORMAT
Setelah berkenalan dengan AJAX dan mengetahui proses kerjanya dalam melakukan request
Asychronous dan juga menerima respon dari server, sekarang kita akan membahas tentang
XMLdataformatyangdijadikansalahsatubagiandalamsingkatanAJAX.
SedikitpenjelasansingkatXML
z XMLmerupakansingkatandarieXtensibleMarkupLanguage.
z XMLmerupakanTagbasesintaks.
z Masingmasing tag dalam XML diawali dengan tag pembuka dan diakhiri dengan tag
penutup, beberapa artikel atau tulisan juga biasa menyebut TAG sebagai ELEMENT.
NamundalamartikelinisayaakanmengunakanistilahTAGdalammenyebutkannya.
contoh<data>...</data>
z Singlelinetagdapatdibuatdenganmemberikanclosingtagpadabagianakhir/>
contoh:<dataatrr=value/>
z Attributharusdituliskanpadabagiantagpembukadandiapitolehtanda..atau'..'
contoh:<tagNameattr=value>
z Comment dalam XML dbuat didalam tanda <! komentar disini >, bagian comment

17
initidakakandiprosessebagaidatadalamXML
z DataXMLdapatsebagaiDatasourcekecildalammelakukanpertukaraninformasi.
z LebihlengkaptentangXMLbisadilihatpadalinkberikutini:http://www.w3.org
DatadataXMLakanberisiTAG,ATTRIBUT,IDdansebagainya,berikutcontohsebuahdata
dalamformatXMLstruktur.
<xmlid=contactList>
<contact>
<id>1</id>
<nama>JerryPeter</nama>
<phonetype='mobile>08137777777</phone>
<phonetype='rumah'>(021)777777777</phone>
<phonetype='kantor'>(021)8888888888</phone>
<email>jerry.peter@gmail.com</email>
<blog>www.ruangkecil.or.id</blog>
</contact>
</xml>
SemuadatayangadadidalamnyadisimpandalamsebuahTAG,danbeberapaTAGdiatas
memiliATTRIBUT.Padacontohcontohberikutnyakitaakanmencobamembuatpengembalian
dataservermengunakanformatXML,dankemudiankitaakanmembuatsebuahprosesdata
yangdikembalikantersebut
UntukmembacadatadalamformatXMLtersebutkitaakanmengunakanbantuanDOM
(DocumentObjectModel),denganmengetahuitentangstrukturdarisebuatDocumentkita
akanlebihmudahmembacanya.
DOCUMENTOBJECTMODEL(DOM)
UntukmembacadatadatadalamformatXMLkitaperlusedikitberkenalankonsepDocument
Object Model atau biasa disingkat dengan istilah DOM, pada artikel ini saya tidak akan
menjelaskanterlaludetailtentangDOM,kitahanyaakanmembahassedikitsajatentangDOM
ini dan juga bagaimana membaca dan mempergunakannya untuk keperluan kita, mungkin
nantiakansayacobabuatartikelterpisahtentangpembahasanDOMyanglebihdetail.
DOMdisiniadalahstruktrurobjectdarisebuahdocumentXMLyangberisiTAG,ATTRIBUT,ID
dansebagainya.DenganmengetahuistrukturDOMnantinyakitadapatmelakukanpembacaan
datadataTAGdalamXMLtersebut.
JikaterdapatdocumentdengantagHTMLberikut:

18
<html>
<head>
<title>Titleweb</title>
</head>
<body>
<div>datadalambody</div>
</body>
</html>
MakastrukturDocumentObjectModel(DOM)daridatatersebutadalahsepertidiagram
berikutini:
SebuahdatadalamformatXMLakanmemilikiTAG,ATTRIBUTataujugaID,untukmembaca
datadalamformattersebutkitadapatmengunakanfasilitasyangadadalamDOMberikut:
z
z
z
z
z
z
z
getElementsByTagName:digunakanuntukmembacatagberdasarkanNAMA
getElementById:digunakanuntukmembacatagberdasarkanIDyangdiberikan
getAttribute:digunakanuntukmembacatagberdasarkanATTRIBUTE
firstChild:membacaNodearraypertamadaridatatagyangkitabaca
lastChild:membacaNodearrayterakhirdaridatatagyangkitabaca.
data:membacadatatextdaritagataunodeyangkitainginkan
innerHtml:membaca/menuliskandatakedalambagiantag,innerHtmlberbeda
denganpropertydatasebelumnyakarenainnerHTMLdapatberupasebuahstruktur
datayangadadidalamTAGyangambil,dialamnyamungkinakandapatberisitagtag
barulagi,sedangkanpropertydatahanyadapatdigunakanjikadatayangdiambil
berupaText.

19
ContohpengunaannyauntukmembacadataXMLsebagaiberikut:
<xmlid=contactList>
<contact>
<id>1</id>
<nama>JerryPeter</nama>
<phonetype='mobile>08137777777</phone>
<phonetype='rumah'>(021)777777777</phone>
<phonetype='kantor'>(021)8888888888</phone>
<email>jerry.peter@gmail.com</email>
<blog>www.ruangkecil.or.id</blog>
</contact>
</xml>
Untuk membaca data tersebut pertama kita baca struktur XML tersebut kedalam sebuah
variabledengancaraberikut:
vardataXML=document.getElementById(contactList);
PadascriptdiataskitagunakangetElementByIduntukmembacaXMLdatayangtelahkitaberi
ID=CONCACTLIST,setelahscriptdiatasmakavariabeldataXMLkitatersebutakanberisisemua
datadariXMLdenganidconcatList.
BerikutnyakitagunakanvariabledataXMLtersebutuntukmembacatagcontactyangada
didalamnya,caramembacanyakitagunakangetElementsByTagNamesepertiberikut:
varcontact=dataXML.getElementsByTagName("contact")[0];
PengunaannyasamadengangetElementByIdsebelumnya,namunpadacontohdiataskita
tambahkan[0]padabagianbelakangscript,haliniadalahuntukmengacukepadatagconcact
pertamayangditemukandidalamarray.
(Catatan:urutanarraydalamDOMdimulaidari0sebagaiindexpertamadata)
Setelahprosessintakstersebutmakavariabelconcactkitaakanberisidengansemuadata
diantara<concact>...</concact>.
Prosesselanjutnyaadalahprosesmembacadatayangadayangkitatuju,prosespembacaannya
masihmengunakangetElementsByTagName,namunsekarangkitagunakanfirstChild.data
untukmembacadatatextyangadadidalammasingmasingtag.
Prosesscriptuntukmembacanyaadalahsebagaiberikut:

20
varid="ID:"+contact.getElementsByTagName("id")[0].firstChild.data;
varnama="NAMA:"+contact.getElementsByTagName("nama")[0].firstChild.data;
/*MembacadatadalamtagtagPhone*/
varphone1="PHONE1:"+contact.getElementsByTagName("phone")[0].firstChild.data;
varemail="EMAIL:"+contact.getElementsByTagName("email")[0].firstChild.data;
varblog="BLOG:"+contact.getElementsByTagName("blog")[0].firstChild.data;
firshChild.data:digunakanuntukmengambildatatextyangadadidalammasingmasingtag
Padacontohdiatassemuaprosespengambilandatahampirsama,yangberbedasedikitadalah
padaprosespengambilandatadaritag<phone>,dimanadigunakanindexdatayangberbeda
mulaidari0sampai2.Halinikarenatag<phone>terdapat3buahdaridalamdatayangkita
baca,sehinggadatatersebutakanberisiarrayyangmemilikiindex0hingga2.
SebagaitambahanpadaawalmasingmasingdatayangdibacasayacobatambahkanString
yangberisiketeranganmasingmasingdata.
SampaidisinisemuadataTEXTdaridalamTAGyangkitatujutelahkitasimpankedalam
variabelvariabel,namundatatersebutbelumterlihattampilpadalayardocumentkarena
semuanyamasihdisimpandidalammemorikomputer,jikainginmenampilkandatatersebut
kitabisamencobamengunakanALERTjavascriptuntukmenampilkannyasebagaiberikut:
alert("==CONCACT==\n"+id+"\n"+nama+"\n"+phone1+
"\n"+phone2+"\n"+phone3+"\n"+email+"\n"+blog);
Character\nyangdigunakandiatasadalahuntukmenambahkanbarisbaruuntukmasing
masingdatayangakanditampilkan,denganalerttersebutdataakanditampilkandalamsebuah
Popupwindowssepertigambarberikut:

21

Gambar6
(HasilpembacaandataXML)
SetelahberkenalansingkatdenganXMLdanDOMberikutnyakitaakancobakombinasikanhal
tersebutdalamproseskomunikasidenganserverdalamprosesrequestAsynchronous.
MENGUNAKANXMLFORMAT
PengunaanXMLdalamprosesrequestdankomunikasidenganserversebenarnyatidak
berbedadengansebelumnya,yangmenjadiperbedaanhanyapadasaatmembacarespondata
XMLyangdikirimkanolehserver,jikasebelumnyakitamengunakanpropertyresponTextdalam
menerimarespondatadariserver,sekarangkitaakanmengunakanpropertyresponXMLdalam
menerimadataXMLrespondariserver.
DenganmengunakanresponXMLinimakadatayangditerimadapatkitabacasebagaidata
formatXMLdankitadapatmemperlakukandatatersebutsebagaidataXMLdanmembaca
masingmasingtagdenganmengunakangetElementsByTagNameataugetElementsById.
Agarlebihmudahdimengertisayacobabagicontohpembacaantersebutmenjadi3contoh
program,berikut:
1. MEMBACAFORMATDATAXML
PadacontohpertamakitahanyaakanmencobamembacadatadarifileXMLyangada
tanpamelakukanformatingdata
2. MEMBACADATAXML+MANIPULASIDOM
PadacontohkeduakitaakancobamembacadataXMLkemudianmelakukanformating
datatersebutsesuaikeperluan
3. MEMBACADATAXML+MANIPULASIDOM+FORMATINGDENGANCSS
PadacontohterakhirkitaakanmencobamembacadataXML,menampilkandatadan
jugasedikitcontohformatingdatadenganCSS

22

CATATAN:
Untukcontoh2programberikutnyasayatelahmemisahkanblockfunctionpembuatanObject
XMLHttpRequestkedalamfileterpisahyangsayaberinamacreateObject.js,danfiletersebut
akan saya include kedalam masingmasing contoh yang akan dibuat dengan mengunakan
scriptberikut:
<scripttype="text/javascript"src="createObject.js"></script>
Halinidilakukanagarfunctiontersebuttidakdituliskanberulangulangpadasetiapprogram
yangkitabuat.
CONTOH1:MEMBACAFORMATDATAXML
Sekarangkitaakanmencobacontohsederhanamembuatrequestkepadaserverdanmembaca
dataresponXMLyangdikembalikanolehserver,kemudianmenampilkannyapadahalaman
webyangtelahada.
Pada3contohpembacaanformatXMLinikitaakanmencobamembacadataXMLyangberisi
dataphotoBook,dansetelahkitamembacaformatdatatersebutkitamencobamembuat
menjadisebuahphotothumbnaildanmelakukanformatingdenganCSS.
DataXMLyangakandirequestdariserveradalahsepertidibawahini:
<xmlid="photoBook">
<photoList>
<photo>
<id>1</id>
<nama>MOBIL</nama>
<file>photo/car.jpg</file>
<keterangan>keteranganMOBILdisini</keterangan>
</photo>
<photo>
<id>2</id>
<nama>MENARAEIFFEL</nama>
<file>photo/eiffel.jpg</file>
<keterangan>keteranganMENARAEIFFEL</keterangan>
</photo>
<photo>
<id>3</id>
<nama>BUKIT</nama>
<file>photo/hill.jpg</file>
<keterangan>keteranganBUKITdisini</keterangan>
</photo>
<photo>

23
</xml>
<id>4</id>
<nama>KACAMATA</nama>
<file>photo/kacamata.jpg</file>
<keterangan>keteranganKACAMATAdisini</keterangan>
</photo>
<photo>
<id>5</id>
<nama>LONCENG</nama>
<file>photo/lonceng.jpg</file>
<keterangan>keteranganLONCENGdisini</keterangan>
</photo>
</photoList>
PadaformatdataXMLdiatasterdapat5dataphotoyangmasingmasingmemilikiID,NAMA,
FILEPHOTOdanjugaketeranganmasingmasingphoto.
Secarasingkatprosesyangakandilakukanadalahsebagaiberikut:
1. MembuatobjectXMLHttpRequestdenganmenanfaatkanfunctioncreateObject
2. MembukakomunikasidenganservermengunakanOPENmethod
3. MengirimkanrequestdenganSENDmethod
4. MenunggurespondenganmenafaatkanONREADYSTATECHANGEevent
5. MenerimadataygdikirimkandenganmengunakanresponseXML
6. Mengubahdatatag<photo>padafileXMLyangditerimamenjadiarraymengunakan
GETELEMENTBYTAGNAME
7. Melakukanloopingsebanyakarraytag<photo>yangdidapat
8. Membacadetailinformasipdmasing2tag<photo>denganGETELEMENTBYTAGNAME
9. MenampilkandatamasingmasingphotodenganmengunakanINNERHTML
Darilangkah2diatasprosescreateObject,OPEN,SENDdanINNERHTMLtelahdijelaskan
sebelumnyadibagianawalartikel,prosesbaruakankitalakukandisiniadalahmenerimadata
denganresponseXML,danjugamembacadataXMLdengangetElementByTagNamedanjuga
firstChild.data.
RESONSEXML
SaatkitamenerimadatadalamformatXMLkitaharusmengunakanresponseXMLagar
javascriptmengetahuidatatersebutadalahXMLformat,dankitadapatmembacadata
tersebutdenganmengunakangetElementByTagNameataugetElementByID.
SintakspengunaanyatidakberbedadenganresponseTextyangkitagunakansebelumnya,
secaralengkappenulisannyaadalahsebagaiberikut:
Variable=(XMLHttpRequestObject).responseXML

24
SetelahmengunakansintaksdiatasVariableyangkitagunakanakanberisidenganformatdata
XMLyangditerimadariserver,dankemudiankitabisamemprosesnyalebihlanjut.
GETELEMENTBYTAGNAME
FunctioninikitagunakanuntukmembacaTAGTAGXMLyangtelahkitadapatkansebelumnya
denganmengunakanresponseXML,dengangetElementByTagNamekitadapatmembacatag
tagyangkitaperlukandanmengubahnyamenjadisebuaharray.Setelaharrayterbentukmaka
kitadapatmelakukanpembacaanmasingmasingarraytersebutuntukdapatditampilkan.
Sintaksdanpengunaanyaadasebagaiberikut:
Variable=xmlData.getElementByTagName(namatag);
SetelahprosessintaksdiatasVariableyangkitagunakanakanberisidenganArrayyangtelah
dikembalikanolehgetElementByTagName,langkahselanjutnyaadalahmembacasemuaarray
tersebutsecaraberulanguntukditampilkandatanya.
TambahanlanjutanberikutnyaadalahkitaakanmengunakanfirstChild.datauntukmengambil
datadarimasingmasingtagyangada.PengunaangetElementByTagNamedanfirstChild.data
iniadalahbagiandariprosesmemanupulasiDocumentObjectModel(DOM)dataXMLyang
kitaterima.
FunctionlengkapuntukmelakukanprosesrequestkepadaserverdanpembacaandataXML
yangdikembalikanolehserveradalahsebagaiberikut:
oRequest=createObject();
varurl="contohData.xml";
document.getElementById("divContent").innerHTML="";
varxmlData=oRequest.responseXML;
varphotoList=xmlData.getElementsByTagName("photo");
for(vari=0;i<photoList.length;i++){

25
varcurrentPhoto=photoList[i];
varid_=currentPhoto.getElementsByTagName("id")[0].firstChild.data;
varnama_=
currentPhoto.getElementsByTagName("nama")[0].firstChild.data;
varfile_=
currentPhoto.getElementsByTagName("file")[0].firstChild.data;
varketerangan_=
currentPhoto.getElementsByTagName("keterangan")[0].firstChild.data;
vardata_=
"<div>"+id_+":"+nama_+":"+file_+":"+keterangan_+"</div>";
document.getElementById("divContent").innerHTML+data_;
}
//Sendtherequest
}
Untukmencobacontohberikutinibuatlah2file,yangpertamaberisidataXMLphotoBookkita
dengandiberinamacontohData.xmldanyangyangkeduabuatlahsebuahfilehtmlbiasa
dengannamayangcontoh1.html.
UntukfilecontohData.xmlisikandatanyadenganXMLformatdiatas,kemudianuntukfile
contoh1.htmltuliskanscriptberikutdidalamnya:
(padafilecontohsourceyangdisertakandalamilmukomputer.com,scriptberikutdapat
ditemukanpadafilecontoh3responXML.html)
<head>
<title>AJAXXMLdataresponformating</title>
<scripttype="text/javascript"src="createObject.js"></script>

26
//hasilresponakanditampilkanpadaDIVdenganID='divContent'
//alert(oRequest.responseXML);
//alert("count:"+photoList.length);
varid_=currentPhoto.getElementsByTagName("id")[0].firstChild.data;
varnama_=
currentPhoto.getElementsByTagName("nama")[0].firstChild.data;
varfile_=
currentPhoto.getElementsByTagName("file")[0].firstChild.data;
varketerangan_=
currentPhoto.getElementsByTagName("keterangan")[0].firstChild.data;
vardata_=
"<div>"+id_+":"+nama_+":"+file_+":"+keterangan_+"</div>";
document.getElementById("divContent").innerHTML+data_;
//Sendtherequest
}
</script>

27
<!
body{
fontsize:11px;
color:#006699;
}
>
</style>
<linkhref="ajaxexample.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<tablewidth="100%"border="0"cellspacing="0"cellpadding="3">
<tr>
<td>
BerikutcontohmelakukanformatingdataXMLhasilrespondariserver<br/>
PadacontohinihanyaakancobadibacadatadarimasingmasingTAGyangadapadafile
XMLyangditerima<br/>
<br/>
<ahref="#"onclick="javascript:requestContent();">ClickdisiniuntukloadData</a></td>
</tr>
<tr>
<td><divid="divContent"></div></td>
</tr>
</table>
</body>
</html>
SetelahmembuatkeduafiletersebutletakankeduanyapadasebuahFOLDERLATIHANyang
telahdibuatsebelumnya.Kemudiancobalahbukafilecontohcontoh1.htmlpadawebbrowser
danclicklinkterdapatdidalamnya,saatlinkyangadadiclickakanmunculsebuahdatabaru
yangtelahberhasildirequestdariserversepertipadagambar5dibawahini.

28

Gambar7
(Hasilcontohpertama)
PadacontohpertamainikitahanyamencobamembacadataXMLyangadakemudian
menampilkanyakedalamdocumentyangtelahada,semuadatadiperlakukansebagaitext.Jika
dilihatpadatagfileseharusnyakitadapatmenampilkandataimagesphotodarilinkfileyang
ada,padacontohkeduakitaakanmencobamelakukansedikitformatingpadadatatersebut
danmenampilkandataimagesyangadatersebut:
CONTOH2:MEMBACADATAXML+MANIPULASIDOM
BerikutnyakitaakanmencobamembacadatadanjugamemanipulasiDOMdengan
menambahkanstrukturbarudidalamnyasaatdataXMLtelahditerima.
UntukmenambahkanstrukturdatabarupadaDOMyangtelahadakitaakanmengunakan3
functionberikut:
z createElement:menambahkansebuahelement/tagbarukedalamDOMyangtelahada
sintakspenulisannyasbb:
document.createElement("namaTagBaru");
z
appendChild:menambahkandatakedalamstrukturelement/tag

29
<objectDOMaktif>.appendChild(datayangakanditambahkan);
z
CreateTextNode:membuattextnodebarukedalamtag/elementDOM
document.createTextNode(datatextyangakanditambahkan);
Padacontohkeduainikitaakanmelakukanskenarioprosessepertiberikut:
1. MembuatobjectXMLHttpRequestdenganmenanfaatkanfunctioncreateObject
2. MembukakomunikasidenganservermengunakanOPENmethod
3. MengirimkanrequestdenganSENDmethod
4. MenunggurespondenganmenafaatkanONREADYSTATECHANGEevent
5. MenerimadataygdikirimkandenganmengunakanresponseXML
6. Mengubahdatatag<photo>padafileXMLyangditerimamenjadiarraymengunakan
GETELEMENTBYTAGNAME
7. Melakukanloopingsebanyakarraytag<photo>yangdidapat
8. Membacadetailinformasipdmasing2tag<photo>denganGETELEMENTBYTAGNAME
9. Menambahkanbeberapatag/elementbarukedalamDOMuntuksetiaploop
photoBookyangdilakukan
Dariskenarioprosesyangakankitalakukantidakberbedadenganprosessebelumnyapada
contoh1,langkah1sampai8semuanyasama.Perbedaanprosesadalahpadalangkahke9,
dimanasetiapkalikitamelakukanloopprosesdariarrayphotoBookyangadaakan
ditambahkansebuahstrukturDOMbarukedalamdocumentyangtelahada.
PerubahanyangkitalakukanakandibuatpadafunctionrequestContent()yangada,berikut
detaillengkapprosesrequestContect()yangtelahdimodifikasiuntukpembuatanobjectDOM
barudidalamnya.

30

varnewThumb=document.createElement("div");
varnewNama=document.createElement("div");
varnama_=
document.createTextNode(currentPhoto.getElementsByTagName("nama")[0].firstChild.data);
newNama.appendChild(nama_);
varnewFile=document.createElement("div");
varfile_=
"<imgsrc='"+currentPhoto.getElementsByTagName("file")[0].firstChild.data+"'/>";
newFile.innerHTML=file_;
varnewKeterangan=document.createElement("div");
varketerangan_
document.createTextNode(currentPhoto.getElementsByTagName("keterangan")[0].firstChild.
data);
newKeterangan.appendChild(keterangan_);
newThumb.appendChild(newNama);
newThumb.appendChild(newFile);
newThumb.appendChild(newKeterangan);
document.getElementById("divContent").appendChild(newThumb);
//Sendtherequest
}
PerbedanprosespembacaandataXMLinidengancontohsebelumnyaterdapatpadabagian
31
dalamloopproses,dimanaditambahkanpembuatanobjecttagbaru.Masingmasingproses
pembuatantagbarutersebutadalahsebagaiberikut:
PertamadibuatsebuahtagDIVbarudalamsintaksberikut:
KemudianditambahkansebuahtagDIVbaruuntuknamaphotoBook.
BerikutnyadilakukanpembuatantextNodebaruyangberisidatadaritag<nama>yangberada
padadataXMLyangdibaca.
varnama_=
document.createTextNode(currentPhoto.getElementsByTagName("nama")[0].firstCh
ild.data);
KemudiantextNodeyangtelahdibuatditambahkankedalamtagDIVnamayangbarudibuat
denganmengunakanappendChild.
Prosesberikutnyaadalahpembacaandatatagfilephoto,disinikitalangsungmenambahkan
dataphototersebutsebagisourceimageuntuktag<img>.
varfile_="<imgsrc='"+currentPhoto.getElementsByTagName("file")[0].firstChild.data+"'/>";
Untukpembacaandatatagketeranganjugadilakukanhalyangsamadenganproses
penambahandatanamasebelumnya.
varketerangan_=
document.createTextNode(currentPhoto.getElementsByTagName("keterangan")
[0].firstChild.data);
Setelahsemuadatatersebutselesaidibuatmakaselanjutnyamenambahkandatadata
tag/elementbarutersebutkedalamdivContentyangtelahdipersiapkansebelumnya.

32
Sourcelengkapuntukcontohinidapatditemukanpadafilecontoh4responXML.html.
Berikuthasilprosesuntukcontohkeduainisaatdijalankanpadawebbrowser.
Gambar7
(Hasilcontohkedua)

33
CONTOH3:MEMBACADATAXML+MANIPULASIDOM+FORMATINGDENGANCSS
ContohketigainikitaakanmencobamenambahkanaksesorisdenganCSSkedalamhasildata
XMLyangtelahdibacakedalamstrukturDOMbaru.UntukdapatmenambahkanaksesorisCSS
pada setiap tag DIV yang dibuat saat loop proses pembacaan data photoBook, kita perlu
nambahkan class pada masing DIV, kemudian membuat formating CSS untuk masingmasing
classtersebut.
UntukmenambahkanATTRIBUTECLASSpadamasingmasingDIVTAGyangkitabuatsaatloop
pembacaandataphotoBookakandigunakanfunctionsetAttributeyangadapadaDOM.
SintakspenulisanfunctionsetAttributeadalahsebagaiberikut:
<namatags/element>.setAttribute("<nama_Attribute>","<nilai_attribute>");
Pada setiap DIV yang dibuat akan kita tambahkan 2 attribute baru yaitu CLASS dan
CLASSNAME, mengapa harus 2 yang kita tambahkan karena terdapat sedikit perbedaan
penambahanattributeclassinipadawebbrowsermozilla,firefoxdanIE(InternetExplorer).
Proses skenario yang akan dilakukan masih sama dengan proses pada contoh 2, hanya saat
pembuatan tag akan ditambahkan proses pembuataan attribute untuk masingmasing tag
tersbut, berikut function createRequest() lengkap setelah ditambahkan proses penambahan
attributepadamasingmasingtag.

34
newThumb.setAttribute("className","thumbnail");
newThumb.setAttribute("class","thumbnail");
newNama.setAttribute("className","nama");
newNama.setAttribute("class","nama");
varnama_=
document.createTextNode(currentPhoto.getElementsByTagName("nama")
[0].firstChild.data);
newFile.setAttribute("className","photo");
newFile.setAttribute("class","photo");
varfile_=
"<imgsrc='"+currentPhoto.getElementsByTagName("file")[0].
firstChild.data+"'/>";
newKeterangan.setAttribute("className","keterangan");
newKeterangan.setAttribute("class","keterangan");
varketerangan_=
document.createTextNode(currentPhoto.getElementsByTagName
("keterangan")[0].firstChild.data);

35
//Sendtherequest
}
SetelahmenambahkanattributeCLASSkedalammasingmasingtag,selanjutnyakitabisa
membuatpengaturanCSSuntukuntukmasingmasingclasstersebut.Classyangditambahkan
padacontohdiatasadalahsebagaiberikut:
z thumbnail:sebagaiclassdivmasing2thumbnailphotoBook
z nama:sebagaiclassuntukheadernamamasingmasingphotoBook
z photo:sebagaiclassuntukphotoimages
z keterangan:sebagaiclassuntukketeranganyangtampildibawahgambarphoto.
SelanjutnyaterserahpadakeinginanandauntukdesignformatlayoutCSSclasstersebut.
Sourcelengkapuntukcontohketigainidapatditemukanpadafilecontoh5responXML.html
Hasilcontohketigainipadabrowseradalahsebagaiberikut:

36

Gambar8
(Hasilcontohketiga)
MEMBUATAJAXCLASS
PadabagianakhirartikelBERKENALANDENGANAJAXinikitaakanmembuatsebuahAJAXclass
yang nantinya bisa digunakan pada setiap aplikasi kita, setelah membuat class ini kita akan
mencobamembuatsebuahaplikasiPhotoGallerysederhana.
BerikutdesignataugambaranAJAXclassyangakankitabuat:

37

Gambar9
(DesignAJAXclassyangakandibuat)
AJAX class akan tersebut memiliki 12 buah property dan juga 5 buah event, berikut detail
penjelasanrancanganuntukmasingmasingPropertydanjugaMethodyangakandibuat.
(PembuatanclassAJAXiniberdasarkanbukukaryaMathewErrnisse:BuildyourownAJAXweb
application)
Property
Req
objectobjectXMLHttpRequest
url
lokasiURLfile/data
method
Metoderequestyangingindigunakan(POST/GET)
async
tiperequestasynchronous(TRUEatauFALSE)
status
statuserrorresponserver
statusText
texterrorstatusrespon
postData
Datayangakandikirimkankeserver
readyState
Statusrespondariserver
reponseText
BerisihasilresponsejikaTextData.
responseXML
BerisihasilresponsejikaXMLData.
handleResp
Functionhandlerespon
responseFormat Formatrespon

38

Method
init
membuatXMLHttpRequestobject
handErr
functionerrorhandle
abort
membatalkanrequest
doRequest
melakukanrequest
requestProses
membukaprosesrequest
Class AJAX ini akan dibuat kedalam sebuah file javascript yang diberi nama ajaxclass.js, dan
darisemuaMethodyangadapadapengunaanyakitahanyaperluberinteraksidenganmethod
RequestProsessajadenganmengirimkanhalamanyangdirequestdanjugafunctionyangingin
dilakukan saat respon dari server telah diterima, Berikut script lengkap pembuatan class
tersebut:
ajaxclass.js
function ajax() {
this.req = null;
this.url = null;
this.method = 'GET';
this.async = true;
this.status = null;
this.statusText = '';
this.postData = null;
this.readyState = null;
this.responseText = null;
this.responseXML = null;
this.handleResp = null;
this.responseFormat = 'text', // 'text', 'xml', or 'object'
this.init = function() {
if (!this.req) {
try {
// Firefox, Safari, IE7, etc.
this.req = new XMLHttpRequest();
} catch (e) {
try {
// IE Versi lama.
this.req = new ActiveXObject('MSXML2.XMLHTTP');
} catch (e) {
try {
// IE Versi terbaru.
this.req = new
ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
// Gagal membuat object XMLHttpRequest.
return false;

39
}
}
}
}
return this.req;
};
this.doGet = function(url, hand, format) {
var self = this;
self.url = url;
self.handleResp = hand;
self.responseFormat = format || 'text';
self.doReq();
};
this.doReq = function() {
if (!this.init()) {
alert('Gagal membuat XMLHttpRequest object.');
return;
}
this.req.open(this.method, this.url, this.async);
var self = this;
this.req.onreadystatechange = function() {
var resp = null;
if (self.req.readyState == 4) {
switch (self.responseFormat) {
case 'text':
resp = self.req.responseText;
break;
case 'xml' :
resp = this.req.responseXML;
break;
case 'object':
resp = req;
break;
}
self.handleResp(resp);
}
};
this.req.send(this.postData);
};
this.handleErr = function() {
alert('ERROR, browser mengaktifkan pop-up blocker \n'
+ 'Status Code: ' + this.req.status + '\n'
+ 'Status Respon: ' + this.responseText + '\n'
+ 'Status Description: ' + this.req.statusText);

40
};
this.abort = function() {
if (this.req) {
this.req.onreadystatechange = function() { };
this.req.abort();
this.req = null;
}
};
}
Sekarang kita coba mengunakan class tersebut dalam sebuah aplikasi sederhana, contoh
aplikasisederhanainiakanmelakukanrequestproseshello.html,fileyangdirequestinihanya
akanmenampilkanprosessayHellodenganAJAXClass
Filecontohpengunaanclasstersebutadalahsebagaiberikut:
contoh6testclass.html
<html>
<head>
<title>Contoh AJAX</title>
<script language="javascript" src="ajax-class.js"></script>
</head>
<script language="javascript">
var handler = function(str) {
alert(str);
}
</script>
<body>
<script language="javascript">
var oAJAX = new ajax();
oAJAX.doGet("hello.html",handler);
</script>
</body>
</html>
Hello.html
Hello AJAX class!!!
Setelah selesai membuat ketiga file tersebut letakan semua file tersebut pada folder latihan,
kemudian buka file contoh6class.html pada browser, maka file tersebut akan mencoba
membuatobjectAJAXdanmemangilfilehello.html.

41

Gambar10
(HasiltestingclassAJAX)
Setelah berhasil mencoba class AJAX yang baru saja kita buat maka file ajaxclass.js bisa kita
include kedalam setiap project yang ingin mengunakan AJAX proses. Untuk menginclude
sebuahfilejavascriptdigunakanscriptberikutpadabagianawaldocument.
<script language="javascript" src="ajax-class.js"></script>
Padabagiansrckitatuliskanalamatfileyangakandiinclude,jikaberadapadafolderyangsama
denganaplikasiyangmengunakannyamakatidakperludiikutsertakanpathdirectornya.
Dari class AJAX yang ktia buat tersebut sekarang ktia perlu melakukan beberapa hal berikut
untukmengunakannya:
z Includefileajaxclass.jstersebutkedalamfileprojectkita
z Buatlah sebuah function yang akan digunakan untuk memproses data yang telah
berhasildikembalikanolehserver
z Create object AJAX baru dari class ajax yang sudah kita buat, untuk membuat object
ajaxbarudigunakanscriptsepertiberikut:
var oAJAX = new ajax();

z
LakukanrequestprosesdariserverdenganmengunakanmethoddoGetyangadapada
AJAXCLASS,berikutsintakspenulisannya:
oAJAX.doGet(URL,HANDLER);
URL:alamathalamanyangdirequestdariserver
HANDLER:functionyangdijalankansaatdatarespondariservertelahditerima
MEMBUATAJAXSHOUTBOX

42
Setelah mencoba membuat class AJAX, sekarang kita mencoba membuat sebuah program
Shoutbox yang biasa digunakan pada sebuah weblog untuk memberikan fasilitas pada
penunjungmeninggalkanpesanmereka.
Sourceshoutboxinitersediapadafilecontohsource.zipyangdisertakan,dandisinisayahanya
membahas secara global saja cara installasi dan proses masingmasing file yang ada pada
shoutboxtersebut,kitatidakbahasterlaludetailmasingmasingprosesyangadadidalamnya.
ProgramshoutboxinimengunakanPHPdanjugamySQLsebagaidatabasepenyimpanandata,
jadipastikankeduaprogramtersebutsudahterinstallsebelummengunakanprogramshoutbox
yang disertakan. Jika belum memiliki programprogram tersebut sebaiknya gunakanlah
beberapapaketinstallasiyangbanyaktersediaantaralain(XAMPP,appServ,phpTriaddsb).
SPAM:)
UntukprosesinstallasiXAMPPbisacobamembacapanduanyangjugapernahsayatulispada
ilmukomputer.com,untukmendownloadartikeltersebutbisadarilinkberukut:
http://ilmukomputer.com/2007/11/12/xampppaketapachephpdanmysqlinstant/
Jika sudah memiliki programprogram tersebut sekarang kita bisa coba mengunstall program
shoutboxtersebut,berikutlangkahyangperludilakukan:
1. Copy semua folder shoutbox yang ada pada folder latihan kedalam root folder web
server.
2. Buatlah sebuah database MySQL baru dan beri nama sesuai keinginan anda, setelah
database terbentuk berikutnya gunakan script yang terdapat pada file SQL.TXT untuk
membuatstrukturtableshoutboxdidalamdatabaseyangtelahdibuat,prosesiniakan
membuatsebuahtableshoutboxdan1buahrecorduntuktestinghasildata.
3. Langkah berikutnya adalah melakukan setting pada file config.php yang ada pada
foldershoutbox,berikutdatadatayangperludisettingdidalamnya:
$core["DB_HOST"]>diisidengannama/ipdimanadatabaseberada
$core["DB_NAME"]>disidengannamadatabaseyangdibuatpadatahap2diatas
$core["DB_USER"]>NamauseruntukmasukkedalamMySQL
$core["DB_PASS"]>PassworduserMySQL
$core["MAX"]>Jumlahpesanshoutboxygakanditampilkandilayar
$core["PATH_IMAGES"]>Lokasifile2gambar,sebaiknyatidakperludirubah
4. Setelah langkah diatas program shoutbox sudah siap digunakan, cobalah buka file
index.phpdariwebbrowser.Dancobalahtambahkanbeberapadatapesan,saattombol
KIRIM di click data akan automatis muncul dilayar setelah sebelumnya disave pada
database.

43
Gambar11
(AJAXShoutbox)
Padaaplikasishoutboxiniterdapatbeberapafileberikut:
z ajaxclass.js
:Fileberisiclassajaxyangdigunakan
z config.php
:Fileconfigpengaturankoneksidatabase
z corejava.js
:Fileberisikumpulanfungsijavascriptyangdigunakan
z index.php
:Berisifileutamayangmenampilkanshoutbox
z loadData.php
:Fileyangmelakukanprosesmembaca&formatingdatashoutbox
z save.php
:Fileyangmelakukanprosespenyimpanandatasaatdikirim
z shoutbox.css
:FilestyleCSSyangdigunakanuntukpengaturanwarna
Aplikasishoutboxinibebasuntukdigunakannamunmohontidakmembuangbanneryangada
dibagianbawahshoutbox:)

44
PENUTUP
Artikel ini hanya sebagai awal berkenalan sedikit dengan AJAX, disini telah coba kita bahas
tentang pembuatan object XMLHttpRequest dan kemudian proses mengunakannya dalam
melakukan request secara Asynchronous kepada server. Kemudian juga proses menerima
respondariserverbaikberupadataTEXTataupunXML.
HalhaltersebuthanyaawalpemanfaatanAJAXdalammembuataplikasiwebyanglebihkaya
atau banyak orang menyebutnya sebagai pengembangan Rich Internet Application(RIA), dan
darisinijugamunculistilahWEB2.0ataupengembanganwebgenerasikedua.
Dalam WB 2.0 pengembagan aplikasi web bisa menyerupai pengembangan aplikasi dekstop,
dimana kita dapat berinterakasi dan berkomunikasi secara asynchronous langsung dengan
mesinserverpenyediadatadanproses.
Saat ini pengembangan aplikasi dengan menafaatkan AJAX dan object XMLHttpRequest ini
telah jauh berkembang dari saat pertama kali diperkenalkan, dan telah banyak aplikasi atau
framework open source menawarkan pemanfaatan tehnik proses ini. Dari aplikasiaplikasi
open source yang ditawarkan tersebut kita bisa banyak belajar tentang bagaimana mereka
melakukan management. proses dan juga mengembangkan objectobject yang sangat Fancy
danmenarikuntukdigunakan.
Semua telah tersedia diinternet, selanjutnya tinggal bagaimana kita mengatur waktu untuk
mempelajarinya dan juga mengatur ruang yang terbatas dalam otak ini untuk menampung
informasiinformasipengetahuntersebut.
Havenicecodingandlearning

45
RINGKASAN
Daripembahasandiatasberikutsedikitringkasannya:
z AJAXbukansebuahbahasapemrogramanbaru
z AJAXmerupakansebuahtehnikpemanfaatanobjectXMLHttpReguestuntuk
melakukankomunikasiAsynchronousdenganserver.
z IstilahAJAXmerupakansingkatandariAsynchronousJavaScriptAndXML
BerikutlangkahdasarpemanfaatanAJAXdalampengembaganaplikasiWEB
1. BuatobjectXMLHttpRequest
2. MembukakomunikasidenganserverdenganmenafaatkanmethodOPENdari
XMLHttpRequestyangtelahdibuat
3. Menyiapkanfunctionuntukmenerimarespondariserverdenganmenafaatkanevent
ONREADYSTATECHANGE
4. MengisiparameterparameterpadaobjectXMLHttpRequestyangtelahdibuat,
kemudianmengirimkanSENDrequestkepadaserver
BerikutsedikitcatatantentangobjectXMLHttpRequest(PROPERTY,METHODdanEVENT)yang
dapatdigunakanuntukpengembanganpembuatahAJAXClass
METHOD
open()
Membukakomunikasidenganserver
send()
Mengirimkanrequestkepadaserver
abort()
Membatalkanrequest
setRequestHeader()
Mengirimkannilaispesifikuntukheaderygdikirimkan
setResponseHeader()
MenerimaResponheaderdariserver
getAllResponseHeader()
Membacasemuaresponheaderdariserver
PROPERTY
status
Statusdariresponkomunikasidenganserver
statusText
Statusyangdisertakanpadapengembalianrespontext
readyState
StatusstateygberisiFLAGindikatorkomunikasidenganserver
responseText
HasilresponTEXTdatayangdikembalikanolehserver
responseXML
HasilresponberupaXMLdatayangdikembalikaolehserver
NilaipadaXMLHttpRequestreadyStateproperty
0
Object telah dibuat, namun komunikasi dengan server melalui

methodeOPENbelumdilakukan

46
Object telah dibuat, komunikasi dengan server melalui OPEN

method telah dilakukan namun status request SEND belum
dilakukan
Status reqeust dengan SEND method telah dilakukan namun

belumadaresponsyangdiberikanolehserver
Status respon dari server telah diterima berupa responseBody

dan responseText, namun belum semua data yang dikirimkan
diterimaolehclientbrowser
Statusdisaatsemuadatarespondariservertelahditerima
PemanfaatanDOM
z getElementsByTagName:digunakanuntukmembacatagberdasarkanNAMA
z getElementById:digunakanuntukmembacatagberdasarkanIDyangdiberikan
z getAttribute:digunakanuntukmembacatagberdasarkanATTRIBUTE
z firstChild:membacaNodearraypertamadaridatatagyangkitabaca
z lastChild:membacaNodearrayterakhirdaridatatagyangkitabaca.
z data:membacadatatextdaritagataunodeyangkitainginkan
z innerHtml:membaca/menuliskandatakedalambagiantag,innerHtmlberbeda
denganpropertydatasebelumnyakarenainnerHTMLdapatberupasebuahstruktur
datayangadadidalamTAGyangambil,dialamnyamungkinakandapatberisitagtag
barulagi,sedangkanpropertydatahanyadapatdigunakanjikadatayangdiambil
berupaText.
z createElement:menambahkansebuahelement/tagbarukedalamDOMyangtelahada
z appendChild:menambahkandatakedalamstrukturelement/tag
z CreateTextNode:membuattextnodebarukedalamtag/elementDOM
z setAttribute:membuatattributeuntuktag/element
Bahanbacaan
AJAX:ANewApprochToWebApplications
http://www.adaptivepath.com/publications/essays/archives/000385.php
MathewErnisse:BuildyourownAJAXwebapplication
http://www.sitepoint.com/launch/53fc13
Referensi
www.w3c.org
Marini,Joe(2005):DevelopingAJAXaplication
Morgan,Kaufman(2007):UnleashingWEB2.0,fromconcepttocreativity
Babin,Leen(2007):BeginningAjaxwithPHP:FromNovicetoProfessional

47
OPENSOURCEAJAXFRAMEWORK
Dojo:www.dojotoolkit.com
YahooUserInterface:http://developer.yahoo.com/yui/
Adobespry:http://labs.adobe.com/technologies/spry/
Mochikit:http://www.mochikit.com
Qooxdoo.org:http://qooxdoo.org/
Danmasihbanyaklagi,kalauadayangmengetahuiopensourcelainseputarAJAXtolongdi
sharejugainfonya.thanks
BiografiPenulis
JerryPeterSaerang.Lahirdijakarta15Januari1979.Menyelesaikan
studi S1 di Universitas Gunadarma, Jakarta. Dan saat ini dalam
proses menyelesaikan Thesis pada program Studi S2 di Universitas
Gunadarma.
Saat ini bekerja sebagai System Analyst & Software Developer di
sebuahperusahaanFarmasiNasional.
Informasilebihlanjuttentangpenulisbisadidapatmelalui:
Email:jerry.peter@gmail.com
Blog:www.ruangkecil.or.id

48

Jerrypeter Ajax

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Jerrypeter Ajax

Diunggah oleh

Hak Cipta:

Format Tersedia

BerkenalandenganAJAX

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Javascript untuk membuat object XMLHttpRequest yang kita gunakan untuk

Komunitas eLearning IlmuKomputer.Com

Function createRequest() diatas akan mengembalikan object XMLHttpRequest jika berhasil

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

<script language="javascript" src="ajax-class.js"></script>

var oAJAX = new ajax();

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Object telah dibuat, namun komunikasi dengan server melalui

Komunitas eLearning IlmuKomputer.Com

Object telah dibuat, komunikasi dengan server melalui OPEN

Status reqeust dengan SEND method telah dilakukan namun

Status respon dari server telah diterima berupa responseBody

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Anda mungkin juga menyukai