1. YUI 與不換頁技術
http://josephj.com/training/ncu-tsung/index.html
http://www.josephjiang.com/presentation/NoPostBack/demo.html

2. YUI AJAX
http://josephj.com/training/ncu-tsung/yui-ajax.html
Web 2.0 的基礎

3. YUI AJAX
YUI 用來做 AJAX 叫做 Connection Manager
使用者瀏覽器
A 網站
傳統流程：

4. YUI AJAX
YUI 用來做 AJAX 叫做 Connection Manager
使用者瀏覽器
A 網站
1. 發出 Request
傳統流程：

5. YUI AJAX
YUI 用來做 AJAX 叫做 Connection Manager
使用者瀏覽器
A 網站
1. 發出 Request
A 網站
伺服器
2. 伺服器處理 Request
傳統流程：

6. YUI AJAX
YUI 用來做 AJAX 叫做 Connection Manager
使用者瀏覽器
A 網站
1. 發出 Request
A 網站
伺服器
2. 伺服器處理 Request
3. 伺服器回傳
傳統流程：

7. YUI AJAX
YUI 用來做 AJAX 叫做 Connection Manager
使用者瀏覽器
A 網站
1. 發出 Request
A 網站
伺服器
2. 伺服器處理 Request
3. 伺服器回傳
4. 整份網頁重新整理
傳統流程：

8. 使用者瀏覽器
A 網站
AJAX流程：
YUI AJAX

9. 使用者瀏覽器
A 網站
1. 用 JavaScript 發出 Request
AJAX流程：
YUI AJAX

10. 使用者瀏覽器
A 網站
1. 用 JavaScript 發出 Request
A 網站
伺服器
2. 伺服器處理 Request
AJAX流程：
YUI AJAX

11. 使用者瀏覽器
A 網站
1. 用 JavaScript 發出 Request
A 網站
伺服器
2. 伺服器處理 Request
3. 伺服器回傳
AJAX流程：
YUI AJAX

12. 使用者瀏覽器
A 網站
1. 用 JavaScript 發出 Request
A 網站
伺服器
2. 伺服器處理 Request
3. 伺服器回傳
4. 只有小部分更新
AJAX流程：
YUI AJAX

13. 練習：YUI Connection
http://josephj.com/training/ncu-tsung/yui-ajax.html

14. YUI Get Utility
http://josephj.com/training/ncu-tsung/yui-get.html
存取跨網域的資料

15. 利用外部 JavaScript 的特性

16. 利用外部 JavaScript 的特性
AJAX 不能做跨網域的存取！
http://tw.yahoo.com http://tw.lifestyle.yahoo.com

17. 利用外部 JavaScript 的特性
AJAX 不能做跨網域的存取！
http://tw.yahoo.com http://tw.lifestyle.yahoo.com
但 <script src=”...”></script> 可以

18. 利用外部 JavaScript 的特性
AJAX 不能做跨網域的存取！
http://tw.yahoo.com http://tw.lifestyle.yahoo.com
但 <script src=”...”></script> 可以
http://josephj.com/training/ncu-tsung/script.html

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. 利用外部 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. 利用外部 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. 用 JavaScript 把照片抓到你的網站上？
搜尋 “中央資工”

23. http://api.flickr.com/services/rest/?
method=flickr.photos.search&api_key=b392051d5ac5fdb5e9ba68744bd922de&text=中央
資工&format=json

24. http://api.flickr.com/services/rest/?
method=flickr.photos.search&api_key=b392051d5ac5fdb5e9ba68744bd922de&text=中央
資工&format=json
<script src=”
“></script>

25. YUI Get Utility

26. YUI Get Utility
• 動態新增 <script/> 節點

27. YUI Get Utility
• 動態新增 <script/> 節點
• YAHOO.util.Get.script(url)

28. YUI Get Utility
• 動態新增 <script/> 節點
• YAHOO.util.Get.script(url)
• ex1. 載入函式庫（YUI、jQuery...）

29. YUI Get Utility
• 動態新增 <script/> 節點
• YAHOO.util.Get.script(url)
• ex1. 載入函式庫（YUI、jQuery...）
• ex2. 載入外部資料（JSON）

30. YUI Get Utility
• 動態新增 <script/> 節點
• YAHOO.util.Get.script(url)
• ex1. 載入函式庫（YUI、jQuery...）
• ex2. 載入外部資料（JSON）
• 動態新增 <link/> 節點

31. YUI Get Utility
• 動態新增 <script/> 節點
• YAHOO.util.Get.script(url)
• ex1. 載入函式庫（YUI、jQuery...）
• ex2. 載入外部資料（JSON）
• 動態新增 <link/> 節點
• YAHOO.util.Get.css(url)

32. YUI Get Utility
• 動態新增 <script/> 節點
• YAHOO.util.Get.script(url)
• ex1. 載入函式庫（YUI、jQuery...）
• ex2. 載入外部資料（JSON）
• 動態新增 <link/> 節點
• YAHOO.util.Get.css(url)
• ex. 動態更換佈景主題

33. 練習：YUI Get Utility
http://josephj.com/training/ncu-tsung/yui-get.html

34. 練習：YUI Get Utility
http://josephj.com/training/ncu-tsung/yui-get.html

35. http://developer.yahoo.com/yql/console/
Yahoo! 也提供了類似 SQL 存取資料的方式
需要
OAuth

36. • YUI Uploader
• YUI Browser History Manager
• YUI 3.x IO
• YUI JSON Utility
還有更多...