1.

Pengertian AJAX
AJAX adalah singkatan dari Asynchronous JavaScript and XML.

AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian
digabungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP,
sehingga

membentuk

suatu

aplikasi

berbasis

web

yang

interaktif.

AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk
membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif. Dengan AJAX,
Javascript dapat langsung berkomunikasi dengan server dengan menggunakan
objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi
data denga server web, tanpa harus me-reloading halaman web tersebut secara
keseluruhan.
Asynchronous JavaScript and XML (AJAX) memungkinkan interaksi
pengguna dengan halaman Web yang akan dipisahkan dari komunikasi Web
browser dengan server. Secara khusus, AJAX mendorong mashup, yang
mengintegrasikan konten atau layanan yang berbeda ke dalam satu halaman
pengguna. Namun, AJAX dan teknologi mashup memperkenalkan jenis baru
karena sifat mereka yang domain dinamis dan multifungsi. Hal ini penting untuk
memahami dan untuk menghindari mereka dari ancaman dengan mengikuti
beberapa praktek terbaik.
AJAX dibangun pada Dynamic HTML (DHTML) teknologi, termasuk
yang paling umum yaitu ;
1.

JavaScript
JavaScript adalah bahasa scripting umum digunakan dalam aplikasi Web

client-side.
2.

Document Object Model (DOM)

DOM adalah model objek standar untuk mewakili dokumen HTML atau

XML. Sebagian besar browser saat ini mendukung DOM dan memungkinkan
kode JavaScript untuk menggunakan DOM untuk membaca dan memodifikasi
konten HTML dinamis.
3.

Cascading Style Sheets (CSS)

CSS adalah bahasa stylesheet yang digunakan untuk menggambarkan

presentasi dokumen HTML.
JavaScript

dapat

memodifikasi

stylesheet

pada

waktu

berjalan,

memungkinkan penyajian halaman Web untuk memperbarui dinamis. Di Ajax,

JavaScript sisi klien update presentasi dari halaman Web dengan dinamis
memodifikasi tree DOM dan stylesheet. Selain itu, komunikasi asynchronous,
diaktifkan oleh teknologi berikut, memungkinkan update dinamis data tanpa perlu
reload seluruh halaman Web. XMLHttpRequest: XMLHttpRequest adalah API
yang memungkinkan klien-side JavaScript untuk membuat koneksi HTTP ke
server jarak jauh dan untuk bertukar data, seperti teks biasa, XML, atau JavaScript
Serial Object Notation (JSON). JSON: JSON, seperti yang diusulkan oleh
permintaan untuk komentar (RFC) 4627 Internet Engineering Task Force (IETF),
adalah, berbasis teks, bahasa-independen, format data-interchange ringan. Ini
didasarkan pada subset dari bahasa ECMAScript (menjadikannya bagian dari
bahasa JavaScript), dan itu mendefinisikan satu set kecil format aturan untuk
membuat representasi portable data terstruktur.
2.

Manfaat AJAX
Berikut ini akan dijabarkan lebih lengkap lagi mengenai manfaat Ajax

yang biasanya digunakan dalam suatu website,diantaranya:

1.

Real time validation

Selain validasi terhadap data berupa email, pencocokan password,

umur(harus angka), dan lain-lain. Contoh lainnya adalah pengecekan username

yang merupakan salah satu validasi yang dilakukan dengan segera(real time). Hal
ini sangat berguna, terutama pada kondisi yang tidak memungkinkan pengiriman
keseluruhan data ke client yang dibutuhkan untuk melakukan validasi ketika
halaman di-load di awal mula.

2.

AutoComplete atau AutoSuggest

AutoComplete yaitu ketika user sedang mengisi data di sebuah form,

karakter yang sedang dituliskan oleh user akan bisa langsung dilengkapi
oleh data-data yang disarankan(suggestion).
Contoh yang paling akrab adalah form pencarian Google(Google Suggest),
dimana ketika user menuliskan satu kalimat yang belum utuh , maka secara
otomatis akan tersedia daftar data-data yang menyambungkan kalimat tersebut
secara utuh, sehingga Anda tidakperlu lagi menuliskan semua kata yang ingin
Anda cari.

Gambar 1. Contoh Google Suggest (AutoComplete)

3.

Load on demand
Berdasarkan event tertentu, sebuah halaman HTML bisa mengambil

tambahan data dibelakang layar, sehingga memungkinkan browser menampilkan

halaman web secara lebih cepat dan bisa diatur kapan penampilannya.
4.

Refresh data dan server push

Halaman web bisa mengambil data dari server tertentu untuk

menampilkan informasi terkini, misalnya nilai tukar, dolar, stok, ramalan cuaca,
dan sebagainya. Kemampuan ini memungkinkan halaman web melihat informasi
terkini tanpa harus me-refresh/reload halaman web.
5.

Partial submit
Halaman web bisa melakukan submit (pengiriman) sebagian form terlebih

dahulu, tanpa meminta halaman web untuk me-refresh-nya terlebih dahulu.

6.

Mashup (mencampur data)

Halaman web bisa menampiulkan data menggunakan berbagai media

seperti proxy server side ataupun menggunakan skrip eksternal. Dengan demikian,
user bisa menggunakan berbagai data untuk aplikasinya. Kegunaan dari mashup
yaitu:
a. menggabungkan nilai tukar dolar ke rupiah dengan halaman web ecommerce.
b. Membuat chat online sederhana yang tidak membutuhkan library eksternal
seprti Java Runtime Machine atau Flash.
c. Membuat aplikasi lebih fungsional seperti Google Suggest.
d. Mendayagunakan teknologi yang telah ada secara lebih efektif . Misalnya
pembuatan grafik seara real time menggunakan Scalable Vector Graphics
(SVG), atau membuat daftar yang bisadi drag-and-drop
e. Pembuatan data gridyang responsif untuk mengupdate database server-side
secara on-the fly.
f. Membuat aplikasi yang membutuhkan update secara real time dari berbagai
sumber eksternal, misalnya RSS.
3.

Kelebihan dan kekurangan AJAX

Sebagai sebuah teknologi yang terkenal akhir-akhir ini, AJAX tentu

memiliki berbagai kelebihan dan kekurangan. Berikut ini

keuntungan AJAX

adalah:
a.

Penggunaan bandwidth
Karena konten HTML dari halaman web dilakukan oleh browser itu

sendiri (menggunakan JavaScript yang merupakan bahasa pemrograman clientside), maka halaman web yang dibuat menggunakan AJAX dapat di-load relatif
lebih cepat. Selain itu, karena tidak perlu adanya refresh untuk menampilkan data
yang lebih barn, maka bandwidth yang diperlukan untuk menampilkan informasi
melalui halaman web akan lebih sedikit dibandingkan jika tanpa menggunakan
AJAX.
b.

Pemisahan antara data, format, style, dan fungsi

Keuntungan lain dari AJAX adalah pendekatan AJAX membuat

programmer untuk memisahkan antara metode dan format yang digunakan untuk

penyampaian informasi melalui web. Penyusun halaman web yang dipisahkan

antara lain:
a)

Data mentah yang akan ditampilkan yang biasanya dibuat dalam format

b)

XML atau bisa juga diletakkan di database server-side.

Format atau struktur halaman web. Biasanya dibuat menggunakan HTML
atau XHTML yang kemudian diolah menggunakan Dynamic Manipulation

c)

di DOM.
Elemen style halaman web. Bagian ini mendeskripsikan bagaimana
tampilan halaman web, dari mulai font hingga metode penampilan gambar.
Style ini biasanya di-embed ke halaman web atau direferensikan melalui
file .css (cascading style sheet).
Fungsionalitas halaman web, biasanya terdiri dari JavaScript (DHTML),

HTTP standar, komunikasi XMLHttp, dan bahasa pemrograman server-side.

Dengan demikian, mau tidak mau programmer akan menjadi lebih teratur dalam
memprogram dan cenderung tidak kacau dalam membuat aplikasi web. Walaupun
demikian AJAX juga memiliki beberapa kerugian, seperti:
a.

Integrasi browser yaitu karena konten halaman menganut prinsip asinkron,

di mana data bisa di-update tanpa halaman di-refresh, maka perubahan
tampilan tidak tercatat di bagian history dari browser. Jadi ketika Anda
mengklik tombol Back, yang muncul bukan tampilan seperti sebelum

b.

mengeksekusi kode AJAX, namun malah halaman sebelumnya.

Kekurangan lainnya adalah kesulitan bagi seorang user untuk melakukan

c.

bookmark/ favorite pada bagian tertentu dari halaman web.

Waktu respon yang kemungkinan bisa membingungkan user yang tidak
berpengalaman menggunakan aplikasi AJAX. Jika setting waktu respon

d.

tidak tepat, user bisa mengira halaman yang diaksesnya sedang hang.
Search engine optimization: Karena konten di-generate menggunakan
JavaScript, search engine tidak bisa mengindeksnya sehingga mengurangi
efektivitas halaman ditinjau dari SEO.
4. Terlalu mengandalkan JavaScript: AJAX menggunakan JavaScript, yang
kadang diimplementasikan secara berbeda di berbagai browser atau verse
tertentu dari sebuah browser. Karena. itu sering kale sebuah website yang
mengandung JavaScript harus dites menggunakan berbagai jenis browser

untuk memastikan tampilannya tidak ada yang salah, begitu juga dengan
AJAX. Namun mengingat browser sekarang seperti Mozilla dan IE 7
menggunakan lapisan abstraksi semisal JavaScript Framework, maka
kekurangan ini sepertinya bisa ditanggulangi di masa depan.
4.

Mashup
Mashup adalah suatu istilah baru di dunia web 2.0 yang merupakan

perpanjangan dari bentuk portal yang sudah ada sebelumnya. Mashup merupakan
campuran konten atau elemen dari berbagai situs web. Sebagai contoh, sebuah
aplikasi yang dibangun dari modul-modul yang diambil dari berbagai sumber
dapat dikatakan sebagai mashup.
Mashup dapat dikatakan juga sebagai sebuah situs web atau aplikasi web
yang mengombinasikan konten dari banyak sumber ke dalam sebuah portal yang
terintegrasi. Hal ini juga merupakan definisi dari semantik web. Istilah mashup
muncul pada tahun 2006, merupakan paradigma baru yang diharapkan dapat
menjadi pencatu kemajuan pada web 2.0. Konten mashup diambil dengan
Application Programming Interface (API) yang melekat dengan RSS atau
AtomFeeds dengan data web. Dengan demikian, ekstraksi informasi menjadi hal
yang cukup menarik. Desainer aplikasi mashup adalah pengguna di perusahaan
yang membutuhkan aplikasi khusus (ad-hoc) tanpa perlu melibatkan personil
teknologi informasi atau pemakai akhir.
Mashup biasanya melibatkan berbagai sumber informasi. Mashup juga
memberi nilai tambah kepada pengguna, yang dirasakan melalui web browser
yang mereka gunakan. Mashup tidak harus selalu berupa integrasi yang terlihat
langsung, namun dapat berupa integrasi yang berbasis pada pemahaman pengguna
pada konten yang dimunculkan berikutnya. Mashup biasanya terbatas pada data
yang tersedia pada feeds yang terstruktur dan database. Mashup dapat juga
mencakup web dan ekstraksi web yang merupakan teknologi yang memungkinkan
terbentuknya mashup.
Mashup dapat dikatakan sebagai web yang dapat diprogram. Web dalam
hal ini digunakan sebagai platform atau API dan protokol yang ringan

(lightweight

protocol).

Komunitas

mashup

yang

dapat

diakses

pada http://www.programmableweb.com/faq memiliki strategi pengembangan dan

pembentukan

layanan-layanan

baru.

2.0 http://www.programmableweb.com/matrix

Matriks

mashup

web

menjabarkan antarmuka seprti

yang ditawarkan oleh penyedia layanan.

Mashup

memungkinkan

pengguna

akhir

untuk

menemukan

dan

mengintegrasikan pihak ketiga, komponen mashup Ajax bertenaga ke kanvas

mashup. Contoh di ruang konsumen jejaring sosial termasuk Facebook Widgets
dan MySpace Widget, pengguna akhir dapat menemukan dan masukkan ke dalam
halaman mereka. Dari perspektif teknologi, komponen mashup merupakan Ajaxpowered "aplikasi mini" yang dirakit menjadi sebuah aplikasi kontainer Mashup
Ajax-powered yang menyediakan kerangka kerja untuk komponen untuk
berkomunikasi satu sama lain. Terkadang aplikasi mashup memungkinkan untuk
melakukan komunikasi lintas situs dengan menyediakan layanan proxy untuk
memungkinkan server-side pengalihan ke server Web yang terkait dengan
komponen mashup.
5.

Jenis Mashup
Mashup saat ini dibagi menjadi tiga jenis yang umum digunakan yaitu

mashup konsumen, mashup data, dan mashup bisnis. Jenis yang paling umum
adalah mashup konsumen, yang ditujukan untuk masyarakat umum. Mashup
konsumen menggabungkan elemen data dari berbagai sumber, dan mashup lain
yang umum adalah mashup data. Sebuah Mashup Data mencampur data sejenis
media dan informasi dari sumber yang berbeda representasi grafis tunggal seperti
misalnya menggabungkan data dari beberapa RSS feed ke satu feed dengan front
end grafis.
Jenis lain adalah Mashup perusahaan, itu "biasanya mengintegrasikan data
dari sumber internal dan eksternal. Sebagai contoh, bisa membuat laporan harga
pasar dengan menggabungkan daftar eksternal dari semua rumah yang dijual di
minggu lalu dengan data internal tentang rumah yang dijual oleh salah satu
lembaga .

Sebuah mashup bisnis adalah kombinasi dari semua di atas, dengan fokus
pada kedua agregasi data dan presentasi, dan selain itu menambahkan fungsi
kolaboratif, membuat hasil akhir yang cocok untuk digunakan sebagai aplikasi
bisnis. Juga, Mashup Telecom adalah layanan telekomunikasi di mana unsurunsur layanan berasal dari lebih dari satu sumber dan digabungkan menjadi
sebuah pengalaman yang terintegrasi. Misalnya, salah satu bisa mendapatkan
layanan dasar dari Perusahaan A, nada ring back dari perusahaan B, layanan
voicemail dari perusahaan C, dll. Namun, ada mashup dalam mashup dan mereka
dikenal sebagai "mashup rakasa".
6.

Arsitektur Mashup
Meskipun ada variasi yang besar dalam antarmuka pengguna dan sumber

data untuk banyak mashup, masih dapat memperoleh pola arsitektur umum bahwa
mereka semua berbagi.

Gambar 2 Arsitektur Mashup

a.

Data
Unsur inti dari mashup apapun adalah data yang dikumpulkan dan

disajikan kepada pengguna. Meskipun diagram di atas menggambarkan sumber

data sebagai database, konsep mashup tidak memerlukan database yang lokal ke
perangkat lunak mashup atau klien. Data ketat dapat berasal dari layanan web di

mana data serial ke XML atau JSON (ini adalah pola yang paling umum di
mashup berbasis internet). Ada arsitektur trade-off harus dibuat dari menyimpan
data primer dalam menyimpan data lokal dan mengakses data dengan setiap
permintaan. Sebagai mashup bergerak dari menjadi aplikasi berbasis internet
untuk internal untuk perusahaan, mereka cenderung kurang tergantung pada
penyimpanan data eksternal.
b.

RSS feed
Penggunaan RSS (Really Simple Syndication) feed adalah sumber umum

dari data primer atau tambahan untuk mashup. RSS feed mudah untuk
mengkonsumsi dokumen XML, dan banyak perpustakaan yang ada untuk
memanipulasi feed. Format dan spesifikasi RSS didokumentasikan dengan baik
dan dipahami dengan hanya beberapa variasi dari versi ke versi. Diperpanjang
dari RSS juga terkenal, seperti yang ditunjukkan oleh jumlah ekstensi yang
digunakan saat ini, seperti menambahkan lampiran ke feed, creative commons
lisensi informasi dan informasi lokasi.
c.

Web Service
Hal ini juga umum untuk menyertakan panggilan ke layanan Web dalam

mashup. Hal ini umum untuk melihat kedua layanan berbasis web-WSDL dan
layanan Web berbasis REST, dengan beberapa layanan mengekspos kedua gaya.
layanan web dapat digunakan untuk memberikan data tambahan atau digunakan
untuk mengubah data yang dihaluskan. Untuk mashup berbasis peta, data hanya
dapat berisi alamat jalan dan panggilan ke WSDL atau layanan Web berbasis
REST mungkin diperlukan untuk menerjemahkan alamat jalan ke Bujur a /
Latitude koordinat untuk peta.

d.

Platform Service

Gambar 3 Menggunakan BizTalk Service sebagai Platform Service untuk menyampaikan

informasi

Gambar diatas menggambarkan kelas khusus layanan yang digunakan

untuk membuat mashup. Layanan platform ini karena mereka menyediakan
fungsionalitas luar model permintaan / respon khas layanan Web tradisional.
Sebuah contoh khas dari hal ini adalah layanan pemetaan yang disediakan oleh
Virtual Earth. Virtual Earth meliputi seluruh array dari server-side dan
kemampuan pemrosesan client-side, serta "layanan di awan." Kita melihat
munculnya layanan blok bangunan berbasis cloud yang mulai menciptakan nilai.
Misalnya, layanan Amazon S3 menawarkan penyimpanan "di awan"; ini
membuat lebih mudah untuk mengekspos data statis dengan meng-upload ke
penyedia penyimpanan host. Microsoft BizTalk Services adalah layanan platform
yang menyediakan kemampuan yang berbeda. Kemampuan untuk menyampaikan
komunikasi dari Internet di firewall perusahaan, sehingga mengekspos layanan
internal untuk dikonsumsi oleh mitra bisnis atau pihak ketiga membangun mashup
perusahaan mereka sendiri. komunikasi disampaikan seperti yang disediakan oleh
BizTalk, layanan ini juga berguna bahkan dalam satu perusahaan, dengan banyak
unit bisnis atau dengan berbagai segmen jaringan. Sebuah berbasis internet relay
komunikasi dapat menghilangkan topologi jaringan fisik sebagai hambatan
komunikasi.
e.

Aplikasi mashup

Sejauh ini telah banyak mengidentifikasi jenis layanan yang dapat

digunakan untuk membuat mashup, tapi belum membahas pentingnya perangkat
lunak yang menciptakan dan memberikan pengalaman mashup. Pikirkan aplikasi
mashup sebagai kombinasi dari layanan tingkat menengah dan beberapa logika
bisnis ringan. Untuk mashup berbasis internet, perangkat lunak biasanya ditulis
menggunakan teknologi Web (seperti PHP atau ASP. NET), tapi kami mulai
melihat garis antara pengolahan server dan aplikasi client blur dengan munculnya
Rich Internet Applications (RIA). RIA adalah aplikasi yang berjalan di dalam
browser dengan fungsionalitas yang kaya mirip dengan banyak aplikasi desktop.
Ini biasanya tidak memerlukan instalasi sisi klien luar generik plug-in seperti
Adobe Flash atau Microsoft Silverlight.
f.

Aplikasi klien
Aplikasi klien adalah bagaimana mashup yang disampaikan dan disajikan

kepada pengguna. Untuk Internet publik mashup aplikasi klien yang paling umum
adalah browser Web yang menerima HTML dan JavaScript dari disampaikan dari
server Web melalui HTTP. Namun, telah mulai melihat mashup yang disampaikan
dengan platform RIA juga. Dalam model ini, klien dapat memberikan kekayaan
lebih visual dan bahkan dapat memberikan beberapa pengolahan mashup pada sisi
klien.

DAFTAR PUSTAKA

[1]

mfile.narotama.ac.id,

2007,

dilihat

18

Februari

2016,

<http://mfile.narotama.ac.id/files/Umum/File%20Dhani/jerrypeterajax.pdf>
[2]

openajax.org,

2007,

dilihat

18

Februari

2016,

<http://www.openajax.org/whitepapers/Ajax%20and%20Mashup
%20Security.php>
[3]

Msdn.microsoft,

2007,

dilihat

18

Februari

2016,

<https://msdn.microsoft.com/en-us/library/bb906060.aspx>
[4]

Slideshare.net,

2009,

dilihat

18

Februari

2016,

<http://www.slideshare.net/salabdullatif/mashup-the-web-applicationintegration-overview?related=1>
[5]

perpusmaya.wordpress.com,

2012,

dilihat

<https://perpusmaya.wordpress.com/2012/05/>

18

Februari

2016,