BAB 1 4
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.
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.
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>
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. Dibawah 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();
( 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(); } 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”,
“http://ourServer/ourApplication/getZIPCode?city=” +
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.
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”,
“http://ourServer/ourApplication/getZIPCode?city=” + 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
0 Uninitialized. Method send() belum dipanggil.
1 Loading. Request sedang dikirim menuju server.
2 Loaded. Respon dari server telah diterima.
3 Interactive. Respon sedang diproses.
4 Completed. Respon telah diproses. Siap untuk
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 :
“http://ourServer/ourApplication/getZIPCode?city=” + 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”;
xmlRequest = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (error1) {
try {
xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (error2) {
if (typeof XMLHttpRequest != 'undefined') { xmlRequest = new XMLHttpRequest(); }
<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/>
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(); }
