1

AJAX 與 Siliverlight 的介紹與應用發展 指導教授：吳有龍老師報 告 人：郭 芷 妤

2

前言Web2.0 是近年來流行的新趨勢，而推動此一流行的重要技術即是「 AJAX 網頁技術」，到底 AJAX 是什麼東西呢？ AJAX 全稱為「 Asynchronous JavaScript and XML 」（非同步 JavaScript和 XML），是一種創建互動式網頁應用的網頁開發技術。它其實不是個新東西，它的技術综合了「 Javascript + DHTML + DOM + CSS + XMLHttp + XML 」等多種網頁開發技術，早在 2000 年便已經提出，一直到最近隨著 Web2.0 的網站興起，才再度被大家廣泛地討論 。

3

何謂 AJAX （一） AJAX 是 Asynchronous JavaScript And XML 的簡寫，它的裡面非常類似 Dynamic HTML 或 LAMP ， AJAX 不是指一種單一的技術，而是利用了一系列相關的技術， AJAX 也不是一項單獨的技術，它是由一堆現有的技術所組成，它組成技術有

（ 1 ） XHTML （或者 HTML ）加上 CSS 來作為資料的呈現。

（ 2 ）利用 DOM 以及 Javascript 來進行存取資料（大多為 XML ）的處理。

（ 3 ）利用 XMLHttpRequest 物件與遠端的 web server 進行非同步的資料交換。

4

何謂 AJAX （二） 它是综合了「 Javascript + DHTML + DOM + CSS + XMLHttp + XML 」等「多位一體」的互動式網頁應用開發技術，除了「所思即所見」特色外，「 AJAX 」可以說是一種以「客戶為導向的網頁應用 DIY 開發程式」。

主要的目的在於提高網頁的互動性（ interactivity ），速度（ speed ），以及可用性（ usability ）。想想看，如果我們能使一個網頁的互動方式可以達到類似 Microsoft Office 的境界，那麼網頁的可用性可以達到另一個層次。

5

何謂 AJAX （三） AJAX 自被 Google 的網頁使用之後，如 Gmail 、Google Maps 、和 Google Suggest 等，才被重視，而第一個提出 AJAX 這個名詞的就是 Jesse James Garrett。這樣的概念，開始的人們對於網頁是否會取代 desktop applications 進 行 討 論 ， 而 又 進 一 步 的 延 伸 出 What is Web 2.0 的討論。

6

使用 AJAX 的時機 （一） 當我們在 Google Maps 的使用中， browser 與 web server 之間需要傳遞非常大量的圖形資料，如果利用傳統的同步方式，在全部的圖形下載完成之前，我們沒辦法對網頁進行操作，而使用者點選往左、往右的按鈕後，使用者又得等待另一次的圖形傳遞。反之，如果我們可以在使用者操作的時候，非同步的下載其它圖形呢？這樣速度會變快，也不必一再的重複 reload 網頁。

7

使用 AJAX 的時機 （二） 當 AJAX engine 接收使用者全部或者部份的 form data 之後， AJAX engine 會跟 web server 連絡並由 web server 處理完成，並將完成的資料回傳給 AJAX engine ，然後再由 AJAX engine 將成果動態的呈現在網頁上。這些過程，使用者完全不會感受到，而且由於是非同步的，網頁不會停止接收使用者的操作。

8

傳統網頁與 AJAX 網頁的操作感覺 （一）

大家應該有過這種經驗，使用搜尋引擎找網頁資料時，按照搜尋引擎的分類一個個點進去。舉例而言，假如想找台灣之光王建民的選手資料（並非找新聞），從熱門分類找到運動體育這類，點擊後進到下一頁，再點選運動明星、點選棒球，好不容易找到正確的分類，這個分類下有三頁，再一頁頁找尋想找的資料，有興趣的人可以試試看，這樣找竟然還是找不到關於王建民的介紹。

9

傳統網頁與 AJAX 網頁的操作感覺 （二）

究竟要如何能更快、更直接的找到所需的資料呢？有別於一般入口網站，當今最著名的搜尋網站 Google http://www.google.com則是提供了強大的搜尋功能，畫面簡單明瞭，僅讓使用者輸入想查詢的字串，便會找出相關的資訊。最近 Google搜尋加入了「自動補齊字串」的新功能，此即為AJAX 的技術的應用之一。我們用一樣的範例透過Google 來搜尋。才剛輸入完前兩個字，底下就自動顯示許多搜尋關鍵字，後面並出現對應的搜尋結果次數。甚至可以再繼續增加關鍵字縮小搜尋結果的範圍。對使用者而言，可以更快更精準的找到所需的資料。因此透過 AJAX 技術的演進，使用者可以擺脫以往 Click and Wait 的痛苦經驗，取而代之的是「所思即所見」。

10

11

體驗 AJAX 風格的網頁

Google Maps Amazon Diamond Search Web Online Office （目前已可在網頁上做出如 Word 、 Excel 等功能的網頁應用程式 ）

12

13

14

何謂 Siliverlight （一） Microsoft Siliverlight ，中文譯為「銀光」，是微軟所發展的 Web 前端應用程式開發解決方案，是微軟豐富型網際網路應用程式（ Rich Internet Application ）策略的主要應用程式開發平台之一，以瀏覽器的外掛元件方式，提供 Web 應用程式中多媒體（含影音串流與音效串流）與高度互動性前端應用程式的解決方案，同時它也是微軟 UX （使用者經驗）策略中的一環，也是微軟試圖將美術設計和程式開發人員的工作明確切分與協同合作發展應用程式的嘗試之一。

15

何謂 Siliverlight （二） Siliverlight 包含 XAML 頁面佈局語言，為 WPF的子集合，配合 JavaScript ，可跨各家平台（ Windows Vista 、 Windows XP ，以及 Mac OS X ），利用內插（ plug-in ）技術，可執行於網頁瀏覽器之上，包括： Internet Explorer 、 Mozilla Firefox、 Safari 和 Netscape 。

Microsoft Siliverlight 可視為 .NET平台上的 AJAX 技術，功能包括向量圖形（ vector graphics ）、影像、視訊、動畫和文字等。 Microsoft Siliverlight省略了部份 XAML Browser Application 的功能，如立體圖形、檔案和硬體加速等功能。

16

何謂 Siliverlight （三） 一個 Microsoft Siliverlight專案會有 4個檔案：

1.顯示內容的 HTML檔案2.aghost.js ，以及 eventhandlers.js兩個檔案

3.XAML檔案4.JavaScript檔案

17

Siliverlight 的發展 （一） Siliverlight 1.0 由許多核心展示層架構組成，這關係到使用者介面（ UI ），使用者輸入（ user input ），基本使用者介面控制元件（ basic UI controls ），圖形（ graphics ）和動畫（ animation ）、媒體播放（ media playback ），數位權管理（ DRM ）的支援，以及 DOM 的整合。

18

Siliverlight 的發展 （二） Siliverlight 2.0 於 2008 年 10 月 13 日，微軟推出了 Siliverlight 2.0 的正式版，並提供了相關程式及檔案的下載安裝。 Siliverlight 2.0支援下列新功能特色，彌補了 Siliverlight 1.0 所欠缺的功能。

1.具備一個 .NET Framework縮小版的基礎類別函式庫。

2. 大量內建的 Siliverlight控制項 在 Siliverlight 1.0時，所有 UI 物件都必須透過 XAML 來自行描述繪製，並缺乏許多內建的 Siliverlight向量控制項，針對這點， Siliverlight 2.0 強化控制項方面的能力，內建許多向量控制項供開發人員直接使用。

19

Siliverlight 的發展 （三） 3.Skinning and Templating 外觀樣板的進階支援 透過 Skinning and Templating 的支援，可以自訂控制項之外觀與樣板，可以迅速及動態地套用不同的外觀。 4.Deep Zoom 一個高解析度的影像縮放技術，能夠在 Siliverlight 進行深度的圖片影像縮放功能。5. 廣泛的網路 Networking支援能力 舉例來說支援REST, WS*/SOAP, POX, RSS and standard HTTP services 等網路技術的呼叫，這部分對前端的 Siliverlight 特別重要，透過網路程式才能存取後端 Server 的資料，以回傳繫結顯示在 UI 之上。

20

Siliverlight 的發展 （四） 6.擴展的 .NET Language支援 Siliverlight 2.0不僅僅支援主流的 C#及 VB程式開發，亦進一步支援動態語言，例如 IronPython IronRuby 等等。 7. Siliverlight DRM 的支援 Siliverlight 2.0對於影音媒體內容的保護，是透過 DRM 技術來逹成，透過它就可以提供 Content內容保護。 8.改善伺服端的延展性及擴展廣告客戶支援 Siliverligt 2.0針對串流傳送資料方式、效率、下載播放方式再進一步強化改善其能力。9.活躍的的合作夥伴生態系統 微軟全球知名的 Visual Studio Industry Partners 合作夥伴包括了 ComponentOne LLC, Infragistics Inc. and Telerik ，提供了 Siliverlight 2.0 的商業元件，可在 Visual Studio 2008的環境中使用。

21

Siliverlight 的發展 （五） 10.跨平台及跨瀏覽器支援 支援 Mac, Windows and Linux in Firefox, Safari and Windows Internet Explorer 等平台瀏覽器。

Siliverlight 3.0 預計於 2009 年的某一天將問市

1.將支援 3D功能 2.支援顯示卡的 GPU 硬體加速 3.工具支援 Data-Binding 資料連結

22

報告完畢