Transcript 投影片 1 - Test Page for Apache Installation

Chapter 1
網頁程式與
ASP.NET 概論
著作權所有 © 旗標出版股份有限公司
本章提要




1 - 1 WWW 與 HTTP 協定
1 - 2 靜態網頁與動態網頁技術
1 - 3 .NET 的基礎知識
1 - 4 Visual Studio 2005 與 VWD 開發工具
2
1 - 1 WWW 與 HTTP 協定

Internet 已經成為人類生活與工作不可或缺
的工具, 而 WWW (World Wide Web) 可說
是促成 Internet 大流行的殺手級技術, 目前
WWW 仍然是 Internet 上最常被使用的服
務, WWW 網站所產生的各式應用, 例如論
壇、Blog、線上購物...等, 可說是目不暇
給。
3
WWW 與 HTTP 協定

WWW 是一種主從式的架構, 由用戶端 (瀏
覽器) 主動提出服務要求, 伺服器收到要求
之後, 才將資料回應給用戶端：
4
WWW 與 HTTP 協定

WWW 伺服器與用戶端之間使用 HTTP
(HyperText Transfer Protocol) 協定進行連
線與傳送資料, HTTP 是一種跨平台的通訊
協定, 它定義了伺服器與用戶端之間資料傳
輸方式。
5
1 - 2 靜態網頁與動態網頁技術





網頁的資料內容與顯示方式
WWW 網頁技術的演變
動態網頁技術
用戶端動態網頁技術
伺服器端動態網頁技術
6
網頁的資料內容與顯示方式

當我們瀏覽 WWW 網站時, 伺服器傳送給用
戶端的網頁是由 HTML 所構成, HTML 語法
定義了很多文字與排版的效果, 而瀏覽器則
會解析這些語法, 將文字與效果顯示於用戶
端：
7
網頁的資料內容與顯示方式
8
網頁的資料內容與顯示方式


單純的文字資料展示自然無法充分滿足需求,
所以 HTML 便定義了更多的標籤以豐富網頁
內容 (例如加入圖形、聲音等), 只要用戶端
的瀏覽器支援這些技術, 能夠解讀出正確的
展示方式, 便可呈現出多采多姿的資料。
簡單的說, 純文字格式的網頁是以 HTML 語
法來定義網頁中的內容及所要使用的物件,
而瀏覽器收到之後, 會進行解析, 然後依照
HTML 所定義的效果, 將內容展示出來。
9
網頁的資料內容與顯示方式
10
網頁的資料內容與顯示方式

因此我們所看到的各種效果文字、圖片或
多媒體資料, 其實都是由瀏覽器所產生或顯
示, 伺服器只負責提供文字、檔案和檔案位
置等資訊。
11
WWW 網頁技術的演變

從 WWW 的誕生到今日的蓬勃發展, WWW
網頁技術主要分成下面 2 種方式：
 靜態網頁：固定內容, 單純文字的資料顯
示, 或是包含圖片、聲音、動畫...等多媒
體效果。
 動態網頁：動態、具互動性內容的 WWW
網頁技術。
12
動態網頁技術

瀏覽器解析網頁內的 HTML 語法之後, 即可
將豐富的多媒體效果顯示於用戶端, 所以早
期 WWW 網站的製作技術著重於如何撰寫
HTML 語法以展現各種效果。
13
動態網頁技術
14
動態網頁技術

雖然 WWW 傳遞資料的功能仍然不變, 但是
隨著 WWW 的應用日漸廣泛, 靜態的效果已
無法滿足人們的需求, 大家開始希望網頁的
效果更豐富多樣；或是想要讓網頁依照不
同狀況, 顯示不同的訊息；甚至希望網站可
以和使用者產生互動的效果。
15
動態網頁技術
16
動態網頁技術


因此便陸續出現許多技術以提供動態網頁
的效果, 這些技術依照程式執行的位置, 主
要可以區分為用戶端與伺服器端等兩大
類。
顧名思義, 用戶端技術是在用戶的瀏覽器執
行程式來產生動態網頁, 而伺服器端技術是
由伺服器執行程式, 產生不同內容的網頁,
再傳送給瀏覽器顯示。
17
動態網頁技術

用戶端動態網頁技術 (例如：Java Applet、
JavaScript)：
18
動態網頁技術

伺服器端動態網頁技術 (例如：ASP.NET、
PHP、JSP)：
19
動態網頁技術


一般來說, 用戶端動態網頁技術因為是在瀏
覽器上執行程式, 所以使用者可以立即得到
程式執行結果, 也可減輕伺服器的負擔。
不過因為整個程式需透過網路傳送到用戶
端執行, 為避免傳送耗時, 通常程式不會設
計得太大, 故功能上也大多只用來顯示即時
資訊、產生特效等。
20
動態網頁技術


而伺服器端動態網頁技術將程式放置於伺
服器上執行, 程式設計的彈性相當大, 還可
以搭配資料庫系統, 設計出複雜的架構, 例
如會員機制、留言板 / 論壇...等。
動態網頁技術雖分為兩大類, 但應用時會依
照各種狀況與需求互相搭配使用。
21
動態網頁技術


例如本書介紹的 ASP.NET 雖然屬於伺服器
端動態網頁技術, 但是其中有些控制項也會
配合使用在用戶端執行的 JavaScript。
由於技術推陳出新, 目前各廠商發展出許多
製作動態網頁的程式語言或平台, 隨後將依
照這兩大分類, 分別介紹常見的動態網頁技
術。
22
用戶端動態網頁技術
下面是目前常見的用戶端動態網頁技術：
 Java Applet
 JavaScript
 VBScript
 ActionScript
 Ajax
23
Java Applet

Java Applet 是以 Sun 公司設計的 Java 語
言撰寫程式, 編譯成 Java bytecode 之後,
從伺服器送至用戶端, 然後由瀏覽器外掛的
JVM (Java Virtual Machine) 執行, 是 Java
推出初期最受重視的應用。
24
JavaScript


雖然 JavaScript 的名字以 “Java” 起頭, 但
其實與 Sun 公司的 Java 語言沒有關係。
JavaScript 是 Netscape 公司所開發的直譯
式 Script 語言, 可用來控制網頁上的元件,
產生各種效果。
JavaScript 的程式碼通常內嵌於網頁中, 瀏
覽器若支援 JavaScript, 收到網頁後便會執
行網頁內的 JavaScript 程式；除了內嵌程
式碼外, 設計者也可在網頁內指定執行位於
特定網址的 JavaScript 檔案。
25
JavaScript
26
JavaScript


JavaScript 廣被運用, 所以幾乎各瀏覽器都
可支援 JavaScript, 不過微軟所實作的
JavaScript 稱為 JScript。
此外, 因為 Netscape 公司將 JavaScript 提
交給 Ecma International 組織制訂為統一的
標準, 所以亦被稱為 ECMAScript。
27
VBScript


VBScript 是微軟公司開發的直譯式 Script
語言, 全名為 Visual Basic Script, 可以視為
Visual Basic 語言的簡化版本。
VBScript 應用於網頁時, 其功能與執行方式
與 JavaScript 相同, 但是目前只被 IE 瀏覽
器支援, 使用者較少。
28
ActionScript


Flash 是目前相當常用的動畫技術, 為了讓
Flash 動畫具有和使用者互動的能力,
Macromedia 公司特別開發出 ActionScript
程式語言, 可以用來控制動畫播放、移動或
改變動畫內的元件. . .等。
ActionScript 程式通常會包含在 Flash SWF
動畫內, 從伺服器傳送到用戶端之後, 再由
瀏覽器外掛的 Flash 播放器內的 AVM
(ActionScript Virtual Machine) 執行。
29
Ajax


Ajax (Asynchronous JavaScript And XML)
並非單一程式語言, 而是許多技術集合而成,
其中最重要的主角為 JavaScript。
瀏覽器載入使用 Ajax 技術的網頁後, 網頁
內的 JavaScript 會以 XML 為資料格式, 藉
由 HTTP 連線與伺服器端以 XML 格式交換
資料, 然後將結果顯示於用戶端。
30
Ajax


一般網頁程式執行時, 用戶端將資料送出後,
必須等待伺服器回傳『整個』網頁的內容,
所以會有明顯的重新載入網頁的動作。
若使用 Ajax 技術, 因為網頁與伺服器間只
需交換必要的資料, 不必重新傳送 HTML、
圖片...等內容, 所以用戶端會感受到較為順
暢的執行效率。
31
伺服器端動態網頁技術
以下為目前常見的伺服器端動態網頁技術：
 CGI
 PHP
 ASP
 ASP.NET
 JSP / Java Servlet
32
CGI

CGI (Common Gateway Interface) 為美國
國家超級電腦應用中心 (NCSA) 所開發的
技術, 是一個讓 WWW 伺服器可與外部程式
溝通的介面, 透過其居間傳遞資料, 讓用戶
端與遠端伺服器主機上的程式可以互相溝
通：
33
CGI



當用戶端透過網路傳送資料給伺服器時, 伺
服器會再將資料轉送給主機上的程式, 程式
進行處理後, 則以相反的流程送出網頁給用
戶端。
因為 CGI 只是一種介面規格, 所以只要符合
該規格且可在主機使用的程式, 都可以用來
做為 CGI 程式。
常被用來撰寫 CGI 程式的語言有 C、
Perl、Python 等, 其中 Perl 因具備強大的
文字處理能力而最受歡迎。
34
CGI

CGI 是早期製作伺服器端動態網頁最常用
的技術, 但是因為執行效率通常比不上後起
之秀的 PHP、ASP. . .等, 所以目前較少被
使用。
35
PHP


PHP (PHP：Hypertext Preprocessor) 是一
種運作於伺服器上的直譯式 Script 語言。
其程式碼與 JavaScript 類似, 皆須內嵌於網
頁中, 但不同於 JavaScript 需將程式碼送給
瀏覽器執行, PHP 則是在網頁被送出前, 先
被伺服器執行。
36
PHP
37
PHP


PHP 是目前開放原始碼系統中最常被使用
的伺服器端動態網頁技術, 許多人將
Linux、Apache、MySQL、PHP 的組合稱
為 LAMP。
不過除了 Linux 與 Apache 以外, PHP 也可
於 Windows 的 IIS 以及其他網頁伺服器上
面執行。
38
ASP

ASP (Active Server Pages) 是微軟公司開
發的動態網頁程式平台, 此平台提供許多網
頁程式設計所需的物件與控制項, 設計者可
以選擇各種語言 (例如：VBScript、
JScript、PerlScript...等直譯式 Script 語言)
來撰寫程式, 然後在程式中使用這些方便的
物件與控制項來產生網頁與各種效果。
39
ASP

ASP 的運作方式與 PHP 類似, 程式碼必須
內嵌在網頁內, 由 ASP 引擎執行程式並提
供各種物件的支援, 然後生成網頁後, 才交
由伺服器傳送至用戶端。
40
ASP.NET


ASP.NET 雖然從名稱上來看是改良自 ASP,
但是 ASP.NET 可說是完全重新打造的新產
品, 其建構於 .NET 架構上, 可使用 .NET 所
支援的語言 (Visual Basic、C#...等) 來開發
程式, 並且提供了更多物件與控制項。
撰寫程式時, 除了內嵌於網頁外, 也可以將
程式碼放置於獨立檔案。此外, ASP.NET 網
頁採編譯的方式, 所以執行效率遠比 PHP
或 ASP 等直譯網頁程式來得快, 本章隨後
會再詳細說明 .NET 與 ASP.NET 的架構。
41
JSP / Java Servlet


JSP (JavaServer Pages) 與 Java Servlet 是
Sun 公司所開發的技術, 使用 Java 語言撰寫
網頁程式。
JSP 提供類似 PHP 的方式, 可以讓程式碼內
嵌於網頁中, 而 Java Servlet 則是放置於伺
服器上面的 Java 程式。類似瀏覽器外掛
JVM 之後執行 Java Applet, WWW 伺服器可
以加裝 Servlet Container, 即可執行 JSP 網
頁或是 Java Servlet 程式。
42
JSP / Java Servlet
43
1 - 3 .NET 的基礎知識

.NET 架構

ASP.NET 的執行流程
44
.NET 架構

隨著電腦日益發展, 軟體的複雜度與日遽增,
加上物件導向發展逐漸成熟, 所以目前軟體
開發已經不像從前一樣, 整個軟體完全由一
個人或一個團隊撰寫, 而是類似硬體 IC, 運
用現有的軟體元件或機制開發出所需的功
能。
45
.NET 架構


.NET 便是微軟公司所發展的一種程式開發
與執行的架構, 在這個架構下, 桌面、網
頁、行動裝置. . .等應用程式都具有各種方
便使用的元件與開發機制, 可以讓程式設計
者更快速地發展各種軟體。
下面是 .NET 架構的示意圖：
46
.NET 架構
47
.NET 架構


前頁圖中的第一層可以看到, 目前 .NET 支
援 C++、C#、J#、Visual Basic 等語言, 不
論以哪一種語言開發程式, 都可以使
用 .NET 內的元件與機制。
而且因為各語言都使用相同的資料型別, 所
以彼此之間可以輕易的互相呼叫與溝通。
48
.NET 架構




第二層便是前面所述的各種開發機制, 例如
ASP.NET 便是專門用來發展網頁應用程式,
Windows Forms 主要針對桌面應用程式,
ADO.NET 則是各種資料庫的存取機制。
至於第三層的 .NET Framework 類別庫包
括了程式執行時所需的元件。
而第四層的 CLR 提供了 .NET 程式執行的
環境。
所以第二到第四層統稱為 .NET
Framework, 也就是 .NET 所有元件與開發
機制的總集合。
49
.NET 程式的執行方式


傳統程式可分為直譯式與編譯式的執行方
式, 直譯式雖然方便, 但是每次執行時都必
須重新轉譯, 導致執行效率較差。
編譯式會將程式轉譯為二進位的機器碼, 執
行效率較高, 但是因為不同電腦的機器語言
有所差異, 所以程式拿到其他平台時必須重
新編譯才能執行。
50
.NET 程式的執行方式


為了解決上述問題, .NET 採用了混合式的
作法, .NET 原始程式會編譯為二進位的中
間碼 (MSIL, Microsoft Intermediate
Language), 然後透過 CLR (Common
Language Runtime) 執行。
執行時, CLR 會先從 .NET Framework 類別
庫中載入必要的元件, 將中間碼與元件結合
後編譯為機器碼執行。
51
.NET 程式的執行方式
52
.NET 程式的執行方式

所以在 .NET 下, 程式執行方式與傳統的差
異如下：
53
.NET 程式的執行方式

從上面可以看到, .NET 程式編譯為中間碼
之後, 在具備 CLR 的環境下即可執行, 亦即
只要移植 CLR 到需要的平台, .NET 程式便
可直接跨平台運作。突破了傳統編譯式無
法跨平台的缺點, 也可以避免傳統直譯式效
率不彰的問題。
54
.NET 程式的執行方式

雖然與傳統程式相較之下, 執行 .NET 程式
時中間多了 CLR, 但是 .NET 具有良好的快
取機制, 所以除了第一次執行時可能稍慢之
外, 其他情形下執行速度並不會受到太大的
影響。
55
.NET 的優點
.NET 基於其架構與設計, 具備了以下優點：
 支援多種程式語言
 跨平台的可能性
 應用程式可輕易支援 .NET
 製作網路服務的能力
56
支援多種程式語言


.NET 是一個架構, 而非單一程式語言, 亦即
只要程式語言符合 .NET 架構的規範, 就能
夠在 .NET 中使用。而且因為各語言符合統
一規範, 所以彼此可互相呼叫與溝通。
所以在 .NET 中, 程式設計者可以自由選擇
熟悉的語言進行開發, 而且還可輕鬆與使用
其他語言的設計者互相配合。
57
跨平台的可能性


因為使用中間碼的設計, 只要移植
CLR, .NET 程式就可以直接在各平台執
行。
雖然目前微軟只有提供 Windows 平台的
CLR, 但是開放原始碼社群已經開發了
Mono 專案, 可以在 Linux 系統上執行 .NET
程式。
58
應用程式可輕易支援 .NET


應用程式只要可以整合系統上的 CLR, 就能
使用 .NET 為本身程式開發額外功能。
例如 SQL Server 2005 整合了 CLR 之後,
可以使用 .NET 撰寫資料庫的預存程序、自
訂函數與觸發程序...等, 不再受限只能使用
T-SQL。
59
製作網路服務的能力

.NET 以網路為其名稱, 對於網路服務的製
作能力自然不可缺少。在 .NET 中不論使用
哪一種程式語言, 都可以輕鬆地開發 Web
Services。對於已有的 .NET 程式, 也可以
很簡單地為其加上 Web Services 的功能。
60
ASP.NET 的執行流程


ASP.NET 開發網站時, 可以使用任何一
種 .NET 所支援的語言撰寫網頁程式。
當用戶端連線 ASP.NET 網頁時, 其執行的
流程如下：
61
ASP.NET 的執行流程
62
ASP.NET 的執行流程


當 ASP.NET 網頁第一次被連線時, 因為需
要編譯為中間碼, 所以使用者可能會覺得速
度稍遲緩。
不過在編譯完成後, 之後其他用戶端連線時,
便可以直接執行, 速度會立刻提升, 比起直
譯式的網頁程式 (如 ASP、PHP) 快上不
少。
63
ASP.NET 的執行流程


因為 ASP.NET 架構於 .NET 上, 所以
ASP.NET 程式可以使用 .NET Framework
類別函式庫中各式各樣方便的元件, 這些元
件功能強大而且使用方便。
除了這些元件外, ASP.NET 更提供了許多控
制項與機制, 包含資料驗證、帳號管理、會
員資料、網站地圖. . .等, 可以加快網站的開
發速度。
64
1 - 4 Visual Studio 2005 與 VWD
開發工具


最傳統的程式設計方式是使用文書編輯工
具輸入程式原始碼, 存檔後將原始碼檔交由
編譯程式轉換為執行檔, 然後進行測試, 發
現問題時則回到文書編輯工具修改原始碼,
然後重新編譯、執行、測試。
上面傳統的程序不可不謂繁瑣, 所以為了加
快開發速度, 便出現了 IDE (Integrated
Development Environment) 將上面程序整
合進單一軟體。
65
Visual Studio 2005 與 VWD 開發
工具


而後各廠商更加入了 Framework, 讓許多功
能都可以藉由加入元件的方式來達成。
Visual Studio 2005 便是微軟公司為 .NET
程式設計者所提供的 IDE 軟體, 其支援多種
程式語言, 而且具備統一的開發介面, 不論
開發桌面應用程式、ASP.NET 網頁程式、
XML Web Service 或是行動裝置應用程式,
都可以在相同的環境與介面下完成。
66
Visual Studio 2005 與 VWD 開發
工具


因為 Visual Studio 2005 是特別為了 .NET
量身訂做, 所以許多 .NET Framework 內的
控制項、元件與機制, 都可以藉由圖形介面
與滑鼠動作來完成。
舉例來說, 假設要為網站設計會員機制, 從
前得先規劃資料庫, 然後撰寫程式碼來完成,
現在只要在圖形介面下用滑鼠即可完成大
部分的功能。
67
Visual Studio 2005 與 VWD 開發
工具


依照功能的不同, Visual Studio 2005 分成
許多版本, 各版本的功能比較請參閱
http://www.microsoft.com/taiwan/vstudio/pr
oducts/compare/default.aspx。
值得注意的是, 除了付費的版本外, 微軟公
司也提供一系列不同用途的免費版本, 其中
Visual Web Developer (本書隨後簡稱
VWD) 便是特別為了開發 ASP.NET 網站所
推出：
68
Visual Studio 2005 與 VWD 開發
工具
VWD 的圖
形設計介面
69
Visual Studio 2005 與 VWD 開發
工具


在 VWD 內可以使用 C# 與 Visual Basic 設
計 ASP.NET 網頁, 而且還隨附 SQL Server
Express 資料庫伺服器, 可以開發較為複
雜、以資料庫為資料後端的網站。
本書隨後便將使用 VWD 來介紹如何撰寫
ASP.NET 程式, 如果您尚未安裝 VWD, 可
以參考附錄 A, 使用書附光碟自行安裝
VWD。
70