2. Trend Aplikasi
Aplikasi Berbasis Desktop
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 Berbasis Web
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
3. Aplikasi Berbasis Web (Tradisional)
Karakteristik
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”
Kekurangan
Slow response (berdasarkan tekniknya)
Terlalu banyak server load dan konsumsi bandwith
Kehilangan proses operasi selama halaman refresh
4. 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
7. Respon Server (AJAX)
Dipper Just-In- Just-In- XHR Is The Richer
Interaction Time Data Time Logic Secret Interface
8. 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
9. 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
10. Mekanisme AJAX – 2 (JS)
Javascript Engine – Dapat dijalankan bersamaan dengan
proses penerimaan respon HTML, CSS dan Images
Javascript
Dapat 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
11. Mekanisme AJAX – 3 (XML Data)
Fungsi baru JavaScript.. Dapat secara independen
mengirimkan request data (images, xml, apapun..) tanpa
menunggu aksi dari pengguna
Dapat dilihat
bahwa JavaScript
lebih powerfull
dengan adanya
fungsi baru tersebut.
JavaScript dapat
mengakses data
dari manapun
tanpa menunggu
aksi dari pengguna
XML data support.. Browser dapat menyimpan, akses dan
manipulasi data XML melalui JavaScript via Javascript engine
12. 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 B C
control data display
•JavaScript •XML, format lain •HTML dan CSS
(e.g images)
13. AJAX : Pattern
Dibagi menjadi 3 step:
1. Trigger (event atau timer)
2. Operation (AJAX, remote scripting)
3. Update (presentation)
Operation
Trigger Update
AJAX
Pattern
14. So.. Kenapa AJAX ??
Enables building Allows dynamic
Improves Real-time No plug-ins
Rich Internet interaction on the
performance updates required
Applications (RIA) Web
High
Speed
High
Usability
High
Interactivity
15. Let’s take a look..
Social Networking
News Portal
Email
Search Engine
E-commerce
E-learning
Information System Application
Anything else..??
16. 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
Help user
find
Make updated
update information
Informing Noticeable
the user
17. 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.
18. Source
iSchool 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