BAB 14 AJAX - JENI Web Programming Bab 14 AJAX
1 4 .1 PEN D AH ULUAN
Hingga saat ini, aplikasi w eb m engikut i alur ar sit ekt ur berikut : sat u – sat unya cara dalam m er epresent asikan cont ent baru ( sebagai cont oh, dalam m erespon int eraksi ant ara user dengan halam an pada aplikasi) dilakukan dengan cara m engirim kan request kepada server dan m enam pilkan halam an baru pada user. Terdapat t eknologi client side script ing ( JavaScript , VBScript , dan sebagainya) yang m em berikan gam baran pada user bahwa m ereka t elah m em buka cont ent baru dengan sebuah click pada t om bol. Nam un, t eknologi script ing t ersebut hanya dapat m em odifikasi cont ent yang t erdapat pada sebuah halam an; t eknologi t ersebut j uga hanya dapat bekerj a t erhadap inform asi yang t elah dikirim kan pada client . Berm acam solusi t elah dibuat sebelum nya, yang bert uj uan unt uk m engubah paradigm a yang ada, nam un beberapa diant aranya bersifat kom ersial ( Microsoft m em iliki sebuah solusi yang hanya berfungsi dengan I nt ernet Explorer) , sulit unt uk diprogram , dan t idak dapat diakses dengan m udah.
Kem udian hadirlah AJAX sebagai penyelesaiannya.
1 4 .2 AJAX
Menyerupai J2EE, AJAX adalah 2 hal yang digabungkan : m erupakan sebuah t eknologi, sekaligus arsit ekt ir pem r ogram an.
1 4 .2 .1 AJAX se ba ga i se bu a h t e k n ologi
AJAX adalah singkat an dari “ Asynchronous JavaScript and XML” , yang dibuat dari serangkaian t eknologi dengan berbagai kem am puan : JavaScript , XML dan sebuah m et hod kom unikasi asinkron ant ara client dan server. 3 t eknologi yang saling berint eraksi : JavaScript m enangkap isyarat , gerak sert a aksi. Sebagaim ana pada sit uasi yang m ungkin t erj adi, Jav aScript m enggunakan j alur kom unikasi pada server ( obj ect JavaScript dengan nam a XMLHt t pRequest ) unt uk m em anggil m et hod yang t ersim pan pada server dan m enggunakan XML sebagai m ekanism e pengirim an dat a. Jika JavaScript pada client t elah m enerim a respon dari server, m aka JavaScript akan m enggunakan kem am puan bawaannya unt uk m em anipulasi st rukt ur DOM halam an unt uk m enam bahkan cont ent yang didapat dari server. Perubahan yang t erj adi pada st rukt ur DOM kem udian dit erj em ahkan oleh browser pada client , sehingga m eningkat kan efek int erakt ivit as pada user.
1 4 .2 .2 AJAX se ba ga i se bu a h Ar sit e k t u r
Pada awalnya AJAX dibuat sebagai sebuah rangkaian dari t eknologi, nam un kem udian AJAX m engalam i perk em bangan. Sebagai cont oh, adanya aplikasi web yang t idak m enggunakan XML dalam m ent ransfer dat a dari client ke server. Cara t ersebut dilakukan dengan m enggunakan obj ect XMLHt t pRequest .
Berdasarkan realit a di at as, beberapa pihak m endefinisikan sebagai paradigm a baru dalam pem rogram an, disam ping t eknologi yang m enyediakan fungsionalit as. Mari kit a bahas lebih m endalam t ent ang arsit ekt ur AJAX. Pengem bang t elah m engem bangkan web program m ing sebelum hadirnya AJAX : act ion dari user yang m em but uhkan dat a dari server dit am pilkan dalam halam an yang digunakan, dim ana dat a request dari user dikirim k an m enuj u server. Set elah m engolah halam an t ersebut , server m enam pilkan halam an baru bagi user yang m engandung hasil dari proses sebelum nya. Perm asalah dari m acam arsit ekt ur t ersebut adalah lam bat dan cukup m em akan wakt u, t erut am a bila dibandingkan dengan aplikasi deskt op. Aplikasi deskt op m am pu m erespon cepat at as request dari user, aplikasi ini t idak m em proses ulang m asing – m asing kom ponen int erface yang akan dit am pilkan sebagai respon.
AJAX m enggunakan arsit ekt ur pem rogram an t ersebut pada aplikasi Web. Daripada m em berikan sebuah halam an penuh pada server dan m endapat kan pula sebuah halam an penuh sebagai hasil operasi, AJAX m engij inkan kit a unt uk m engirim kan request dalam ukuran yang lebih kecil pada server. Halam an yang t erpakai hanya t erm odifikasi unt uk m enam pilkan hasil, bukan t ergant ikan dengan sebuah halam an baru.
Fakt or pent ing yang lain dari arsit ekt ur AJAX adalah request dan response dij alankan secara asinkron : AJAX t idak m elarang user unt uk m elakukan proses lain pada halam an yang dipakai. User dapat m engisi dan m enggunakan area lain pada halam an, sedangkan AJAX bekerj a pada background.
Yang t erakhir, AJAX m engij inkan user unt uk berint eraksi dengan server sebagai respon t erhadap seluruh hal yang dilakukan oleh user. Arsit ekt ur yang ada sebelum nya hanya m engij inkan kit a unt uk berkom unikasi dengan server pada saat user m enekan t om bol at au link yang akan m engirim dat a pada halam an. AJAX m em perbolehkan unt uk m e- request dat a baru dari server dalam bent uk m ouseovers, keypress dan even lain yang dikenali oleh JavaScript .
1 4 .2 .3 Pr ose s ya n g dila k u k a n ole h AJAX
Mari kit a perhat ikan cont oh nyat a yang m enunj ukkan bagaim ana AJAX m em perkaya int erakt ivit as user dan bagaim ana kit a m enggunakannya dalam aplikasi
<html> <head> <title>Registration Form</title> </head> <body>
<H1> Welcome new user! </H1> Please enter your information in the fields below <form action="/submit"> Name : <input type="text" name="name"/> <br/> Address : <input type="text" name="address"/> <br/> City : <select name="city"> <option>Select One from List</option <option value="Quezon City">Quezon City</option> </select> <br/> Zip Code : <input type="text" name="zip" size="4"/> <br/> <input type="submit" value="Submit"/> </form>
</body> </html> Cont oh di at as adalah cont oh sederhana dari form regist rasi. Nam un di sini t erdapat suat u perm asalahan, t idak sem ua user m enget ahui nom or zip code. Kit a gunakan cont oh diat as sebagai t it ik awal perj alanan kit a di AJAX. Akan dikenalkan t eknik penggunaan AJAX yang akan m em buat halam an m engisikan sendiri field zip code berdasarkan Cit y yang dim asukkan oleh user.
1 4 .2 .4 M e n yia pk a n h a la m a n for m .
Pert am a- t am a, kit a harus m em persiapkan HTML yang akan digunakan oleh user. Jika kit a ak an m enggunakan AJAX sebagai respon user input pada field Cit y, perlu dit am bahkan sebuah event list ener pada field Cit y. Akan dit am bahkan j uga at ribut id pada elem en form – hal ini akan m em udahkan pekerj aan kit a.
Menggunakan event list ener pada input field Cit y m erupakan hal yang m udah : hanya perlu m eregist rasikan fungsi JavaScript yang akan dipanggil pada event s.
Dibaw ah ini adalah HTML form yang disem purnakan : ..
Address : <input type="text" name="address"/> <br/> City : <select id=”city” name="city" onchange=”updateZip(this.value)”> <option>Select One from List</option <option value="Quezon City">Quezon City</option> </select> <br/> Zip Code : <input id=”city” type="text" name="zip" size="4"/> <br/> ...
Dengan perubahan diat as, browser akan m em anggil fungsi updat eZip t iap kali user m em ilih value dari daft ar Cit y.
1 4 .2 .5 M e m bu a t se bu a h in st a n ce obj e ct X M LH t t pRe qu e st
Sekarang saat nya m enuliskan kode fungsi updat eZip yang akan m enangani kom unikasi t erhadap server dan m engupdat e value zip. Sebagaim ana yang dibahas sebelum nya, JavaScript m engij inkan server unt uk berkom unikasi dengan m enggunakan sebuah obj ect yang dikenal dengan XMLHt t pRequest .
Perm asalahan berikut nya adalah m em buat obj ect t ersebut . Pem buat an obj ect ini t idak sem udah m enam bahkan baris kode :
var xmlRequest = new XMLHttpRequest();
Kode diat as hanya dapat bekerj a pada Mozilla, FireFox, Safari, Konqueror, Net Scape dan Opera, nam un t idak pada I nt ernet Explorer. I E adalah browser pert am a yang m enggunakan fungsi sem acam ini, nam un dibuat dari propriet ary obj ect Act iveX
( sebagai law an dari JavaScript obj ect ) . Terlebih lagi, m et hod yang digunakan unt uk m em buat XMLHt t pRequest berbeda pada I E 5.0+ dibandingkan dengan versi- versi sebelum nya.
Supaya dapat digunakan oleh browser- browser yang ada, gunakan kode berikut ini :
function createRequestObject() { var xmlRequest; try { xmlRequest = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (error1) { try { xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (error2) { if (typeof XMLHttpRequest != 'undefined') { xmlRequest = new XMLHttpRequest();
} }
} return xmlRequest; }
1 4 .2 .6 M e n ggu n a k a n obj e ct X M LH t t pRe qu e st u n t u k
be r k om u n ik a si de n ga n Se r ve rJika t elah m em buat inst ance obj ect dari XMLHt t pRequest , selanj ut nya obj ect t ersebut dapat digunakan unt uk m em buat fungsi updat eZip. Pada dasarnya, kit a m engirim kan request kepada server berupa input Cit y yang diberikan user. Sebagai resource, kit a dapat m engim plem ent asikan servlet .
<script type=”text/javascript”> var xmlRequest; function updateZip(cityValue) { xmlRequest = createRequestObject(); xmlRequest.open(“GET”,
=” + cityValue); xmlRequest.send(null); }
Terdapat beberapa cara unt uk m enam pung respon dari server. Unt uk m enam pung respon sebagai St ring sederhana, gunakan at ribut responseText . Unt uk m enam pungnya sebagai dokum en XML, gunakan at ribut responseXML. Nam un, value dari at ribut – at ribut t ersebut t idak dapat diakses secara langsung.
I ngat kem bali akronim dari AJAX. A berart i Asynchronous yang berart i seluruh m et hod yang m em buat request pada server t idak m engandung respon dari server langsung set elah eksekusi m et hod. Respon dari server akan t iba dalam wakt u yang t idak dapat dit ent ukan.
1 4 .2 .7 Fu n gsi Ca llba ck
Unt uk m engat asi sit uasi sem acam ini, XMLHt t pRequest m engij inkan kit a unt uk m enggunakan fungsi JavaScript sebagai Callback handler : callback adalah fungsi yang akan digunakan oleh XMLHt t pRequest set elah m enerim a respon dari server.
Dibaw ah ini adalah fungsi JavaScript yang digunakan unt uk m eregist rasi sebuah fungsi dengan nam a processServerDat a sebagai fungsi callback :
<script type=”text/javascript”> var xmlRequest; function updateZip(cityValue) { xmlRequest = createRequestObject(); xmlRequest.onreadystatechange=processServerData; xmlRequest.open(“GET”, =” + cityValue); xmlRequest.send(null); }
Pada saat m enuliskan kode fungsi callback, perhat ikan bahwa event onreadyst at echange m uncul t iap kali t erdapat perubahan keadaan pada obj ect
XMLHt t pRequest . Pada cont oh, kit a hanya ingin m enangani dat a set elah m enerim a respon, m aka dibuat lah st at em ent kondisional unt uk m em eriksa apakah
XMLHt t pRequest pada kondisi yang sesuai :
function processServerData() { if (xmlRequest.readystate == 4) { var data = xmlRequest.responseText; document.getElementById(“zip”).value = data;
} } Dibaw ah ini adalah kondisi – kondisi yang m ungkin t erj adi :
Value readystate Indikasi Uninitialized. Method send() belum dipanggil.
1 Loading. Request sedang dikirim menuju server.
2 Loaded. Respon dari server telah diterima.
3 Interactive. Respon sedang diproses.
Completed. Respon telah diproses. Siap untuk
4 digunakan.
Hal lain yang perlu diperhat ikan pada saat m em buat fungsi callback adalah kem ungkinan error pada server. Kode yang kit a gunakan diat as akan berj alan sebagaim ana fungsinya, diasum sikan j ika t idak ada perm asalahan dari sisi server, nam un kem ungkinan kesalahan selalu akan t erj adi.
XMLHt t pRequest m enyediakan cara unt uk m enent ukan HTTP st at us code yang diber ikan oleh server. Jika kode m enyat akan dalam kondisi 200, ber art i request t elah berhasil diproses : function processServerData() { if (xmlRequest.readystate == 4) { if (xmlRequest.status == 200) { var data = xmlRequest.responseText; document.getElementById(“zip”).value = data; document.getElementById(“zipError”).innerHTML = “”;
} else { document.getElementById(“zipError”).innerHTML = “Error in retrieving ZIP code”;
} }
} Pot ongan kode JavaScript diat as m enggunakan cara yang sederhana nam un sangat berm anfaat unt uk m enam pilkan pesan pada user : diasum sikan bahwa t erdapat elem en HTML ( < div> ) dengan id dari zipError. Proses yang sukses dilakukan dari sisi server akan m em biarkan elem en ini kosong. Sebaliknya, sebuah error pada server akan m enam pilkan pesan kesalahan sesuai yang dit ent ukan pada kode. Sat u hal yang pat ut unt uk diperhat ikan, at ribut innerHTML didukung oleh sebagian besar, nam un t idak seluruh browser. Alt ernat if lain yang lebih kom pat ibel bagi browser adalah sebagai berikut : function processServerData() { if (xmlRequest.readystate == 4) { var zipErrorDiv = document.getElementById(“zipError”); if (xmlRequest.status == 200) { var data = xmlRequest.responseText; document.getElementById(“zip”).value = data; zipErrorDiv.replaceChild(document.createTextNode(“”), zipErrorDiv.childNodes[0]);
} else { zipErrorDiv.replaceChild(document.createTextNode(“Error in retrieving ZIP code”), zipErrorDiv.childNodes[0]);
} }
}
Berikut ini adalah kode lengkap dari halam an yang t elah dibuat :
<html> <head> <title>Registration Form</title> <script type=”text/javascript”> var xmlRequest; function updateZip(cityValue) { xmlRequest = createRequestObject(); xmlRequest.onreadystatechange=processServerData; xmlRequest.open(“GET”, =” + cityValue); xmlRequest.send(null);
} function processServerData() { if (xmlRequest.readystate == 4) { if (xmlRequest.status == 200) { var data = xmlRequest.responseText; document.getElementById(“zip”).value = data; document.getElementById(“zipError”).innerHTML = “”;
} else { document.getElementById(“zipError”).innerHTML = “Error in retrieving ZIP code”;
} }
} function createRequestObject() { var xmlRequest; try { xmlRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (error1) { try { xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (error2) { if (typeof XMLHttpRequest != 'undefined') { xmlRequest = new XMLHttpRequest();
} }
} return xmlRequest; }
</head> <body> <H1> Welcome new user! </H1> Please enter your information in the fields below <form action="/submit"> Name : <input type="text" name="name" id=”name”/> <br/> Address : <input type="text" name="address" id=”address”/> <br/> City : <select id=”city” name="city" onchange=”updateZip(this.value)”> <option>Select One from List</option <option value="Quezon City">Quezon City</option> </select> <br/> Zip Code : <input type="text" name="zip" id=”zip” size="4"/> <div id=”zipError”></div> <br/> <input type="submit" value="Submit"/> </form> </body>
</html>
Berikut ini adalah cont oh im plem ent asi dari pem anggilan resource dari sisi server oleh AJAX :
public ZIPRetrievalServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String city = request.getParameter(“city”); ZIPService service = new ZIPService(); String zipCode = service.getZipForCity(city); response.setContentType(“text/html”); PrintWriter out = response.getWriter(); out.println(zipCode); out.close();
} }