introduction to ajax
DESCRIPTION
Introduction to AJAX, materi workshop Seminar Pengenalan AJAX berkerjasama dengan IMAGINE IT Center Yogyakarta Enjoy.. :)TRANSCRIPT
![Page 1: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/1.jpg)
Introduction to
AJAXBRINGING INTERACTIVITY & INTUITIVENESS INTO WEB APPLICATIONS
@harisetiaji harisetiaji
![Page 2: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/5.jpg)
Web Tradisional vs AJAX
![Page 6: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/6.jpg)
Respon Server (Tradisional)
Interaction Data Presentationevent respon
![Page 7: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/7.jpg)
Respon Server (AJAX)
Dipper Interaction
Just-In-Time Data
Just-In-Time Logic
XHR Is The Secret
Richer Interface
![Page 8: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/13.jpg)
AJAX : PatternDibagi menjadi 3 step:
1. Trigger (event atau timer)
2. Operation (AJAX, remote scripting)
3. Update (presentation)
AJAX
Pattern
Trigger
Operation
Update
![Page 14: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/15.jpg)
Let’s take a look..
Social Networking
News Portal
Search Engine
E-commerce
E-learning
Information System Application
Anything else..??
![Page 16: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/17.jpg)
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.
![Page 18: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to ajax](https://reader034.vdocuments.us/reader034/viewer/2022042700/5562f8bad8b42a62598b4865/html5/thumbnails/19.jpg)
Any Questions ??