Introduction to ajax
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Introduction to ajax

  • 711 views
Uploaded on

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

Introduction to AJAX, materi workshop Seminar Pengenalan AJAX berkerjasama dengan IMAGINE IT Center Yogyakarta

Enjoy.. :)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
711
On Slideshare
711
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction toAJAXBRINGING INTERACTIVITY & INTUITIVENESS INTO WEB APPLICATIONS @harisetiaji harisetiaji
  • 2. Trend AplikasiAplikasi 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 interaktifAplikasi 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 XMLA 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 AJAXXHTML (atau HTML) dan CSS  Marking up dan styling informationDOM (Document Object Model)  Tampilan dinamis dan interaktif dengan informasi yang disajikanXMLHttpRequest object  Mengubah data secara asynchronously dengan web serverXML (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 ImagesJavascriptDapat mendeteksi UserInterface events (clicks,etc..) dan dijalankanketika penggunamelakukan 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 penggunaDapat dilihatbahwa JavaScriptlebih powerfulldengan adanyafungsi baru tersebut.JavaScript dapatmengakses datadari manapuntanpa menungguaksi 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 requestdan retrieve data dari serverB : Menggunakan XML untuk mengirim hasilfeedback kepada browser. Kemudianmenggunakan JavaScript untuk mengekstrakdata XML tersebut.C : Menggunakan HTML dan CSS sebagaidisplay, manipulasi menggunakan JavaScript A B C control data display •JavaScript •XML, format lain •HTML dan CSS (e.g images)
  • 13. AJAX : PatternDibagi 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 NetworkingNews PortalEmailSearch EngineE-commerceE-learningInformation System ApplicationAnything 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. SourceiSchool BerkeleyTAMK University of Applied SciencesDeveloper Shed Network – XMLIBM Developer Networkhttp://dret.net/lectures/xml-fall06/http://ajaxpatterns.orghttp://www.telerik.com/products/ajax/history-of-ajax.aspxhttp://alexbosworth.backpackit.com/pub/67688http://ajaxian.com/by/topic/usability/http://en.wikipedia.org/wiki/Ajax_(programming)http://w3schools.comhttp://w3.org
  • 19. Any Questions ??
  • 20. Terima Kasih Hari Setiaji harisetiaji@gmail.com