第二章 相關研究與技術背景
2.3 前端頁面技術
作簡易，方便使用的前端頁面作為系統的進入點。微軟推出的.Net Framework 內 含一整套完善的開發工具套件，因此在前端頁面開發部分即採用此整合套件之平 台以開發前端頁面，另外再搭配其它前端頁面的開發工具常用的套件如 JQuery、
AJAX 及繪圖工具 HighCharts 等讓頁面呈現能更豐富完整。
2.3.1 ASP.NET
ASP.NET 是微軟公司(Microsoft)以.Net Framework 框架為基礎所推出的 Web 網站開發工具。ASP.NET 可以運行在安裝好.Net Framework 的 IIS(Internet Information Services,網際網路資訊服務)伺服器12上，包含一般的 Windows Server13或是 Windows 系統的個人電腦，其運作架構如下圖 2-5，對開發人員來
12 IIS(Internet Information Services,網際網路資訊服務)伺服器：是由微軟公司提供的基於運行。
Microsoft Windows 的網際網路基本服務的伺服器。
13 Windows Server：運行由微軟公司提出的伺服器作業系統。
16
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
說是一套很方便的網站開發平台，ASP.NET 主要用來開發動態的網頁，例如留 言版、部落格這些需要從資料庫撈取資料，產生出內容的程式語言。
圖2- 5 ASP.NET 流程架構 引用來源：https://msdn.microsoft.com
2.3.2 JQuery
在微軟 ASP.NET 中所包含的 JavaScript 函式庫 JQuery，其可以用來簡化 HTML14與 JavaScript 間的操作，JQuery 是目前最受歡迎的 JavaScript 函式庫。
JQuery 主要是用在 DOM 文件的操作，包含「快速選取元素(Element)」，有效 提高開發人員的效率，JQuery 提供了給開發人員建立外掛模組的能力。這使開 發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。模組 化的方式使 JQuery 函式庫能夠建立功能強大的動態網頁以及網路應用程式。也 因此 JQuery 幾乎成為了開發網頁中必備的重要函式庫。
14 HTML：HyperText Markup Language，是為「網頁建立和其它可在網頁瀏覽器中看到的資訊」
設計的一種標示語言。
17
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
2.3.3 AJAX
ASP.NET 中所整合的另一項重要技術，AJAX(Asynchronous JavaScript and XML, 非同步的 JavaScript 與 XML 技術) 是一套綜合了多項技術的網頁開發技 術。其重點在於有效減少網路傳輸上不必要的浪費。在舊有的 HTML 網站上，
當用戶端按下按鈕向伺服器端提出新需求時，即使只需改變一小塊頁面資料，伺 服器接受處理後一樣會回傳一個完整的頁面資訊給用戶端，但是前後兩個頁面中 的大部分 HTML 碼是相同的，這樣一再的重複傳送相同的資料，實在浪費了太 多的頻寬。因此 AJAX 的出現即改善這個情況，將傳送資料精簡至只傳送必要的 資料即可，大約只有原來的 5%。換言之 AJAX 最大的優點，就是能在不更新整 個頁面的前提下更新用戶端頁面資料，如此一來使得 Web 應用程式能更快速地 回應用戶端瀏覽器。
2.3.4 High Charts
High Charts 是一套以 JavaScript 為基礎且功能強大的 JQuery 圖表函式庫，
High Charts 提供開發人員簡單快速的在網站開發上添加各式各樣常見互動式圖 表的方法。目前有提供曲線圖、區域圖、柱狀圖、散狀點圖、及綜合圖表。由於 High Charts 使用 JavaScript 程式語言的關係，所以不用像 Flash 等軟體需要安裝 額外的程式。High Charts 具有很好的相容性，市面上大部份的瀏覽器都可以直 接使用。具有個人用戶免費、相容性高、圖表類型多、操作簡單等多樣優點，
High Charts 官方網站設計非常友善，提供快速教學及開發測試等多樣化功能。
18