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

Email

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 Setiajiharisetiaji@gmail.com