Ajax c1-3

Membangun Rich Web Application
AJAX dan PHP

Ibnu Daqiqil Id

www.ibnoe.web.id | i

DAFTAR ISI
BAB.1 ............................................................................................................................................................................................ 1
Perkenalan Ajax........................................................................................................................................................................ 1
1.1 Sejarah Aplikasi Web ................................................................................................................................................. 1
1.2 Masa Depan Aplikasi Web Dengan AJAX ......................................................................................................... 2
BAB. 2 ........................................................................................................................................................................................... 5
Konsep AJAX .............................................................................................................................................................................. 5
Dasar‐dasar HTTP Request dan Response ............................................................................................................... 5
Response HTTP.................................................................................................................................................................... 6
XMLHttpRequest ................................................................................................................................................................. 7
BAB 3. XML ............................................................................................................................................................................... 14
Contoh Kasus ...................................................................................................................................................................... 16
BAB 3. JavaScript ................................................................................................................................................................... 17
3.1 EVENT ............................................................................................................................................................................ 17
3.2 EVENT HANDLER ...................................................................................................................................................... 17
3.3 OBJEK DALAM BROWSER ...................................................................................................................................... 18
BAB 4. CASCADING STYLE SHEET .................................................................................................................................. 25
4.1 TIPE‐TIPE CSS RULE ................................................................................................................................................ 25
4.2 PENEMPATAN CSS RULE ....................................................................................................................................... 26
4.3 JENIS JENIS TAG ......................................................................................................................................................... 28
BAB 4. Pengolahan Data XML ...................................................................................................................................... 38
4.1 Pengertian XML .......................................................................................................................................................... 38
Studi Kasus 1. Tabbed Content ........................................................................................................................................ 43
Studi Kasus 2. Image Gallery ............................................................................................................................................. 47

www.ibnoe.web.id | 2

BAB.1
PERKENALAN AJAX

1.1 SEJARAH APLIKASI WEB
Seiring dengan perkembangan internet pada awal tahun 1990‐an dan di temukannya HTTP
(Hyper Text Transfer Protokol) yang digunakan untuk mengirimkan data di internet, sejak itulah
sejarah aplikasi web dimulai. Pada waktu itu tipe dokumen standar yang digunakan di internet
adalah HTML (Hyper Text Markup Language). HTML adalah sebuah bahasa markup yang digunakan
untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah
browser (Sebuah perangkat lunak yang berfungsi menampilkan dan melakukan interaksi dengan
dokumen‐dokumen yang disediakan oleh webserver). HTML tidak dirancang untuk membuat
sebuah aplikasi web yang komplek melainkan hanya untuk menampilkan content dan formatnya
dalam bentuk teks dan gambar dalam bentuk yang statis.
Aplikasi Web adalah sebuah aplikasi yang menggunakan kemampuan webserver untk
memproses data dan mengirimkannya ke user melalui network/internet. Berbeda dengan aplikasi
desktop , dimana harus melakukan instalasi di sisi client, untuk dapat menggunakan aplikasi
tersebut. Aplikasi web hanya membutuhkan sebuah web browser yang digunakan hanya untuk
menampilkan data yang diterima dari server.
Karena keterbatasan diatas akhirnya muncullah beberapa teknologi yang dapat membuat
aplikasi web lebih dinamis. Teknologi ini dapat dikelompokkan menjadi dua jenis
1. Teknologi ClientSide. Teknologi ini membuat aplikasi web menjadi dinamis dengan melakukan
manipulasi data disisi user. Contoh teknologi ini adalah JavaScript, Java Applet, Flash dan lain‐
lain. Keuntungan yang ditawarkan teknologi ini adalah mempermudah dan memberikan
“keinteraktifan” pada web user interface.
2. Teknologi ServerSide. Teknologi ini menawarkan ke‐interaktifan data dari sisi server, karena
semua data di manipulasi di sisi server.Client hanya menerima output dari server dalam
bentuk HTML biasa. Contoh teknologi ini adalah CGI, PHP, ASP, JSP, ColdFusion dan lain lain.
Untuk mendapatkan aplikasi web yang baik biasanya programmer menggunakan kedua
teknologi diatas, supaya dapat menghasilkan sebuah aplikasi web yang powerful, karena kedua
teknologi tersebut menawarkan keuntungan yang sangat berbeda antara satu dan lainnya.
Keuntungan aplikasi web :
• Aplikasi web lebih mudah dan murah untuk digunakan. Dengan aplikasi web, kita dapat
mengurangi biaya untuk mengimplemntasi/menginstall aplikasi disisi client.
• Aplikasi web lebih mudah dan murah untuk di upgrade. Biaya perawatan dan upgrade lebih
murah karena hanya mengubah di sisi server.

• Aplikasi web lebih fleksibel. Dengan aplikasi web, kita tidak perlu memikirkan masalah sistem
operasi, karena secara default sebuah sistem operasi sudah dilengkapi web browser.
1.2 MASA DEPAN APLIKASI WEB DENGAN AJAX
AJAX yang dimaksud disini bukanlah nama club sepakbola yang berasal dari Amsterdam,
belanda atau pun nama pahlawan dalam sejarah perang Trojan, tetapi AJAX disini adalah singkatan
dari Asynchronous JavaScript and XML. Pada intinya ajax itu merupakan gabungan beberapa
teknologi yang bertujuan untuk menghindari page reload. Dengan menghindari page reload, kita
dapat menghindari paradigma clickandwait serta memberikan sebuah fitur yang cukup kompleks
pada website seperti validasi data secara realtime, drag n drop dan fitur‐fitur lain yang belum
dimiliki web biasa.
Dengan AJAX, suatu aplikasi web dapat mengambil data kemudian diolah di client melalui
request asynchronous HTTP yang diinisiasi oleh Javascript, sehingga dapat mengupdate bagian‐
bagian tertentu dari web tanpa harus memanggil keseluruhan halaman web. Request ini dapat
dieksekusi dalam beberapa cara dan beberapa format transmisi data. Dikombinasikannya cara
pengambilan data remote dengan interaktivitas dari Document Object Model (DOM) telah
menghasilkan generasi terbaru dari aplikasi web yang mengebrak aturan‐aturan tradisional
tentang apa yang dapat terjadi di dalam web.
AJAX memberikan keseimbangan lebih baik antara fungsionalitas client dengan

fungsionalitas server ketika mengeksekusi aksi yang diminta oleh user. Hingga saat ini,
fungsionalitas di sisi client dan server dipandang sebagai fungsionalitas yang terpisah yang bekerja
hanya satu dalam suatu waktu untuk merespon aksi dari user. Dengan adanya AJAX, dihasilkan
solusi untuk menyeimbangkan loading web antara client dan server dengan cara memperkenankan
komunikasi secara background ketika user bekerja dengan page saat itu. Gambar di bawah ini
adalah visualisasi dari apa yang terjadi ketika halaman web dengan AJAX diminta oleh user:
Gambar 1. Proses bekerjanya AJAX
AJAX dibangun dari beberapa teknologi yang telah disediakan oleh web browser modern,
seperti Mozilla Firefox, Internet Explorer, atau Opera, sehingga client tidak perlu menginstall modul
extra untuk menjalankan website AJAX. AJAX ini dikonstruksi dari:

• JavaScript adalah unsur terpenting dari AJAX, yang dapat membangun fungsionalitas client
site. Dalam fungsi‐fungsi JavaScript akan banyak digunakan Document Object Model (DOM)
untuk memanipulasi bagian dari halaman HTML.
• Objek XMLHTTPRequest memperkenankan JavaScript untuk mengakses server secara
asynchronous, sehingga user dapat melanjutkan pekerjaan, sementara waktu proses
dilakukan di background. Mengakses server singkatnya adalah membuat request HTTP
sederhana untuk suatu file atau script yang terletak di server. Request HTTP mudah dibuat
dan tidak menyebabkan permasalahan yang berhubungan dengan firewall.
• Teknologi server‐side diperlukan untuk menangani request yang datang dari client
JavaScript.
Dalam modul ini digunakan PHP untuk menjalankan bagian dari proses yang ada di sisi
server. Untuk komunikasi client‐server diperlukan jalan untuk melewatkan data dan memahami
data tersebut. Melewatkan data adalah bagian yang mudah. Script client yang mengakses server
(menggunakan object XMLHTTPRequest) dapat mengirimkan data name‐value menggunakan GET
dan POST. Sangat mudah untuk membaca nilai ini di script server apapun.
Script server kemudian mengirim balik respose melalui HTTP, tetapi tidak seperti website
umumnya, response dibuat dengan format yang dapat dengan mudah di‐parsing oleh kode
JavaScript yang ada di client. Format yang disarankan adalah XML, karena mempunyai kelebihan
yaitu secara luas didukung dan banyak library yang membuat dokumen XML mudah untuk
dimanipulasi.
Berikut ini adalah beberapa keuntungan dari aplikasi web berbasis AJAX:
• Memungkinkan untuk membuat website dan aplikasi web yang lebih baik dan lebih
responsif.
• Kepopularitasannya mendorong perkembangan pengkodean yang membantu developer
untuk menghindarkan pembuatan ulang dalam melakukan pekerjaan yang sudah umum.
• Mendayagunakan teknologi yang telah ada.
• Mendayagunakan skill developer yang telah ada.
• Fitur‐fitur dari AJAX menyatu dengan baik dengan fungsionalitas yang telah disediakan oleh
browser web.
Skenario umum dimana AJAX dapat digunakan antara lain:
• Validasi form server‐side yang dilakukan dengan segera, sangat berguna di kondisi yang
tidak memungkinkan pengiriman keseluruhan data ke client yang dibutuhkan untuk
melakukan validasi ketika halaman di‐load di awal mula.
• Membuat chat online sederhana yang tidak membutuhkan library eksternal seperti Java
Runtime Machine atau Flash
• Membuat aplikasi dengan fungsionalitas seperti Google Suggest.
• Mendayagunakan teknologi yang telah ada secara lebih efektif. Misalnya pembuatan grafik
secara real time menggunakan Scalable Vector Graphics (SVG), atau membuat list drag‐and‐
drop sederhana.

• Pembuatan data grid yang responsif yang mengupdate database server‐side secara on‐the‐
fly.
• Membuat aplikasi yang membutuhkan update secara real time dari berbagai sumber
eksternal, misalnya RSS.
Beberapa kemungkinan permasalahan dengan AJAX antara lain:
• Karena alamat halaman tidak berubah ketika proses bekerja, maka tidak mudah untuk
membuat bookmark suatu halaman yang berbasis AJAX.
• Search Engine mungkin tidak dapat meng‐indexing seluruh bagian dari situs dengan
aplikasi AJAX.
• Tombol Back di browser, tidak memberikan hasil yang sama dengan aplikasi web klasik,
karena seluruh aksi terjadi di halaman yang sama.
• JavaScript dapat di‐disable di sisi client, sehingga aplikasi AJAX tidak berfungsi.
Untuk mengenal teknik AJAX akan lebih baik untuk mengenal Hypertext Transmission
Protocol (HTTP) terlebih dahulu. HTTP adalah protokol untuk mengirimkan halaman web, image,
dan file lain melalui Internet dari dan ke web.
HTTP terdiri dari dua bagian: request dan response. Ketika mengetikkan URL di browser
web, browser akan membuat dan mengirimkan request. Request ini berisi URL yang diketikkan dan
beberapa informasi tentang browser itu sendiri. Ketika server menerima request ini, maka
response akan dikirimkan. Response berisi informasi sesuai request. Kemudian browser
menginterpretasikan response dan menampilkan halaman web (atau resource lain).


BAB. 2
KONSEP AJAX
Sebelum mulai mengimplementasikan AJAX, ada beberapa komponen yang harus diketahui
diantaranya adalah request dan respon HTTP, Karena konsepnya akan dipakai pada implementasi
ajax.
DASAR‐DASAR HTTP REQUEST DAN RESPONSE
Untuk mengetahui bagaimana menggabungkan semua elemen Ajax, penting bagi kita untuk
mengerti bagaimana proses sebuah halaman web di request (diminta) dan diresponse (terima).
‐ Request HTTP
Untuk meminta sebuah halaman atau data tertentu disisi server, browser harus
mengirimkan sebuah request (permintaan) melalui protokol HTTP. Format dari request HTTP
sebagai berikut:
<request‐line>
<headers>
<blank line>
[<request‐body>]

Di request HTTP, baris pertama mengindikasikan tipe dari request, resource yang akan
diakses, dan versi HTTP yang dgunakan. Kemudian bagian headers, mengindikasikan informasi
tambahan yang mungkin akan digunakan di server. Setelah headers yaitu baris kosong, yang
kemudian dapat ditambahkan data tambahan (disebut body).
Ada banyak tipe request yang didefinisikan dalam HTTP, tapi ada dua yang umum
digunakan developer AJAX, yaitu GET dan POST.
‐ Request GET
Ketika mengetikkan URL di browser web, browser mengirimkan request GET ke server
berdasarkan URL tersebut, yang kemudian memberitahukan server untuk mendapatkan
resource dan mengirimkan balik. Contoh dari request GET untuk
http://www.brawijaya.ac.id/ajax/ mungkin seperti berikut:
GET /images/ HTTP/1.1

Host: www.brawijaya.ac.id
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)

Gecko/20050225 Firefox/1.0.1
Connection: Keep‐Alive

Untuk mengirimkan parameter untuk request GET dapat ditambahkan informasi yang
disebut query string setelah URL. Formatnya seperti berikut:
URL ? name1=value1&name2=value2&..&nameN=valueN

Contohnya
GET /ajax/?name=SeminarAjax HTTP/1.1
User-Agent: Mozilla/5.0 (Windows; U;
Windows NT 5.1; en-US; rv:1.7.6)
Connection: Keep‐Alive

Sederhananya, Metode Get adalah metode pengiriman datanya, dimana datanya
diletakkan dipada URLnya contoh www.ibnoe.web.id/index.php?data=1.
Kelemahan metode ini adalah terdapatnya batasan besar data yang dikirimkan
pada URL

‐ Request POST
Pada request POST ditambahkan data tambahan yang dikirimkan ke server yang terletak di
bagian body request. Misalnya, ketika kita mengisi suatu form isian, maka data dikirimkan
melalui request POST.
Contohnya:
POST / HTTP/1.1
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-
US; rv:1.7.6)
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive
name=SeminarAjax&tahun=2007
Sederhananya, Metode Get adalah metode pengiriman datanya, dimana datanya
diletakkan dipada URLnya contoh www.ibnoe.web.id/index.php?data=1
RESPONSE HTTP
Respon HTTP dapat dikatakan output atau balasan dari server. Setelah proses request
dilakukan, server akan memberikan balasan atau response melalui protokol http juga. Format
response HTTP mirip dengan request, yaitu:
<status-line>
<headers>
<blank line>
[<response‐body>]

Perbedaan yang nyata terletak pada baris pertama yang mengandung informasi status. Contoh dari
response HTTP sebagai berikut:
HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1

Content-Length: 122
<html>
<head>
<title>Seminar AJax</title>
</head>
<body>

</body>
</html>

Status umum yang digunakan antara lain:
• 200 (OK) : Request yang kita minta dibalas dengan baik oleh server
• 304 (NOT MODIFIED) : Tidak ada perubahan request yang diberikan sejak request terakhir,
hal ini dapat disebabkan karena mekanisme caching oleh browser
• 401 (UNAUTHORIZED): client tidak berhak untuk mengakses halaman ini, hal ini
disebabkan karena request membutuhkan username dan password dan user tidak
memberikannya
• 403 (FORBIDDEN): client tidak berhak untuk mengakses halaman ini, hal ini disebabkan
karena request membutuhkan username dan password dan user memiliki username tau
password yang tidak valid
• 404 (NOT FOUND): request urlnya tidak ditemukan.

Status ini sangat diperlukan ketikan mengecek event pada AJAX
XMLHTTPREQUEST
XmlHttpRequest adalah sebuah object javascript yang digunakan untuk mengakses web
server secara asingkron, jadi user dapat terus melakukan aktifitasnya di sebuah halaman web tanpa
me‐refresh halaman tersebut, karena proses requestnya dilakukan di background. Mengakses web
server artinya adalah melakukan sebuah request biasa ke sebuah halaman di webserver yang
berisi script (server side script).
Pada proses request ini, tentunya ada data yang akan kita lewatkan untuk diproses di sisi
server. Metode request yang dapat kita gunakan adalah GET atau POST. Tentunya akan sangat
mudah bagi server untuk membaca data yang di kirimkan oleh client dengan menggunakan metode
tersebut.
Setelah data tersebut terkirim, otomatis server akan mengirimkan respon balik atas request
yang telah dilakukan. Berbeda dengan respon web server biasa, biasanya hasil respon tersebut
dalam sebuah format yang mudah di parsing oleh javascript di sisi client. Format yang dianjurkan

adalah XML, karena format ini sudah di dukung banyak system dan ada banyak library yang dapat
digunakan untuk memanipulasi dokumen XML tersebut. Selain XML, ada sebuah format yang cukup
terkenal yaitu JavaScript Object Notation (JSON).
Pada implementasinya, untuk membuat sebuah object XMLHttp cukup dengan meninstance
class XMLHttpRequest(), tetapi pada browser IE, microsoft mengimplentasikannya pada sebuah
ActiveX Control, jadi kita harus menggunakan ActiveX tersebut untuk mengimplmentasikan ajax
pada IE. Contoh :
1 var xmlHttp = createXmlHttpRequestObject();

2 function createXmlHttpRequestObject(){
3 var xmlHttp;
4 try
5 {
6 xmlHttp = new XMLHttpRequest();
7 }
8 catch(e)
9 {
10 //asumsi IE 6 Tertinggi
11 var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
12 "MSXML2.XMLHTTP.5.0",
15 "MSXML2.XMLHTTP",
16 "Microsoft.XMLHTTP");
17
18 for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){
19 try{
20 xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
21 }
22 catch (e) {}
23 }
24 }
25 if (!xmlHttp)
26 alert("Error creating the XMLHttpRequest object.");
27 else
28 return xmlHttp;
29 }
Setelah object XMLHttp dibuat, kita dapat membuat HTTP request mengunakan javascript
dengan memanggil fungsi open() yang merupakan member dari class XMLhttp. Fungsi ini
mempunyai 3 parameter diantaranya:
• Type Request: Sebuah string yang menunjukkan dengan tipe request apa koneksiyang akan
dilakukan.
• URL dimana kita akan mengirim request tersebut.
• Async: Sebuah value bertipe boolean yang menunjukkan apakah request akan diminta
secara asingkron
Parameter terakhir Async sangat penting karena ia mengontrol javascript bagaimana cara
menangani request. Ketika ia di set True maka request akan dilakukan secara asingkon, artinya

javascript akan tetap menjalankan kode salanjutnya tanpa menunggu response dari server, Tetapi
jika di set false maka browser akan menunggu sampai aja respon sebelum melanjutkan eksekusi
code. Ini berarti jika respon membutuhkan waktu yang banyak, maka user tidak dapat berinteraksi
dengan browser sampai request selesai.
Selanjutnya setelah object XMLhttp terbentuk, kita perlu mendefinisikan sebuah event handler
onreadystatechange. Objek XMLHttp mempunyai sebuah properti dengan nama readyState
yang berisi informasi tentang status response dari server. Ada 5 jenis status respondari server
diantaranya:
• 0 (Uninitialized) : Objek XML Http sudah dibuat tetapi fungsi open belum dipanggil.
• 1 (Loading) : Fungsi open telah dipanggil tetapi request belum dikirim
• 2 (Loaded) : Request telah dikirim
• 3 (Interactive) : Sebagian response telah di terima
• 4 (Complete) : Semua data telah diterima
Setiap ada
perubahan value pada property readystate maka eventhandler
onreadystatechange akan di panggil. Adapun method/properties pada XMLHTTP Object adalah
Method/Property Keterangan
Abort () Membatalkan request yang telah dikiri
getAllResponseHeaders () Mendapatkan header respon sebagai string
Open ( “method”, Inisialiasi parameter request
”URL”[,asyncflag [, “username”
[, “pasword”]]])
Send (content) Melakukan HTTP Request
setRequestHeader(“Label”, Set pasangan label dan valuenya pada header request
“value”)
Onreadystatechange Digunakan untuk mengeset fungsi callback yang
menghandle perubahan request state
readyState Memberikan informasi status request
responseText Mengembalikan respon server dalam format string
responseXML Mengembalikan respon server dalam format XML
Status Mengembalikan kode status request
statusText Mengembalikan pesan status request

Berikut ini adalah contoh sederhana halaman web menggunakan ajax
1. Membuat halaman web antarmuka (index.html)
Yang dilakukan pertama kali adalah membuat file HTML yang nantinya akan digunakan
sebagai halaman web AJAX. Dalam contoh ini, yang digunakan adalah file index.html.

Index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>Bab 1 - Pengenalan Ajax</title>
6 <script type="text/javascript" src="HelloAjax.js"></script>
7 </head>
8 <body onload='process()'>
9 Nama Anda:
10 <input type="text" id="myName" />
11 <div id="divMessage" />
12 </body>
13 </html>

Dalam halaman ini, file JavaScript yang digunakan sebagai AJAX adalah script
HelloAjax.js. Dalam body halaman ini, didefinisikan event onload='process(), sehingga
ketika halaman ini di‐load maka akan selalu memanggil fungsi process() yang terletak di file
HelloAjax.js tersebut.

2. Membuat clientside script JavaScript untuk AJAX dengan objek XMLHttp (HelloAjax.js)
Langkah pertama untuk menggunakan objek XMLHttp, adalah membuatnya terlebih dahulu.
Karena Microsoft mengimplementasikan dengan kontrol ActiveX, maka harus digunakan kelas
ActiveXObject di JavaScript, dengan melewatkan signature kontrol XMLHttp:
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
Ada juga beberapa versi baru yang dikeluarkan sesuai dari library MSXML yang dikeluarkan
dengan kestabilan dan kecepatan yang makin baik. Beberapa signature lain tersebut adalah:
• MSXML2.XMLHttp
• MSXML2.XMLHttp.3.0

Untuk provider lain digunakan objek yang dideklarasikan sebagai berikut:
var xmlHttp = new XMLHttpRequest()
Contoh lengkapnya untuk membuat objek XMLHttp adalah sebagai berikut:
HelloAjax.js
1 //////////////////////////////////////////////////////////////
2 // $Hello Ajax.Js //
3 // File untuk memanggil helloAjax.php
4 /////////////////////////////////////////////////////////////
5
6 var xmlHttp = createXmlHttpRequestObject();
7 // Create XMLHttpRequest
8 function createXmlHttpRequestObject()
9 {
10 var xmlHttp;
11 if(window.ActiveXObject){
12 try{
13 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
14 } catch (e) {
15 xmlHttp = false;
16 }
17 }
18 // jika mozilla atau yang lain
19 else {
20 try{
21 xmlHttp = new XMLHttpRequest();
22 }catch (e){
23 xmlHttp = false;
24 }
25 }
26 if (!xmlHttp)
27 alert("Error creating the XMLHttpRequest object.");
28 else
29 return xmlHttp;
30 }
31
32 //Memanggil file HelloAjax.php Secara Asingkron
33 function process(){
34 if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
35 name =
36 encodeURIComponent(document.getElementById("myName").value);
37 xmlHttp.open("GET", "HelloAjax.php?name=" + name, true);
38 xmlHttp.onreadystatechange = handleServerResponse;
39 xmlHttp.send(null);
40 } else
41 setTimeout('process()', 1000);
42 }
43 //di eksekusi otomati jika pesan diterima
44 function handleServerResponse() {
45 ///jika rewuest complete
46 if (xmlHttp.readyState == 4){
47 if (xmlHttp.status == 200) {
48 // extract XML yang diterima
49 xmlResponse = xmlHttp.responseXML;

50 xmlDocumentElement = xmlResponse.documentElement;
51 helloMessage = xmlDocumentElement.firstChild.data;
52 document.getElementById("divMessage").innerHTML =
53 '<i>' + helloMessage + '</i>';
54 setTimeout('process()', 1000);
55 }
56 else {
57 alert("ERROR: " + xmlHttp.statusText);
58 }
59 }
60 }

Setelah objek XMLHttp dibuat, maka dipanggil method open() untuk inisialisasi objek
dengan 3 parameter:
• Tipe Request : string yang mengindikasikan tipe dari request, umumnya GET atau POST.
• URL : string yang berisi URL yang akan dikirimkan.
• Async : nilai boolean yang mengindikasikan apakah request dibuat secara
asynchronous atau tidak.
Contoh untuk membuat request asynchronous GET untuk HelloAjax.php?name= adalah
sebagai berikut:
xmlHttp.open("GET", "HelloAjax.php?name=" + name, true);
Kemudian definisikan event handler onreadystatechange. Objek XMLHttp mempunyai
properti readyState yang berubah ketika request dikirim dan response diterima.
Setiap kali properti ini berubah, maka event onreadystatechange akan dipanggil.
Karena perbedaan implementasi browser, maka nilai readyState yang cross‐browser adalah 0,
1, dan 4.
3. Membuat serverside script dengan PHP (HelloAjax.php)
Script PHP inilah yang diminta oleh request XMLHttp sebagai response dalam bentuk
format XML yang nanti di‐parsing oleh client JavaScript.

HelloAjax.php
1 <?php
2 // Output Dalam bentuk XML
3 header('Content-Type: text/xml');
4 // generate XML header
5 echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
6 echo '<response>';
7 $name = $_GET['name'];
8 $userNames = array('ANDI', 'SURYA', 'NANA', 'LALA',
9 'HAKI','PUTRA');
10 if (in_array(strtoupper($name), $userNames))
11 echo 'Halo.. ' . htmlentities($name) . '!';
12 else if (trim($name) == '')
13 echo 'hmm... sapa ya!';
14 else

15 echo htmlentities($name) . ', gak kenal tuh!';
16 echo '</response>';
?>

Hasil dari tampilan frontpage web HelloAJAX dapat dilihat dari gambar 1.1 berikut. Dalam
contoh AJAX sederhana ini, ketika user diminta untuk mengetikkan nama user, server selalu
mengirim response. Ketika user sedang mengetikkan, server dipanggil secara asynchronous, pada
selang waktu tertentu (dalam contoh 1000 ms), sehingga menjelaskan kenapa tidak diperlukannya
tombol untuk memberitahukan bahwa kita telah selesai mengetik dan mengirimkannya ke server.
Untuk beberapa nama tertentu yang diketikkan, pesan yang ditampilkan pada halaman akan
berbeda.

Gambar 1.1. Tampilan HelloAJAX

Pesan yang berbeda tersebut terletak di element <div> dengan id=divMessage, jadi
ketika response datang kemudian diparsing, maka pesan yang didapat dari response akan
ditampilkan di element ini. Sehingga untuk menampilkan suatu bagian dari halaman web yang
bersifat dinamis diperlukan element, dalam
contoh ini <div>, yang digunakan oleh
Untuk dapat membuat aplikasi ajax
yang lebih kompleks, minimal kita
JavaScript untuk dapat dimanipulasi.
harus mengerti beberapa

komponen, diantarannya XMLdan
Javascipt. Silakan baca chapter
selanjutnya untuk memperdalam

tentang javascript dan XML

BAB 3. XML

Pada bab ini akan dibahas mengenai XML. Pada konsep ajax, XML digunakan sebagai format
data yang dikirimkan. XML dapat disusun sehingga memiliki struktur tertentu tetapi tujuannya
bukan me‐markup data.
Dokumen XML terdiri dari satuan penyimpanan yang disebut entitas, yang memuat baik
data terurai maupun data tak terurai. Data terurai terdiri dari karakter‐karakter, dimana sebagian
membentuk data karakter, dan sebagian membentuk markup. Markup mengkodekan deskripsi tata
letak penyimpanan dokumen dan struktur logika. XML menyediakan mekanisme untuk
menentukan batasan‐batasan suatu tata letak penyimpanan dan struktur logika.
XML dikembangkan oleh Kelompok Kerja XML (sebelumnya dikenal dengan nama SGML
Editorial Review Board) yang dibentuk di bawah dukungan World Wide Web Consortium (W3C)
pada tahun 1996. Kelompok ini dipimpin oleh Jon Bosak dari Sun Microsystems dengan peran serta
aktif dari XML Special Interest Group (sebelumnya dikenal dengan nama Kelompok Kerja SGML)
yang juga dikelola oleh W3C. Keanggotaan Kelompok Kerja XML diberikan pada lampiran. Dan
Connolly berperan sebagai penghubung Pokja dengan W3C.
Tujuan desain XML adalah:
‐ XML harus dapat digunakan secara langsung di Internet.
‐ XML harus mendukung secara luas berbagai aplikasi.
‐ XML harus kompatibel dengan SGML.
‐ Program yang memproses dokumen XML harus mudah dibuat.
‐ Jumlah fitur opsional pada XML harus dibuat seminimum mungkin, idealnya nol.
‐ Dokumen XML harus jelas dan mudah dipahami manusia.
‐ Desain XML harus disiapkan secepatnya.
‐ Desain XML harus formal dan singkat.
‐ Dokumen XML harus mudah dibuat.
Keringkasan suatu markup XML tidak dipentingkan. (http://www.xml.or.id, 2006)
Adapun komponen‐komponen yang dimiliki oleh dokumen XML adalah sebagai berikut:
‐ Deklarasi
Deklarasi pada sebuah dokumen xml dibutuhkan. Deklarasi ini sama untuk semua dokumen
XML dan diletakkan pada bagian atas dokumen XML. Contoh:
<?xml version="1.0"?>
Deklarasi diatas berarti bahwa ini adalah dokumen XML dan dokumen ini mengikuti
rekomendasi W3C

‐ Elemen
Elemen adalah bagian dari dokumen XML yang berisi data. Elemen XML disebut juga node.
Sebuah dokumen XML harus memiliki satu node sebagai elemen teratas. Contoh :
<ORDERS>
<ORDER>
<DATETIME>1/4/2000 9:32 AM</DATETIME>
<ID>33849</ID>
<CUSTOMER>Steve Farben</CUSTOMER>
<TOTALAMOUNT>3456.92</TOTALAMOUNT>
</ORDER>
<ORDER>
<ID>33856</ID>
<CUSTOMER>Jane Colson</CUSTOMER>
</ORDER>
<ORDER>
<ID>33872</ID>
<CUSTOMER>United Disc</CUSTOMER>
</ORDER>
</ORDERS>

Sebuah elemen dapat berisi data atau elemen lainnya. Contoh order, datetime, id.
‐ Atribut
Atribut adalah bagian dari elemen yang berisi data tentang elemen tersebut. Contoh atribut:
<ORDERS>
<ORDER id="33849" custid="406">
</ORDER>
</ORDERS>

Atribut ditulis sebagai pasangan nama/nilai atribut yang dipisahkan tanda sama dengan
(=). Nilai atribut harus dalam bentuk text yang dituliskan diantara dua tanda petik satu atau
dua (single/double quote).


CONTOH KASUS
Sebuah perpustakaan memiliki banyak buku. Masing‐masing buku memiliki data registrasi
perpustakaan.
Dari kasus diatas jelas bahwa root node kita adalah perpustakaan. jika di represntasikan maka
Perpustakaan
Buku Buku
Judul Pengarang Judul Pengarang

maka dapat dibentuk sebuah dokumen XML seperti ini:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<perpustakaan>
<buku id=”1”>
<judul>Pemogramman PHP</judul>
<pengarang>Rico</pengarang>
</buku>
<buku id=”2”>
<judul>Pemogramman ASP</judul>
<pengarang>Budi</pengarang>
</buku>
<buku id=”3”>
<judul>Pemogramman Javascrip</judul>
<pengarang>Tapai</pengarang>
</buku>
</perpustakaan >

Ajax c1-3

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Ajax c1-3

Diunggah oleh

Hak Cipta:

Format Tersedia

AJAX memberikan keseimbangan lebih baik antara fungsionalitas client dengan

GET /images/ HTTP/1.1

1 var xmlHttp = createXmlHttpRequestObject();

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

var xmlHttp = new XMLHttpRequest()

Judul Pengarang Judul Pengarang

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

Anda mungkin juga menyukai