ncu at tsung

YUI 與不換頁技術http://josephj.com/training/ncu-tsung/index.html

http://www.josephjiang.com/presentation/NoPostBack/demo.html

YUI AJAXhttp://josephj.com/training/ncu-tsung/yui-ajax.html

Web 2.0 的基礎

YUI AJAXYUI 用來做 AJAX 叫做 Connection Manager

使用者瀏覽器

A 網站

傳統流程：

YUI AJAXYUI 用來做 AJAX 叫做 Connection Manager

使用者瀏覽器

A 網站

1. 發出 Request

傳統流程：

YUI AJAXYUI 用來做 AJAX 叫做 Connection Manager

使用者瀏覽器

A 網站

1. 發出 Request

A 網站伺服器

2. 伺服器處理 Request

傳統流程：

YUI AJAXYUI 用來做 AJAX 叫做 Connection Manager

使用者瀏覽器

A 網站

1. 發出 Request

A 網站伺服器

2. 伺服器處理 Request

3. 伺服器回傳

傳統流程：

YUI AJAXYUI 用來做 AJAX 叫做 Connection Manager

使用者瀏覽器

A 網站

1. 發出 Request

A 網站伺服器

2. 伺服器處理 Request

3. 伺服器回傳

4. 整份網頁重新整理

傳統流程：

使用者瀏覽器

A 網站

AJAX流程：

YUI AJAX

使用者瀏覽器

A 網站

1. 用 JavaScript 發出 Request

AJAX流程：

YUI AJAX

使用者瀏覽器

A 網站

1. 用 JavaScript 發出 Request

A 網站伺服器

2. 伺服器處理 Request

AJAX流程：

YUI AJAX

使用者瀏覽器

A 網站

1. 用 JavaScript 發出 Request

A 網站伺服器

2. 伺服器處理 Request

3. 伺服器回傳

AJAX流程：

YUI AJAX

使用者瀏覽器

A 網站

1. 用 JavaScript 發出 Request

A 網站伺服器

2. 伺服器處理 Request

3. 伺服器回傳

4. 只有小部分更新

AJAX流程：

YUI AJAX

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

YUI Get Utilityhttp://josephj.com/training/ncu-tsung/yui-get.html

存取跨網域的資料

利用外部 JavaScript 的特性

利用外部 JavaScript 的特性AJAX 不能做跨網域的存取！

http://tw.yahoo.com http://tw.lifestyle.yahoo.com

利用外部 JavaScript 的特性AJAX 不能做跨網域的存取！

http://tw.yahoo.com http://tw.lifestyle.yahoo.com

但 <script src=”...”></script> 可以

利用外部 JavaScript 的特性AJAX 不能做跨網域的存取！

http://tw.yahoo.com http://tw.lifestyle.yahoo.com

但 <script src=”...”></script> 可以

http://josephj.com/training/ncu-tsung/script.html

利用外部 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>

利用外部 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);

利用外部 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);

用 JavaScript 把照片抓到你的網站上？

搜尋 “中央資工”

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

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

<script src=”

“></script>

YUI Get Utility

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

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

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

• ex1. 載入函式庫（YUI、jQuery...）

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

• ex1. 載入函式庫（YUI、jQuery...）• ex2. 載入外部資料（JSON）

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

• ex1. 載入函式庫（YUI、jQuery...）• ex2. 載入外部資料（JSON）

•動態新增 <link/> 節點

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

• ex1. 載入函式庫（YUI、jQuery...）• ex2. 載入外部資料（JSON）

•動態新增 <link/> 節點• YAHOO.util.Get.css(url)

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

• ex1. 載入函式庫（YUI、jQuery...）• ex2. 載入外部資料（JSON）

•動態新增 <link/> 節點• YAHOO.util.Get.css(url)

• ex. 動態更換佈景主題

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

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

http://developer.yahoo.com/yql/console/

Yahoo! 也提供了類似 SQL 存取資料的方式

需要OAuth

• YUI Uploader

• YUI Browser History Manager

• YUI 3.x IO

• YUI JSON Utility

還有更多...