Introduction to AJAX, materi workshop Seminar Pengenalan AJAX berkerjasama dengan IMAGINE IT Center Yogyakarta Enjoy.. :)

1. Introduction to
AJAX
BRINGING INTERACTIVITY & INTUITIVENESS INTO WEB APPLICATIONS
@harisetiaji harisetiaji

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

5. Web Tradisional vs AJAX

6. Respon Server (Tradisional)
Interaction Data Presentation
event respon

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

19. Any Questions ??

20. Terima Kasih
Hari Setiaji
harisetiaji@gmail.com