Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ncu At Tsung

743 views

Published on

  • Be the first to comment

  • Be the first to like this

Ncu At Tsung

  1. 1. YUI 與不換頁技術 http://josephj.com/training/ncu-tsung/index.html http://www.josephjiang.com/presentation/NoPostBack/demo.html
  2. 2. YUI AJAX http://josephj.com/training/ncu-tsung/yui-ajax.html Web 2.0 的基礎
  3. 3. YUI AJAX YUI 用來做 AJAX 叫做 Connection Manager 使用者瀏覽器 A 網站 傳統流程:
  4. 4. YUI AJAX YUI 用來做 AJAX 叫做 Connection Manager 使用者瀏覽器 A 網站 1. 發出 Request 傳統流程:
  5. 5. YUI AJAX YUI 用來做 AJAX 叫做 Connection Manager 使用者瀏覽器 A 網站 1. 發出 Request A 網站 伺服器 2. 伺服器處理 Request 傳統流程:
  6. 6. YUI AJAX YUI 用來做 AJAX 叫做 Connection Manager 使用者瀏覽器 A 網站 1. 發出 Request A 網站 伺服器 2. 伺服器處理 Request 3. 伺服器回傳 傳統流程:
  7. 7. YUI AJAX YUI 用來做 AJAX 叫做 Connection Manager 使用者瀏覽器 A 網站 1. 發出 Request A 網站 伺服器 2. 伺服器處理 Request 3. 伺服器回傳 4. 整份網頁重新整理 傳統流程:
  8. 8. 使用者瀏覽器 A 網站 AJAX流程: YUI AJAX
  9. 9. 使用者瀏覽器 A 網站 1. 用 JavaScript 發出 Request AJAX流程: YUI AJAX
  10. 10. 使用者瀏覽器 A 網站 1. 用 JavaScript 發出 Request A 網站 伺服器 2. 伺服器處理 Request AJAX流程: YUI AJAX
  11. 11. 使用者瀏覽器 A 網站 1. 用 JavaScript 發出 Request A 網站 伺服器 2. 伺服器處理 Request 3. 伺服器回傳 AJAX流程: YUI AJAX
  12. 12. 使用者瀏覽器 A 網站 1. 用 JavaScript 發出 Request A 網站 伺服器 2. 伺服器處理 Request 3. 伺服器回傳 4. 只有小部分更新 AJAX流程: YUI AJAX
  13. 13. 練習:YUI Connection http://josephj.com/training/ncu-tsung/yui-ajax.html
  14. 14. YUI Get Utility http://josephj.com/training/ncu-tsung/yui-get.html 存取跨網域的資料
  15. 15. 利用外部 JavaScript 的特性
  16. 16. 利用外部 JavaScript 的特性 AJAX 不能做跨網域的存取! http://tw.yahoo.com http://tw.lifestyle.yahoo.com
  17. 17. 利用外部 JavaScript 的特性 AJAX 不能做跨網域的存取! http://tw.yahoo.com http://tw.lifestyle.yahoo.com 但 <script src=”...”></script> 可以
  18. 18. 利用外部 JavaScript 的特性 AJAX 不能做跨網域的存取! http://tw.yahoo.com http://tw.lifestyle.yahoo.com 但 <script src=”...”></script> 可以 http://josephj.com/training/ncu-tsung/script.html
  19. 19. 利用外部 JavaScript 的特性 AJAX 不能做跨網域的存取! http://tw.yahoo.com http://tw.lifestyle.yahoo.com 但 <script src=”...”></script> 可以 http://josephj.com/training/ncu-tsung/script.html http://www.josephjiang.com/training/ncu-tsung/data.js<script src=” “></script>
  20. 20. 利用外部 JavaScript 的特性 AJAX 不能做跨網域的存取! http://tw.yahoo.com http://tw.lifestyle.yahoo.com 但 <script src=”...”></script> 可以 http://josephj.com/training/ncu-tsung/script.html http://www.josephjiang.com/training/ncu-tsung/data.js<script src=” “></script> var outputString = ‘hello’; getData(outputString);
  21. 21. 利用外部 JavaScript 的特性 AJAX 不能做跨網域的存取! http://tw.yahoo.com http://tw.lifestyle.yahoo.com 但 <script src=”...”></script> 可以 http://josephj.com/training/ncu-tsung/script.html http://www.josephjiang.com/training/ncu-tsung/data.js<script src=” “></script> <script> function getData (data) { alert(data); } </script> var outputString = ‘hello’; getData(outputString);
  22. 22. 用 JavaScript 把照片抓到你的網站上? 搜尋 “中央資工”
  23. 23. http://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=b392051d5ac5fdb5e9ba68744bd922de&text=中央 資工&format=json
  24. 24. http://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=b392051d5ac5fdb5e9ba68744bd922de&text=中央 資工&format=json <script src=” “></script>
  25. 25. YUI Get Utility
  26. 26. YUI Get Utility • 動態新增 <script/> 節點
  27. 27. YUI Get Utility • 動態新增 <script/> 節點 • YAHOO.util.Get.script(url)
  28. 28. YUI Get Utility • 動態新增 <script/> 節點 • YAHOO.util.Get.script(url) • ex1. 載入函式庫(YUI、jQuery...)
  29. 29. YUI Get Utility • 動態新增 <script/> 節點 • YAHOO.util.Get.script(url) • ex1. 載入函式庫(YUI、jQuery...) • ex2. 載入外部資料(JSON)
  30. 30. YUI Get Utility • 動態新增 <script/> 節點 • YAHOO.util.Get.script(url) • ex1. 載入函式庫(YUI、jQuery...) • ex2. 載入外部資料(JSON) • 動態新增 <link/> 節點
  31. 31. YUI Get Utility • 動態新增 <script/> 節點 • YAHOO.util.Get.script(url) • ex1. 載入函式庫(YUI、jQuery...) • ex2. 載入外部資料(JSON) • 動態新增 <link/> 節點 • YAHOO.util.Get.css(url)
  32. 32. YUI Get Utility • 動態新增 <script/> 節點 • YAHOO.util.Get.script(url) • ex1. 載入函式庫(YUI、jQuery...) • ex2. 載入外部資料(JSON) • 動態新增 <link/> 節點 • YAHOO.util.Get.css(url) • ex. 動態更換佈景主題
  33. 33. 練習:YUI Get Utility http://josephj.com/training/ncu-tsung/yui-get.html
  34. 34. 練習:YUI Get Utility http://josephj.com/training/ncu-tsung/yui-get.html
  35. 35. http://developer.yahoo.com/yql/console/ Yahoo! 也提供了類似 SQL 存取資料的方式 需要 OAuth
  36. 36. • YUI Uploader • YUI Browser History Manager • YUI 3.x IO • YUI JSON Utility 還有更多...

×