Introduction to
AJAXBRINGING INTERACTIVITY & INTUITIVENESS INTO WEB APPLICATIONS
@harisetiaji harisetiaji
Trend AplikasiAplikasi Berbasis Desktop
Aplikasi Berbasis Web
Bundle dalam bentuk CD/DVD kemudian di-install di komputer
Script/kode aplikasi berada di komputer
Biasanya aplikasi berjalan dengan cepat, responsive, memiliki antarmuka yang
interaktif
Aplikasi berjalan diatas Web Server, dan membutuhkan Web Browser untuk
menjalankan aplikasi
Aplikasi menghadirkan layanan yang tidak dapat disimpan di computer
Menunggu respon dari server, menunggu halaman untuk refresh, menunggu request
dikembalikan dan menghasilkan halaman baru
AJAX hadir sebagai ‘jembatan’ antara interaktifitas dan fungsionalitas
Aplikasi Berbasis Web (Tradisional)Karakteristik
Kekurangan
Click, wait and refresh
Ketika halaman refresh, banyak yang dibutuhkan oleh server yakni events, data dan
navigasi
User harus menunggu untuk sebuah respon
Model komunikasi : synchronous “request/response”
Slow response (berdasarkan tekniknya)
Terlalu banyak server load dan konsumsi bandwith
Kehilangan proses operasi selama halaman refresh
Apa itu AJAX ?Asynchronous JavaScript And XML
A Web development technique for creating interactive web applications
Menghadirkan interaksi yang menarik bagi Web Surfers’s Computer
Digunakan untuk retrieve data dan memperbaharui bagian yang diinginkan tanpa
melakukan reload pada halaman yang sedang diakses
Example : Google Application
Increase web’s page interactivity, speed, usability; better user experience
Web Tradisional vs AJAX
Respon Server (Tradisional)
Interaction Data Presentationevent respon
Respon Server (AJAX)
Dipper Interaction
Just-In-Time Data
Just-In-Time Logic
XHR Is The Secret
Richer Interface
Teknologi Dibalik AJAX
XHTML (atau HTML) dan CSS
Marking up dan styling information
DOM (Document Object Model)
Tampilan dinamis dan interaktif dengan informasi yang disajikan
XMLHttpRequest object
Mengubah data secara asynchronously dengan web server
XML (eXtensible Markup Language)
Format pertukaran data
Mekanisme AJAX -- 1
1 dan 2 : Pengguna mengirim request
dokumen kepada server
3 : Respon dari server (data datang)
4 : Browser bekerja, memilah respon
dari server
5 : HTML/CSS melanjutkan ke HTML
rendering engine ‘mewarnai’ halaman
Mekanisme AJAX – 2 (JS)
Javascript Engine – Dapat dijalankan bersamaan dengan
proses penerimaan respon HTML, CSS dan Images
JavascriptDapat mendeteksi User
Interface events (clicks,
etc..) dan dijalankan
ketika pengguna
melakukan suatu aksi
Javascript – Melalui engine dapat mengakses dan
memodifikasi HTML dan CSS, mengubah UI secara dinamis
Mekanisme AJAX – 3 (XML Data)
Fungsi baru JavaScript.. Dapat secara independen
mengirimkan request data (images, xml, apapun..) tanpa
menunggu aksi dari pengguna
XML data support.. Browser dapat menyimpan, akses danmanipulasi data XML melalui JavaScript via Javascript engine
Dapat dilihat
bahwa JavaScript
lebih powerfull
dengan adanya
fungsi baru tersebut.
JavaScript dapat
mengakses data
dari manapun
tanpa menunggu
aksi dari pengguna
Dimana AJAX ??
A : Javascript sebagai “produser”
Digunakan secara asynchronously request
dan retrieve data dari server
B : Menggunakan XML untuk mengirim hasil
feedback kepada browser. Kemudian
menggunakan JavaScript untuk mengekstrak
data XML tersebut.
C : Menggunakan HTML dan CSS sebagai
display, manipulasi menggunakan JavaScript
A
control
•JavaScript
B
data
•XML, format lain (e.g images)
C
display
•HTML dan CSS
AJAX : PatternDibagi menjadi 3 step:
1. Trigger (event atau timer)
2. Operation (AJAX, remote scripting)
3. Update (presentation)
AJAX
Pattern
Trigger
Operation
Update
So.. Kenapa AJAX ??
Enables building Rich Internet
Applications (RIA)
Allows dynamic interaction on the
Web
Improves performance
Real-time updates
No plug-ins required
High Interactivity
High Usability
High Speed
Let’s take a look..
Social Networking
News Portal
Search Engine
E-commerce
E-learning
Information System Application
Anything else..??
AJAX Issues
User does not know updates will occur
User does not notice an update
User can not find the updated information
Unexpected change in focus
Loss of back button functionality
URIs can not be bookmarked
Informing the user
Make update Noticeable
Help user find updated information
Kelemahan AJAX
• Client Side
Poor compatibility with very old or obscure browsers, and many mobile
devices.
Limited Capabilities like multimedia, interaction with web-cams and
printers, local data storage and real time graphics.
The first-time long wait for Ajax sites.
Problem with back/forward buttons and bookmarks.
• Developer Side
Easily Abused by “bad” programmers.
Not everyone have JavaScript enabled.
Too much code makes the browser slow.
SourceiSchool Berkeley
TAMK University of Applied Sciences
Developer Shed Network – XML
IBM Developer Network
http://dret.net/lectures/xml-fall06/
http://ajaxpatterns.org
http://www.telerik.com/products/ajax/history-of-ajax.aspx
http://alexbosworth.backpackit.com/pub/67688
http://ajaxian.com/by/topic/usability/
http://en.wikipedia.org/wiki/Ajax_(programming)
http://w3schools.com
http://w3.org
Any Questions ??
Terima Kasih
Hari [email protected]