Introduction to ajax
0 likes630 views
Dokumen ini membahas tentang AJAX sebagai teknik pengembangan web yang memungkinkan aplikasi berbasis web menjadi lebih interaktif dan responsif dengan cara mengambil dan memperbarui data tanpa memuat ulang halaman. Meskipun AJAX menyediakan pengalaman pengguna yang lebih baik, terdapat beberapa kelemahan seperti kompatibilitas yang buruk dengan browser lama dan masalah dengan navigasi. AJAX mengandalkan kombinasi JavaScript, XML, HTML, dan CSS untuk mengelola permintaan dan tampilan data secara asinkron.
Introduction to ajax
- 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 [email protected]