Ncu At Tsung
36
YUI 與不換頁技術 http://josephj.com/training/ncu-tsung/index.html http://www.josephjiang.com/presentation/NoPostBack/demo.html
-
Upload
joseph-chiang -
Category
Documents
-
view
579 -
download
0
description
Transcript of 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
還有更多...
