![AJAX by Examples 馮彥文 [email_address] 2007/03/23](https://image.slidesharecdn.com/ajax-by-examples-2-33/75/Ajax-by-Examples-2-1-2048.jpg)
![About Me 馮彥文 Enthusiastic Programmer 隨想行動科技 , Founder www.willmobile.com Blog http://www.pocketshark.com/blog/page/tempo Google: run tempo run Javaworld.com.tw tempo Email mailto: [email_address] 05/26/09 (c) willmobile Inc 2006. All rights reserved.](https://image.slidesharecdn.com/ajax-by-examples-2-33/75/Ajax-by-Examples-2-2-2048.jpg)
Uploaded byYenwen Feng
Ajax by Examples 2
The document discusses AJAX (Asynchronous JavaScript and XML) and provides examples of how it can be used to enhance user interfaces and web applications. It describes several AJAX frameworks and libraries, including Prototype, Dojo, and GWT. It then gives code examples for common AJAX techniques like auto-complete, drag and drop, sliders, and animations.
More Related Content
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Ajax by Examples 2
- 1. AJAX by Examples馮彥文 [email_address] 2007/03/23
- 2. About Me 馮彥文Enthusiastic Programmer 隨想行動科技 , Founder www.willmobile.com Blog http://www.pocketshark.com/blog/page/tempo Google: run tempo run Javaworld.com.tw tempo Email mailto: [email_address] 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 3. 參與社群活動 HappyWeb http://happyweb.tw新網站相關聚會，每月一次 Java User Group http://www.javaworld.com.tw Java 使用者聚會，每月一次 Ubi-Sunrise http://groups.google.com.tw/group/Ubi-Sunrise 各式技術討論，每月一次 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 4. Questions 選用的執行平台 WindowsLinux Others 選用的程式語言 PHP .net Java Ruby Others 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 5. Questions a =? 3 4 不知道 以上皆非 05/26/09 (c) willmobile Inc 2006. All rights reserved. var a = 3; a = function() { return 4; }
- 6. Questions 是否已經開始營運 ?是 還在開發 還沒開發 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 7. Agenda AJAX AJAXPlatform Prototype, Dojo, … GWT, ZK .net, JSP, JSF, … AJAX By Examples 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 8. AJAX A synchronous J avascript A nd X ML 非同步的 JavaScript 與 XML 網站存取 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 9. 傳統 WebApplications 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 10. AJAX Web Applications05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 11. AJAX Examples YahooMail http://mail.yahoo.com 推推王 http://funp.com Digg http://digg.com 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 12. AJAX Roller skatesfor the Web ~Bruce Stirling 連續，不中斷的網站體驗 提升使用網站的流暢度 提供更直覺的操作介面 表面功夫 像真實生活的直排輪，不一定適用於 所有狀況 Browser History Search Engine 搜尋不到 AJAX 內容 瀏覽器的相容性問題 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 13. AJAX Frameworks JavascriptLibraries Prototype, Dojo, YUI, … Javascript Frameworks GWT, ZK, … Web Frameworks asp.net, java struts, … Flash 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 14. Javascript Libraries Prototypehttp://www.prototypejs.org/ 以簡化 Javascript 開發為目標 基礎的工具 library, 很多其他的 libraries 都建構在這上面 http://script.aculo.us/ 提供 DOM Manipulation XHR (AJAX) Functions JSON 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 15. Javascript Libraries Dojohttp://dojotoolkit.org/ 包羅萬象的 library/framework, 幾乎甚麼都有提供 , 自成一格 提供 DOM Manipulation Events XHR (AJAX) Functions Widget Framework Offline More …. 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 16. Javascript Libraries YUI(Yahoo UI Libraries) http://developer.yahoo.com/yui/ 以 UI 元件為主 , 但同時有工具與網站版型等網站開發需要的資源 提供 一大堆 UI 元件 CSS 頁面板型 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 17. Javascript Framework GWT(Google Web Toolkit) http://code.google.com/webtoolkit/ 利用 Java 開發 Javascript 應用 使用 Java 開發環境 物件導向 型態檢查 提供 Client/Server RPC 呼叫 UI 元件 其他很多東西 , 足夠做個 Gmail 出來 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 18. Web Frameworks asp.netFramework 整合 AJAX 元件至原本的 asp.net 原件庫中 保留原來的開發模式 Java Framework Struts, JSP, JSF 都有專屬的 AJAX 元件 與 GWT 不同處 GWT 是 client 端執行 + RPC, 以上 Frameworks 是將 UI 元件 AJAX 化 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 19. AJAX by ExamplesDigg Spy Continuous Paging Auto-Complete Drag & Drop Slider Slide Shows Animations Tooltips More 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 20. Digg Spy 05/26/09(c) willmobile Inc 2006. All rights reserved.
- 21. Digg Spy 從天而降的最新資訊Demo http://www.digg.com/spy Code http://leftlogic.com/info/articles/jquery_spy 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 22. Continuous Paging 05/26/09(c) willmobile Inc 2006. All rights reserved.
- 23. Continuous Paging 列表且自動動態讀取尚未讀取到的部份Demo http://mail.yahoo.com.tw Code http://openrico.org/rico/livegrid.page http://www.extremecomponents.org/extremesite/index.jsp 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 24. Auto-Complete 05/26/09 (c)willmobile Inc 2006. All rights reserved.
- 25. Auto-Complete 自動完成使用者在 textfield 填入的資訊 Demo http://labs.google.com/suggest Code http://demo.script.aculo.us/ajax/autocompleter 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 26. Drag & Drop05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 27. Drag & Drop網頁上的拖拉功能 Demo http://www.netvibes.com http://projects.backbase.com/RUI/shop.html Code http://openrico.org/rico/demos.page?demo=rico_drag_and_drop_custom_draggable http://demo.script.aculo.us/shop http://www.dojotoolkit.org/ 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 28. Slider 05/26/09 (c)willmobile Inc 2006. All rights reserved.
- 29. Slider 透過 slider 篩選資訊 Demo http://www.kayak.com/ http://www.backbase.com/demos/travel/ Code http://wiki.script.aculo.us/scriptaculous/show/SliderDemo 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 30. Slide Shows 05/26/09(c) willmobile Inc 2006. All rights reserved.
- 31. Slide Shows Demohttp://www.bubbleshare.com/ Code http://billwscott.com/carousel/ http://www.huddletogether.com/projects/lightbox2/ http://www.doknowevil.net/litebox http://www.dojotoolkit.org/ 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 32. Animations 05/26/09 (c)willmobile Inc 2006. All rights reserved.
- 33. Animations Demo http://www.zvents.com/Code http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo http://openrico.org/rico/demos.page?demo=rico_effect_position http://www.dojotoolkit.org/ 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 34. Tooltips 05/26/09 (c)willmobile Inc 2006. All rights reserved.
- 35. Tooltips Demo http://www.marketwatch.com/Code http://tooltip.crtx.org/ http://www.dojotoolkit.org/ 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 36. Fading 05/26/09 (c)willmobile Inc 2006. All rights reserved.
- 37. Fading Demo http://www.tadalist.com/Code http://www.axentric.com/posts/default/7 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 38. Widget 05/26/09 (c)willmobile Inc 2006. All rights reserved.
- 39. Widget Demo http://happyweb.twCode http://drnicwilliams.com/2006/11/21/diy-widgets/ 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 40. Unit Test &Debugging Unit Test !!! JsUnit http://www.jsunit.net/ Debugging Firebug https://addons.mozilla.org/en-US/firefox/addon/1843 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 41. 太多選擇了 , 我該怎麼辦 ? 先從熟悉的 framework 開始 , 一步一步新增 AJAX 功能 同時考慮新增 AJAX 功能的優點與缺點 分割網站提供不同功能 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 42. More !!! Books05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 43. More !!! Tutorialshttp://www.javapassion.com/ajaxcodecamp/ http://www.symfony-project.com/askeet Lists http://ajaxpatterns.org/ http://www.dhtmlgoodies.com/index.html http://www.dynamicdrive.com/ Forums & Blogs http://ajaxian.com/ http://www.javaworld.com.tw 05/26/09 (c) willmobile Inc 2006. All rights reserved.
- 44. Thank you! 05/26/09(c) willmobile Inc 2006. All rights reserved.