Chapter 1 網頁程式與 ASP.NET 概論.

Presentation on theme: "Chapter 1 網頁程式與 ASP.NET 概論."— Presentation transcript:

1 Chapter 1 網頁程式與 ASP.NET 概論

2 本章提要 1 - 1 WWW 與 HTTP 協定 1 - 2 靜態網頁與動態網頁技術 1 - 3 .NET 的基礎知識
1 - 4 Visual Studio 2005 與 VWD 開發工具

3 1 - 1 WWW 與 HTTP 協定 Internet 已經成為人類生活與工作不可或缺的工具, 而 WWW (World Wide Web) 可說是促成 Internet 大流行的殺手級技術, 目前 WWW 仍然是 Internet 上最常被使用的服務, WWW 網站所產生的各式應用, 例如論壇、Blog、線上購物...等, 可說是目不暇給。

4 WWW 與 HTTP 協定 WWW 是一種主從式的架構, 由用戶端 (瀏覽器) 主動提出服務要求, 伺服器收到要求之後, 才將資料回應給用戶端：

5 WWW 與 HTTP 協定 WWW 伺服器與用戶端之間使用 HTTP (HyperText Transfer Protocol) 協定進行連線與傳送資料, HTTP 是一種跨平台的通訊協定, 它定義了伺服器與用戶端之間資料傳輸方式。

6 1 - 2 靜態網頁與動態網頁技術 網頁的資料內容與顯示方式 WWW 網頁技術的演變 動態網頁技術 用戶端動態網頁技術 伺服器端動態網頁技術

7 網頁的資料內容與顯示方式 當我們瀏覽 WWW 網站時, 伺服器傳送給用戶端的網頁是由 HTML 所構成, HTML 語法定義了很多文字與排版的效果, 而瀏覽器則會解析這些語法, 將文字與效果顯示於用戶端：

8 網頁的資料內容與顯示方式

9 網頁的資料內容與顯示方式 單純的文字資料展示自然無法充分滿足需求, 所以 HTML 便定義了更多的標籤以豐富網頁內容 (例如加入圖形、聲音等), 只要用戶端的瀏覽器支援這些技術, 能夠解讀出正確的展示方式, 便可呈現出多采多姿的資料。 簡單的說, 純文字格式的網頁是以 HTML 語法來定義網頁中的內容及所要使用的物件, 而瀏覽器收到之後, 會進行解析, 然後依照 HTML 所定義的效果, 將內容展示出來。

10 網頁的資料內容與顯示方式

11 網頁的資料內容與顯示方式 因此我們所看到的各種效果文字、圖片或多媒體資料, 其實都是由瀏覽器所產生或顯示, 伺服器只負責提供文字、檔案和檔案位置等資訊。

12 WWW 網頁技術的演變 從 WWW 的誕生到今日的蓬勃發展, WWW 網頁技術主要分成下面 2 種方式：
靜態網頁：固定內容, 單純文字的資料顯示, 或是包含圖片、聲音、動畫...等多媒體效果。 動態網頁：動態、具互動性內容的 WWW 網頁技術。

13 動態網頁技術 瀏覽器解析網頁內的 HTML 語法之後, 即可將豐富的多媒體效果顯示於用戶端, 所以早期 WWW 網站的製作技術著重於如何撰寫 HTML 語法以展現各種效果。

14 動態網頁技術

15 動態網頁技術 雖然 WWW 傳遞資料的功能仍然不變, 但是隨著 WWW 的應用日漸廣泛, 靜態的效果已無法滿足人們的需求, 大家開始希望網頁的效果更豐富多樣；或是想要讓網頁依照不同狀況, 顯示不同的訊息；甚至希望網站可以和使用者產生互動的效果。

16 動態網頁技術

17 動態網頁技術 因此便陸續出現許多技術以提供動態網頁的效果, 這些技術依照程式執行的位置, 主要可以區分為用戶端與伺服器端等兩大類。
顧名思義, 用戶端技術是在用戶的瀏覽器執行程式來產生動態網頁, 而伺服器端技術是由伺服器執行程式, 產生不同內容的網頁, 再傳送給瀏覽器顯示。

18 動態網頁技術 用戶端動態網頁技術 (例如：Java Applet、JavaScript)：

19 動態網頁技術 伺服器端動態網頁技術 (例如：ASP.NET、PHP、JSP)：

20 動態網頁技術 一般來說, 用戶端動態網頁技術因為是在瀏覽器上執行程式, 所以使用者可以立即得到程式執行結果, 也可減輕伺服器的負擔。
不過因為整個程式需透過網路傳送到用戶端執行, 為避免傳送耗時, 通常程式不會設計得太大, 故功能上也大多只用來顯示即時資訊、產生特效等。

21 動態網頁技術 而伺服器端動態網頁技術將程式放置於伺服器上執行, 程式設計的彈性相當大, 還可以搭配資料庫系統, 設計出複雜的架構, 例如會員機制、留言板 / 論壇...等。 動態網頁技術雖分為兩大類, 但應用時會依照各種狀況與需求互相搭配使用。

22 動態網頁技術 例如本書介紹的 ASP.NET 雖然屬於伺服器端動態網頁技術, 但是其中有些控制項也會配合使用在用戶端執行的 JavaScript。 由於技術推陳出新, 目前各廠商發展出許多製作動態網頁的程式語言或平台, 隨後將依照這兩大分類, 分別介紹常見的動態網頁技術。

23 用戶端動態網頁技術 下面是目前常見的用戶端動態網頁技術： Java Applet JavaScript VBScript
ActionScript Ajax

24 Java Applet Java Applet 是以 Sun 公司設計的 Java 語言撰寫程式, 編譯成 Java bytecode 之後, 從伺服器送至用戶端, 然後由瀏覽器外掛的 JVM (Java Virtual Machine) 執行, 是 Java 推出初期最受重視的應用。

25 JavaScript 雖然 JavaScript 的名字以 “Java” 起頭, 但其實與 Sun 公司的 Java 語言沒有關係。JavaScript 是 Netscape 公司所開發的直譯式 Script 語言, 可用來控制網頁上的元件, 產生各種效果。 JavaScript 的程式碼通常內嵌於網頁中, 瀏覽器若支援 JavaScript, 收到網頁後便會執行網頁內的 JavaScript 程式；除了內嵌程式碼外, 設計者也可在網頁內指定執行位於特定網址的 JavaScript 檔案。

26 JavaScript

27 JavaScript JavaScript 廣被運用, 所以幾乎各瀏覽器都可支援 JavaScript, 不過微軟所實作的 JavaScript 稱為 JScript。 此外, 因為 Netscape 公司將 JavaScript 提交給 Ecma International 組織制訂為統一的標準, 所以亦被稱為 ECMAScript。

28 VBScript VBScript 是微軟公司開發的直譯式 Script 語言, 全名為 Visual Basic Script, 可以視為 Visual Basic 語言的簡化版本。 VBScript 應用於網頁時, 其功能與執行方式與 JavaScript 相同, 但是目前只被 IE 瀏覽器支援, 使用者較少。

29 ActionScript Flash 是目前相當常用的動畫技術, 為了讓 Flash 動畫具有和使用者互動的能力, Macromedia 公司特別開發出 ActionScript 程式語言, 可以用來控制動畫播放、移動或改變動畫內的元件. . .等。 ActionScript 程式通常會包含在 Flash SWF 動畫內, 從伺服器傳送到用戶端之後, 再由瀏覽器外掛的 Flash 播放器內的 AVM (ActionScript Virtual Machine) 執行。

30 Ajax Ajax (Asynchronous JavaScript And XML) 並非單一程式語言, 而是許多技術集合而成, 其中最重要的主角為 JavaScript。 瀏覽器載入使用 Ajax 技術的網頁後, 網頁內的 JavaScript 會以 XML 為資料格式, 藉由 HTTP 連線與伺服器端以 XML 格式交換資料, 然後將結果顯示於用戶端。

31 Ajax 一般網頁程式執行時, 用戶端將資料送出後, 必須等待伺服器回傳『整個』網頁的內容, 所以會有明顯的重新載入網頁的動作。
若使用 Ajax 技術, 因為網頁與伺服器間只需交換必要的資料, 不必重新傳送 HTML、圖片...等內容, 所以用戶端會感受到較為順暢的執行效率。

32 伺服器端動態網頁技術 以下為目前常見的伺服器端動態網頁技術： CGI PHP ASP ASP.NET JSP / Java Servlet

33 CGI CGI (Common Gateway Interface) 為美國國家超級電腦應用中心 (NCSA) 所開發的技術, 是一個讓 WWW 伺服器可與外部程式溝通的介面, 透過其居間傳遞資料, 讓用戶端與遠端伺服器主機上的程式可以互相溝通：

34 CGI 當用戶端透過網路傳送資料給伺服器時, 伺服器會再將資料轉送給主機上的程式, 程式進行處理後, 則以相反的流程送出網頁給用戶端。
因為 CGI 只是一種介面規格, 所以只要符合該規格且可在主機使用的程式, 都可以用來做為 CGI 程式。 常被用來撰寫 CGI 程式的語言有 C、Perl、Python 等, 其中 Perl 因具備強大的文字處理能力而最受歡迎。

35 CGI CGI 是早期製作伺服器端動態網頁最常用的技術, 但是因為執行效率通常比不上後起之秀的 PHP、ASP. . .等, 所以目前較少被使用。

36 PHP PHP (PHP：Hypertext Preprocessor) 是一種運作於伺服器上的直譯式 Script 語言。
其程式碼與 JavaScript 類似, 皆須內嵌於網頁中, 但不同於 JavaScript 需將程式碼送給瀏覽器執行, PHP 則是在網頁被送出前, 先被伺服器執行。

37 PHP

38 PHP PHP 是目前開放原始碼系統中最常被使用的伺服器端動態網頁技術, 許多人將 Linux、Apache、MySQL、PHP 的組合稱為 LAMP。 不過除了 Linux 與 Apache 以外, PHP 也可於 Windows 的 IIS 以及其他網頁伺服器上面執行。

39 ASP ASP (Active Server Pages) 是微軟公司開發的動態網頁程式平台, 此平台提供許多網頁程式設計所需的物件與控制項, 設計者可以選擇各種語言 (例如：VBScript、JScript、PerlScript...等直譯式 Script 語言) 來撰寫程式, 然後在程式中使用這些方便的物件與控制項來產生網頁與各種效果。

40 ASP ASP 的運作方式與 PHP 類似, 程式碼必須內嵌在網頁內, 由 ASP 引擎執行程式並提供各種物件的支援, 然後生成網頁後, 才交由伺服器傳送至用戶端。

41 ASP.NET ASP.NET 雖然從名稱上來看是改良自 ASP, 但是 ASP.NET 可說是完全重新打造的新產品, 其建構於 .NET 架構上, 可使用 .NET 所支援的語言 (Visual Basic、C#...等) 來開發程式, 並且提供了更多物件與控制項。 撰寫程式時, 除了內嵌於網頁外, 也可以將程式碼放置於獨立檔案。此外, ASP.NET 網頁採編譯的方式, 所以執行效率遠比 PHP 或 ASP 等直譯網頁程式來得快, 本章隨後會再詳細說明 .NET 與 ASP.NET 的架構。

42 JSP / Java Servlet JSP (JavaServer Pages) 與 Java Servlet 是 Sun 公司所開發的技術, 使用 Java 語言撰寫網頁程式。 JSP 提供類似 PHP 的方式, 可以讓程式碼內嵌於網頁中, 而 Java Servlet 則是放置於伺服器上面的 Java 程式。類似瀏覽器外掛 JVM 之後執行 Java Applet, WWW 伺服器可以加裝 Servlet Container, 即可執行 JSP 網頁或是 Java Servlet 程式。

43 JSP / Java Servlet

44 NET 的基礎知識 .NET 架構 ASP.NET 的執行流程

45 .NET 架構 隨著電腦日益發展, 軟體的複雜度與日遽增, 加上物件導向發展逐漸成熟, 所以目前軟體開發已經不像從前一樣, 整個軟體完全由一個人或一個團隊撰寫, 而是類似硬體 IC, 運用現有的軟體元件或機制開發出所需的功能。

46 .NET 架構 .NET 便是微軟公司所發展的一種程式開發與執行的架構, 在這個架構下, 桌面、網頁、行動裝置. . .等應用程式都具有各種方便使用的元件與開發機制, 可以讓程式設計者更快速地發展各種軟體。 下面是 .NET 架構的示意圖：

47 .NET 架構

48 .NET 架構 前頁圖中的第一層可以看到, 目前 .NET 支援 C++、C#、J#、Visual Basic 等語言, 不論以哪一種語言開發程式, 都可以使用 .NET 內的元件與機制。 而且因為各語言都使用相同的資料型別, 所以彼此之間可以輕易的互相呼叫與溝通。

49 .NET 架構 第二層便是前面所述的各種開發機制, 例如 ASP.NET 便是專門用來發展網頁應用程式, Windows Forms 主要針對桌面應用程式, ADO.NET 則是各種資料庫的存取機制。 至於第三層的 .NET Framework 類別庫包括了程式執行時所需的元件。 而第四層的 CLR 提供了 .NET 程式執行的環境。 所以第二到第四層統稱為 .NET Framework, 也就是 .NET 所有元件與開發機制的總集合。

50 .NET 程式的執行方式 傳統程式可分為直譯式與編譯式的執行方式, 直譯式雖然方便, 但是每次執行時都必須重新轉譯, 導致執行效率較差。
編譯式會將程式轉譯為二進位的機器碼, 執行效率較高, 但是因為不同電腦的機器語言有所差異, 所以程式拿到其他平台時必須重新編譯才能執行。

51 .NET 程式的執行方式 為了解決上述問題, .NET 採用了混合式的作法, .NET 原始程式會編譯為二進位的中間碼 (MSIL, Microsoft Intermediate Language), 然後透過 CLR (Common Language Runtime) 執行。 執行時, CLR 會先從 .NET Framework 類別庫中載入必要的元件, 將中間碼與元件結合後編譯為機器碼執行。

52 .NET 程式的執行方式

53 .NET 程式的執行方式 所以在 .NET 下, 程式執行方式與傳統的差異如下：

54 .NET 程式的執行方式 從上面可以看到, .NET 程式編譯為中間碼之後, 在具備 CLR 的環境下即可執行, 亦即只要移植 CLR 到需要的平台, .NET 程式便可直接跨平台運作。突破了傳統編譯式無法跨平台的缺點, 也可以避免傳統直譯式效率不彰的問題。

55 .NET 程式的執行方式 雖然與傳統程式相較之下, 執行 .NET 程式時中間多了 CLR, 但是 .NET 具有良好的快取機制, 所以除了第一次執行時可能稍慢之外, 其他情形下執行速度並不會受到太大的影響。

56 .NET 的優點 .NET 基於其架構與設計, 具備了以下優點： 支援多種程式語言 跨平台的可能性 應用程式可輕易支援 .NET
製作網路服務的能力

57 支援多種程式語言 .NET 是一個架構, 而非單一程式語言, 亦即只要程式語言符合 .NET 架構的規範, 就能夠在 .NET 中使用。而且因為各語言符合統一規範, 所以彼此可互相呼叫與溝通。 所以在 .NET 中, 程式設計者可以自由選擇熟悉的語言進行開發, 而且還可輕鬆與使用其他語言的設計者互相配合。

58 跨平台的可能性 因為使用中間碼的設計, 只要移植 CLR, .NET 程式就可以直接在各平台執行。
雖然目前微軟只有提供 Windows 平台的 CLR, 但是開放原始碼社群已經開發了 Mono 專案, 可以在 Linux 系統上執行 .NET 程式。

59 應用程式可輕易支援 .NET 應用程式只要可以整合系統上的 CLR, 就能使用 .NET 為本身程式開發額外功能。
例如 SQL Server 2005 整合了 CLR 之後, 可以使用 .NET 撰寫資料庫的預存程序、自訂函數與觸發程序...等, 不再受限只能使用 T-SQL。

60 製作網路服務的能力 .NET 以網路為其名稱, 對於網路服務的製作能力自然不可缺少。在 .NET 中不論使用哪一種程式語言, 都可以輕鬆地開發 Web Services。對於已有的 .NET 程式, 也可以很簡單地為其加上 Web Services 的功能。

61 ASP.NET 的執行流程 ASP.NET 開發網站時, 可以使用任何一種 .NET 所支援的語言撰寫網頁程式。

62 ASP.NET 的執行流程

63 ASP.NET 的執行流程 當 ASP.NET 網頁第一次被連線時, 因為需要編譯為中間碼, 所以使用者可能會覺得速度稍遲緩。
不過在編譯完成後, 之後其他用戶端連線時, 便可以直接執行, 速度會立刻提升, 比起直譯式的網頁程式 (如 ASP、PHP) 快上不少。

64 ASP.NET 的執行流程 因為 ASP.NET 架構於 .NET 上, 所以 ASP.NET 程式可以使用 .NET Framework 類別函式庫中各式各樣方便的元件, 這些元件功能強大而且使用方便。 除了這些元件外, ASP.NET 更提供了許多控制項與機制, 包含資料驗證、帳號管理、會員資料、網站地圖. . .等, 可以加快網站的開發速度。

65 1 - 4 Visual Studio 2005 與 VWD 開發工具
最傳統的程式設計方式是使用文書編輯工具輸入程式原始碼, 存檔後將原始碼檔交由編譯程式轉換為執行檔, 然後進行測試, 發現問題時則回到文書編輯工具修改原始碼, 然後重新編譯、執行、測試。 上面傳統的程序不可不謂繁瑣, 所以為了加快開發速度, 便出現了 IDE (Integrated Development Environment) 將上面程序整合進單一軟體。

66 Visual Studio 2005 與 VWD 開發工具
而後各廠商更加入了 Framework, 讓許多功能都可以藉由加入元件的方式來達成。 Visual Studio 2005 便是微軟公司為 .NET 程式設計者所提供的 IDE 軟體, 其支援多種程式語言, 而且具備統一的開發介面, 不論開發桌面應用程式、ASP.NET 網頁程式、XML Web Service 或是行動裝置應用程式, 都可以在相同的環境與介面下完成。

67 Visual Studio 2005 與 VWD 開發工具
因為 Visual Studio 2005 是特別為了 .NET 量身訂做, 所以許多 .NET Framework 內的控制項、元件與機制, 都可以藉由圖形介面與滑鼠動作來完成。 舉例來說, 假設要為網站設計會員機制, 從前得先規劃資料庫, 然後撰寫程式碼來完成, 現在只要在圖形介面下用滑鼠即可完成大部分的功能。

68 Visual Studio 2005 與 VWD 開發工具
值得注意的是, 除了付費的版本外, 微軟公司也提供一系列不同用途的免費版本, 其中 Visual Web Developer (本書隨後簡稱 VWD) 便是特別為了開發 ASP.NET 網站所推出：

69 Visual Studio 2005 與 VWD 開發工具
形設計介面

70 Visual Studio 2005 與 VWD 開發工具
在 VWD 內可以使用 C# 與 Visual Basic 設計 ASP.NET 網頁, 而且還隨附 SQL Server Express 資料庫伺服器, 可以開發較為複雜、以資料庫為資料後端的網站。 本書隨後便將使用 VWD 來介紹如何撰寫 ASP.NET 程式, 如果您尚未安裝 VWD, 可以參考附錄 A, 使用書附光碟自行安裝 VWD。