AJAX 網頁設計技術於校務行政資訊系統之應用
AJAX Web-page Design Technology applied in
School Administrative Affairs Information System
郭惠煌 蕭裕正
華夏技術學院電機工程系 德明技術學院物流管理系
kuohh@cc.hwh.edu.tw jeyu@pchome.com.tw
摘要
AJAX 為近兩年網路上熱門的討論話題，它的 全名為 Asynchronous JavaScript and XML（非同步 的 JavaScript 與 XML），是一種建立互動式網頁的 瀏覽器端開發技術，主要原理是運用 JavaScript 針 對網頁文件 DOM（Document Object Model）進行 動態顯示及交互控制，並使用 XML 和 XSLT 進行 資料交換及相關操作。它的優點是整個網頁頁面不 需要重新下載，加快網頁介面顯示速度，減少網路 流量，減輕伺服器負擔，減少使用者等待頁面更新 的時間，如果使用得當，能建立更具互動性與親和 性的使用操作介面，讓執行網路應用程式也能像桌 面應用程式一樣方便、靈活、快速。 本文作者將 AJAX 技術運用於華夏技術學院校 務行政資訊系統的開發，套用自行開發的 AJAX 程 式模組，改善一般動態資料庫網頁操作過程中，需 要頻頻換頁與重新載入之弊病，減輕伺服器負擔， 解決前後端之間大資料量傳輸及處理問題，明顯改 善網頁資料的顯示及處理速度，並參酌保留桌面應 用程式之優點，如輔助輸入片語、輔助關聯詞庫、 萬年曆、計算器等人性化便捷輸入工具，增加網際 網路特性，如線上發送電子郵件、檔案傳輸等；該 系統包括「校務行政網路化系統」及「學生暨家長 查詢服務系統」兩大系統，已成功地運轉超過三年 ，截至目前已開發完成 139 項功能、310 個報表、 超過 1600 支程式檔，並已建立 139 個資料表格， 整個系統執行效能良好，現仍持續開發中。 關鍵詞：AJAX、校務行政資訊系統、網路應用程 式。
ABSTRACT
AJAX is the hot topic for discussion over the network in the latest two years, its full name is “Asynchronous JavaScript and XML”, it is a developing technology at browser side to create interactive web-pages. It utilizes JavaScript language to control the DOM dynamically, and also use XML and XSLT to exchange data and related operation. The
advantages are : There’s no need to reload full web page, speed up displaying user interface, reduce the network flow, lighten the server load, decrease the waiting time for page reload. More interactive and friendly user interface can be created if utilized appropriately, and make Web AP as convenient, flexible and speedy as Desktop AP.
The author of this paper utilized AJAX technology to develop School Administrative Affairs for Hwa-Hsia Institute of Technology with the AJAX programming modules developed by himself. The effects are : improving the disadvantage of page refresh and reload frequently during operative process, reducing server load, and solving the problem of large amount data transferring between client and server, and improving the page data displaying and handling speed, and preserving the advantages of the desktop applications, such as phrase input, related phrase input, on-line calendar, on-line calculator, etc, and increasing the internet characteristics, such as on-line email sending, file transfer,…etc. The School -Administrative Affairs System have been run over three years successfully, which includes two main system : “School Administrative Affairs Web System” and “Query Service System for Student and Parents”. As far 139 functions, 310 reports, over 1600 programs, and 139 data tables has been completed. The system has good performance, and keeps on developing. Keywords: AJAX、School-Administrative Affairs、 Web Application
1.
前言
網路版校務行政資訊系統的特性：需求功能多 、上線使用人次多、網路資料傳輸量大，就設計技 術層面而言，若以傳統網頁技術去設計程式，會有 下列缺點： 1. 等待後端處理及回應的時間過長 傳統網頁設計通常是採用前端瀏覽器點選連結 後，將請求(Request)送至後端伺服器處理，然 後再將回應(Response)送回前端重新顯示，資料 往返及處理需要相當等待的時間，如果回應的 資料量或網頁內容龐大，則需更長等待時間。2. 網頁更新頻繁造成畫面閃爍 網頁更新頻繁會讓人感覺操作不流暢，甚至造 成畫面閃爍，同時也會增加網路流量，拖慢畫 面更新速度。 3. 伺服器負擔重 多人次頻繁的前端請求，會增加伺服端處理的 負擔。 4. 操作介面缺乏親和性與人性化 網路應用程式的客戶端資料及畫面更新常需仰 賴遠端伺服器供給，而資料取得無法像桌面型 應用程式那麼快速方便，自然也限制了操作介 面的設計模式，無法設計出類似桌面型應用程 式「即時點按、即時取得資料」具親和性與人 性化的操作介面。 如何改善這些缺點，是這幾年網頁設計技術上 想突破的課題，過去許多年網頁程式設計師使用 Java Applet 或 Flash 去解決這些問題，但這兩項設 計方法，存在下列一些限制：
1. 第一次執行時都需要相當時間的等待元件或檔 案下載。
2. 執行 Java Applet，瀏覽器端需要安裝 Java 虛擬 機器(Java Virtual Machine)。
3. 執行 Flash，瀏覽器端需要安裝 Shockwave Flash Player。 4. 為了客戶端安全緣故，Java Applet 不允許讀取 檔案系統，也不能載入原始程式庫，無法啟動 客戶端上的程式。 5. 需要專用的 Flash 開發工具，而且需要付費。 AJAX 的技術是針對改善這些缺點而提出的， 主要原理是運用瀏覽器本身就支援的 JavaScript 去 控制網頁文件介面 DOM 的顯示及操作。
2. 文獻探討
利用 JavaScript 或 XHTML 控制頁面的技術多 年前國內外就有人使用，例如，陳恭就運用 MVC (Model-View-Control)架構及技術開發 One-Page Web Application[33~34]，本文作者也曾在校務行政 系統中大量使用[31~32]，但直到 2005 年 2 月由 Jesse James Garrett 在他的文章 Ajax:A New Approach to Web Applications[10]中首先創造了 AJAX 這個名詞 ，後來經由 Google 在 Google Labs 發佈 Google Maps 及 Google Suggest 時[21~23]，這項技術才為 人所認識，直到今天網路上已有許多經開發完成的 Ajax 設計框架(Framework)及工具(Tools)供人下載 應用[11~20]，國內外並陸續有相關書籍出版[1~5]， 相信這項技術會引發國內外網頁程式設計者的研 究與應用。 教育部極重視校園 e 化的課題，也積極推動各 大專院校 e 化的腳步，並透過各校建設經驗交流與 心得分享，希望提昇各院校 e 化的整體效能，因此 曾於民國 91 年召開「全國大專院校電算中心主任 研討會議」，並於 92 年在北、中、南三區積極展開 「教育行政、校園 e 化」的各項活動[41]，近年來， 各校校務行政系統隨著網路應用程式技術的進步 與開發工具多樣化，也逐步改成可以透過網際網路 上線執行的 3-Tier 架構網路程式，讓校園資訊分享 與服務更方便廣泛，本文作者以過去網路應用程式 實際設計經驗，就實務技術層面，提供可以提昇程 式執行效能的設計方法，供各校開發設計者參考。3. 設計原理及方法
3.1 AJAX 作用原理 根據維基百科(Wikipedia)的解釋[6]，AJAX 全 名為 Asynchronous JavaScript and XML（非同步的JavaScript 與 XML），是一種建立互動式網頁的開發
技術。它主要是依據下列原理與方式作用： 1. 使用 XHTML+CSS 來控制顯示資訊的介面。 2. 使用 JavaScript 操作 DOM（Document Object
Model）進行動態顯示及交互控制。 3. 使用 XML 和 XSLT 進行資料交換及相關操作。 4. 使用 XMLHttpRequest 物件與 Web 伺服器進行 非同步資料交換。 5. 使用隱藏的 iframe 做非同步背景執行，將客戶 端的請求送至伺服器端處理，又將伺服器的處 理結果使用 JavaScript 顯示於客戶端畫面。 6. 它是瀏覽器端的程式，與伺服器端採用的
Server Script 無關，可以與伺服器端 ASP、 PHP、JSP、.NET、ColdFusion 等不同語言開 發的程式相互結合。 3.2 AJAX 架構 傳統網頁瀏覽器與伺服器之間的請求/回應溝 通，是採用同步式通訊；而 AJAX 是一種三層式架 構的非同步通訊，如圖 1、圖 2 所示，在瀏覽器與 伺服器之間多了 AJAX 引擎，其實 AJAX 引擎也是 位於瀏覽器端，它的運作流程如下： 1. 使用者對瀏覽器動作，例如按下按鈕或輸入文 字，觸發 JavaScript 函式。 2. AJAX 引擎於背景去對伺服器發出 http 請求，而 在 AJAX 引擎動作的同時，這個 JavaScript 呼叫 已經回傳給呼叫者，這樣的動作稱為非同步通 訊，另外當 AJAX 引擎得到伺服器的 http 回應 時，AJAX 引擎會在直接呼叫對應的函式通知瀏 覽器在使用者介面上做出反應。
圖 1、傳統網頁同步式通訊架構圖
圖 2、AJAX 網頁非同步式通訊架構圖
4. 校務行政資訊系統內 AJAX 應用實例
本文作者在開發校務行政資訊系統過程中，運 用 AJAX 原理與技巧設計出不少程式模組，希望藉 此方便使用者操作流程，並加速日後的開發速度， 謹列出下列較具典型的程式模組加以解說。 4.1 全功能化單一網頁(Full-Functional Single Page)應用程式模組 如圖 3 所示，將後端資料的維護查詢功能全部 集中在同一網頁畫面內操控，包括記錄指標移動、 換頁、標記資料、整批刪除標記資料、新增、複製、 修改、刪除、預覽報表、存檔、取消、單一條件查 詢排序、多條件進階查詢排序、資料輸出至 Excel 檔等，適用於設計單一資料表格維護介面，其特色 如下： 1. 統一使用介面操作模式，簡化操作流程，減少 教育訓練時間。 2. 使用 AJAX 技術，利用 iframe 做背景執行處理 資料，當左邊頁框移動資料記錄時，右邊頁框 不需整個網頁重整(Page Reload)，只有欄位內 資料被更新顯示而已，資料下載量減少為原來 整個網頁重新載入的 5%，因此可以加速頁面 更新，減輕伺服器負擔。 3. 各項操作功能全部在同一網頁，避免使用者對 最後網頁位置產生混淆。 4. 遇到伺服器處理時間較長，或下載資料較大 時，畫面出現「資料處理中，請稍後…」圖示， 避免使用者不耐久候或茫然不知，讓整個程式 執行更為流暢。 5. 程式模組只在第一次載入或重新整理時才重新 顯示整個畫面，載入後操作功能按鈕並不會 Page Reload，即使關閉該功能模組視窗，下次 呼叫執行該功能時，依然停留於上次執行的位 置，意謂該網頁模組沒有重新載入。圖 3、全功能化單一網頁(Full-Functional Single Page) 應用程式模組 4.2 全功能化多頁框網頁(Full-Functional Multi-Frame Page)應用程式模組
如圖 4 所示，類似上述全功能化單一網頁，但 為多頁框呈現方式，適用於設計一對一、一對多關 聯資料表格維護介面，其特色與上述全功能化單一 網頁相同，但對使用者瀏覽、維護關聯資料表格的 相關資料更為方便。 圖 4、全功能化多頁框網頁(Full-Functional Multi-Frame Page)應用程式模組 4.3 輔助輸入工具介面程式模組 如圖 5~圖 8 所示，保留桌面應用程式操作介面 之優點，設計人性化便捷輸入工具，包括輔助輸入 片語、輔助關聯詞庫、欄位歷史資料、輔助日曆、 計算器等，其設計原理如下： 1. 將一隱藏式 iframe 置於每個功能網頁內(將 iframe 寬度高度皆設為 0，即為隱藏)，當點按 該輔助輸入按鈕時，啟動一 JavaScript 函式， 在該 JavaScript 函式內將隱藏 iframe 寬度高度 皆設為彈出式頁框的大小(非 0 值)，並在該
JavaScript 函式內指定 iframe 內要執行的程式 檔，此時的 iframe 即變成 popup iframe。 2. 在此 popup iframe 內當點選選項時，將選項值 帶回呼叫程式頁框的欄位內，並關閉此 popup iframe(將 iframe 寬度高度再度設為 0)。 圖 5. 輔助日曆 說明：輔助日曆輸 入，有助統 一格式化日 期欄位。 圖 6. 輔助關聯詞庫輸入工具 說明：資料取自其他 Table，可 調整設定參數值顯示不同 數目之欄位，按超連結即 可將選擇項目帶入原呼叫 欄位。 圖 7. 欄位歷史資料輔助輸入工具 說明：資料取自本身 Table，該欄位輸入過的資料 都會顯示於畫面上供選擇，按超連結即可 將選擇項目帶入原呼叫欄位。 圖 8. 輔助片語輸入工具 說明：片語存於指定 Table，亦可在此畫面新增片 語，按超連結即可將選擇項目帶入原呼叫欄 位。 4.4 JavaScript 控制網頁文件 DOM - 以成績 調整功能畫面為例 如圖 9 所示，成績調整功能畫面為例，在設定 調整公式區域內，設定平時、期中、期末成績調整 方式後，按「調整成績」按鈕，各分數區段人數及 比例值即時改變，且下方區域調整後分數亦即時改 變，其設計原理如下： 1. 將三項成績調整方式利用 JavaScript 分析其調 整公式，然後逐筆計算各項成績調整後的分 數，利用 JavaScript 程式碼去改變<table>內每 個<td>物件的 innerText 屬性值，並重新統計各 分數區段的人數及比例值，再改變表單(FORM) 每個分數區段欄位的 value 屬性值。 2. 此項控制只在瀏覽器端改變頁面物件屬性值， 完全與伺服器端無關，尚未將改變後的值傳至 伺服器端資料庫存檔，必須按下「存檔」按鈕 後才會儲存改調整後的值。 圖 9、JavaScript 控制網頁文件 DOM - 以成績調 整功能畫面為例 4.5 關聯式下拉選擇框(SelectBox)控制 – 以輔助地址輸入為例 如圖 10 所示，以輔助地址輸入畫面為例，當 選擇第一個 SelectBox(縣市)值後，第二個 SelectBox(鄉鎮市區)選項隨即改變為該縣市的全部 行政轄區，當選擇第二個 SelectBox(鄉鎮市區)值 後，第三個 SelectBox(街路)選項即出現該行政區全 部的道路，當選擇完畢三個 SelectBox，聯絡地址及 郵遞區號欄位即填入選擇值，另外里鄰巷弄號樓等 可經由滑鼠點選帶入，其設計原理如下： 1. 第一個 SelectBox 物件選擇值改變後，觸發 onChange 事件去執行一段 JavaScript 程式碼， 在該 JavaScript 程式碼內呼叫另一支傳送至伺 服器端執行的程式，並以第一個 SelectBox 選 擇值作為該程式的 url 參數，查詢屬於該縣市 所轄的全部行政區資料，並將這些資料傳回客 戶端瀏覽器，再經由瀏覽器端的一段 JavaScript 程式碼將這些行政區資料依序重新填至第二 個 SelectBox 選項內。 2. 第二個 SelectBox 物件作用原理與上述相同。 3. 整個執行過程皆在隱藏式 iframe 內做背景執行 ，後端伺服器回應資料至前端瀏覽器，也只是
將 SelectBox 選項更新而已，不需要重新載入 整個網頁，因此不會造成畫面閃爍。 圖 10、關聯式下拉選擇框(SelectBox)控制 - 以 輔助地址輸入為例
5. 資訊系統需求開發工具及統計數據
5.1 系統需求與開發工具 硬體： 伺服器主機(Server)三台，其中兩台作為網頁伺服器 (Web Server)，一台作為資料庫伺服器(DataBase Server)，每台伺服器主機配備為：1. IBM 專業級伺服器主機(Pentium 4 CPU x 2)。 2. 主記憶體 1GB。 3. SCSI 硬碟 20 GB x 5 磁碟陣列。 軟體： 1. 作業系統：Windows 2000 Server。 2. 資料庫軟體：MS SQL 2000。 3. 網頁應用伺服器(Web AP Server)：Macromedia ColdFusion MX 7。 程式語言： 1. HTML 4.0–網頁標準語法。 2. DHTML–動態超文字標籤語言(Dynamic Hyper Text Markup Language)，包括 CSS、JavaScript。 3. CFML(ColdFusion Markup Language)–
ColdFusion 本身提供的語法，包括標籤(Tag)、函 數(Function)、自訂標籤(Custom Tag)、使用者自 定函數(User Defined Function)、ColdFusion 元件 (ColdFusion Component)等。 4. SQL 敘述(SQL Statement)–支援 MS SQL 的 ANSI SQL 語法。 5.2 使用統計數據 表 1.統計數據(統計期間：2005/07/19 ~ 2006/07/19) 各項執行統計 校務行政網 路化系統 學生查詢 服務系統 每日平均上線人次 425.54 2151.65 每日平均上線人數 51.48 716.2 最高上線人次 2,785 (2006/01/16) 13,031 (2005/01/17) 最高上線人數 194 (2006/01/16) 3,731 (2006/01/19) 註：全校學生 6050 人，專任教師 188 人，兼任 教師 146 人，行政職員 66 人。
6. 結論與未來發展
6.1 結論 校務行政網路化目標是為提供使用者更方便 快速之操作環境，縮短各項行政處理時間、提昇行 政效率，加強對師生家長之服務品質、提昇學校競 爭力，節約更多耗材為地球環保盡一份心力。網頁 程式設計技術攸關這些目標是否可以達成，經過實 際應用驗證，使用 AJAX 設計網路應用程式有下列 優點： 1. 整個網頁頁面不需要重新下載，減少網路流 量，加快網頁介面顯示速度，減少使用者等待 頁面更新的時間。 2. 部份程式由瀏覽器端執行，減輕伺服器負擔。 3. 建立更具互動性與親和性的使用操作介面。 6.2 未來發展 1. 因為 AJAX 是屬於瀏覽器端執行的程式技術， 各種瀏覽器支援 JavaScript 的標準不一致，目 前作者開發的 AJAX 程式模組只針對 Microsoft IE 瀏覽器支援的 JavaScript 語法去撰寫，未來 修改部份程式核心，讓這些程式模組也能運作 於 FireFox、Safari、Opera 等瀏覽器上。 2. 整理出已開發完成的程式模組，並另外撰寫範 例程式及使用說明，做為未來內部系統維護人 員之訓練教材，減少程式技術人員自行研究摸 索時間，讓維護人員能儘速進入狀況，進而利 用現成模組開發新的需求功能。 3. 利用這些程式模組及技術，開發其他網路應用 程式，或將現有 Windows AP 與 2-Tier 應用程 式改寫昇級成 Web AP。 4. 利用 AJAX 技術開發更多程式模組，讓未來的 網路應用程式開發更方便快速。參考文獻
書籍： [1] 古旗一浩原著，民 95.05，最新 JavaScript 與 AJAX 範例活用辭典，博碩出版社。 [2] 沈時宇，民 95.04，Ajax 網頁程式設計–成功 背後的技術，旗標出版公司 F6475。 [3] 金靈 譯／林信良 審挍，民 95.06，Ajax 技術 手冊–Foundation of Ajax，碁峰資訊公司。 [4] 林信良譯，民 95.07，Ajax 實戰手冊–Ajax in Action，碁峰資訊公司。 [5] 高喬登史朗原著，柯世杰譯，民 95.05，AJAX 與 Google Map API 入門實作，博碩出版社。 網路資源：http://zh.wikipedia.org/wiki/AJAX。
[7] 維基百科(Wikipedia)，Single page application 名詞闡釋，http://en.wikipedia.org/ wiki/ Single_Page_Application。 [8] 維基百科(Wikipedia)，ZK 名詞闡釋， http://zh.wikipedia.org/wiki/ZK。 [9] Xuite 日誌：爪哇豆的秘密(JAVA)， http://blog.xuite.net/jameschih/java/。
[10] 2005.02，Jesse James Garrett，AJAX : A New Approach to Web Applications，http://www.adap tivepath.com/publications/essays/archives/ 000385.php。
[11] Rico，JavaScript for Rich Internet Applications， http://openrico.org/。
[12] Prototype，JavaScript Framework， http://prototype.conio.net/。
[13] CFAjax = ColdFusion+Ajax， http://www.indiankey.com/cfajax/。
[14] Ajax tools by Zapatec，http://www. zapatec.com /website/main/。
[15] Ajax World Magzine
http://ajaxdevelopersjournal.com/。 [16] Dojo，the JavaScript Toolkit， http://dojotoolkit.org/。
[17] ZK，Simple Rich，http://zk1.sourceforge.net/。 JSMX，The Universal API for ColdFusion、
[18] PHP、.NET or your language of choice， http://www.lalabird.com/。
[19] AJAX CFC，Rob Gonda’s ColdFusion Blog， http://www.robgonda.com/blog/projects/ ajaxcfc/。
[20] SAJAX，Simple Ajax Toolkit by
ModernMethod，http://www. modernmethod. com/sajax/。 [21] Google Labs，http://labs.google.com/。 [22] Google Suggest，http://www.google.com/ webhp?complete=1&hl=en。 [23] Google Maps，http://maps.google.com/。 [24] Flickr Photo Sharing，http://www.flickr.com/。 學報、期刊： [25] 王錫廣，民 88，校務行政全球資訊網化之建 構(1)暑修選課系統篇，中華工商專校學報， 19 期 pp. (17)1-(17)7。 [26] 朱國光、林守仁，民 92，臺南市校務行政 學籍系統之發展，網際網路技術學刊，4 卷 2 期 pp. 105-111。 [27] 李春雄、吳聲毅，民 93，校務資訊系統跨平 台整合之探討及實作，視聽教育雙月刊，45 卷:5 期 pp. 39-45。 [28] 李耀奎，民 86，雛型系統方法與校務行政電 腦化，大仁學報，15 期 pp. 93-104。 [29] 林易泉、林哲正、唐龍、唐虎、王信隆，民 88，網路成績輸入系統開發-以樹德技術學 院為例，樹德科技學報，1 卷 1 期 pp. 73-81。 [30] 林裕增、莊筱敏，民 92，臺灣觀光經營管理 專科學校校務行政資訊系統之建置與研究， 臺灣觀光學報，1 期 pp. 81-101。 [31] 郭惠煌，民 94.08，校務行政網路化系統開發 設計，華夏技術學院學報，39 期 pp.1-10。 [32] 郭惠煌，民 92.05，從成績登錄暨維護系統開 發設計談未來校務行政 Web 化，華夏工商專 校學報，37 期 pp.30-46。 [33] 陳恭，民 91，三慧科技公司科技研發部，Web Application 設計樣式-One Page Web
Application，旗訊科技 RUNPC 雜誌四月號。 [34] 陳恭，民 91，三慧科技公司科技研發部，MVC 設計樣式在 Web 程式開發上的應用，旗訊科 RUNPC 雜誌二月號。 [35] 陳志聖，民 90，分散多層式網際網路型校務 行政電腦化系統之研究與實現，慈濟技術學院 學報，3 期 pp. 151-164。 [36] 張紹勳、賴勁璁，民 94，Web-Based 校務行 政資訊系統之分析設計--以大同社區大學為 例，致理學報，20 期 pp. 315-358。 [37] 溫瑞烘，民 89，校務資訊系統研究-退學預警 系統之研製，中華工商專校學報，20 期 pp. 22-37。 [38] 溫瑞烘，民 87，Intranet 在校務資訊系統的應 用-Web 化公共查訊系統的研製，中華工商專 校學報，16 期 pp. 62-92。 [39] 溫瑞烘，民 87，專科學校校務資訊系統-課務 系統的研製，中華工商專校學報，16 期 pp. 28-61。 [40] 潘秀女，民 87，校務行政電腦化後提昇行政效 率之研究分析-以復興工商專校為例，復興學 報，pp. 315-326。 研討會： [41] 民 92.12，研討會論文集，「教育行政、校園 e 化」北區研討會，淡江大學。 博碩士論文： [42] 陳建宏，民 94，大學註冊行政電腦化之研 究－以某大學註冊行政電腦化為例，臺中健 康暨管理學院資訊工程學系碩士班碩士論文。 [43] 楊維讀，民 94，以網路服務為基礎之校務行 政服務系統整合研究，大葉大學資訊管理學 系碩士論文。 [44] 蕭賜榮，民 94，國中小學籍系統整合-以 Web Services 開發轉學系統，南華大學資訊管理 學研究所碩士論文。 [45] 李呈奇，民 91，大學推動校園 e 化之探討， 國立中山大學人力資源管理研究所碩士論文。 [46] 何承叡，民 94，網路選課效率改善實例之研 究，國立中正大學資訊工程研究所碩士論文。 [47] 許武義，民 89，網頁式排課管理系統，暨南 國際大學資訊管理學系碩士論文。
