基于HTML5的Web離線應用模型在學生信息管理系統中的應用

肖禎懷，許 文

（1.商丘職業技術學院，河南 商丘 476000；2.商丘師范學院，河南 商丘 476000）

學生信息管理是學校管理重要的組成部分，隨著信息技術的發展，從原先的單機版到網絡版，從 C/S模式到 B/S模式。但是B/S模式應用在遇到網絡暫時不可用問題時，可能會造成B/S的程序無法正常運行，因此離線Web應用技術應運而生。

本文通過對比研究現有的Web離線應用系統技術，提出基于HTML5的Web離線應用架構模型OFF-ORDER，支持離線和本地存儲，并應用在學生信息管理系統中。

該系統不僅能夠存儲和管理各種學生信息，具備相應的統計功能，使教師和學生能夠方便地查閱有關的信息，而且可以通過瀏覽器離線完成各項操作，大大提高了學校的辦公效率。

1.HTML5

HTML5正在被開發成HTML的主要版本，也是Web的核心標記語言[1]。HTML5被提議為繼HTML 4.01、XHTML 1.0和DOM Level2 HTML之后的下一個標準，它旨在減少對基于專有插件的胖互聯網應用（Rich Internet Application，RIA）技術的需要，這些技術包括Adobe Flash、微軟Silverlight以及Sun JavaFX技術[2]。HTML5規范在2007年被采用，作為萬維網聯盟新的HTML工作組工作的出發點。

2.基于HTML5的Web離線應用架構

早期的HTML頁面通過把頁面信息保存到本地緩沖區，在“脫機瀏覽”的狀態下能看到部分信息，但它遠遠滿足不了動態信息交互的需求;發展到ASP、JSP

等實現動態信息交互的技術階段，使用Cookie技術緩存動態數據，因其空間和安全限制，難以實現離線應用。

當前Web離線應用架構雖然能夠給用戶提供強大靈活的離線功能保證，但是具有以下缺點：嚴重依賴插件（如Google Gears本質是ActiveX），插件不僅面臨著版本限制，而且面臨著安全威脅，同時應用平臺具有局限性；同步更新時，數據傳輸采用的是效率低又耗費帶寬的輪詢方式[3]。

鑒于以上缺點，結合現有的Web離線應用架構，本文引入HTML5技術，并提出基于HTML5的Web離線應用架構，使系統的效率得到優化[4]。如圖1所示。整個架構包括服務端（server）和客戶端（Client）[5]。

下文將重點說明該架構在本地服務、本地存儲、數據同步和數據傳輸4個方面的實現。

圖1 基于HTML5的Web離線應用架構

2.1 本地應用

在用戶計算機上保存應用程序和Web文件以供日后使用。只需要訪問Internet一次就可以下載運行應用程序所需要的全部文件，不論Intemet連通與否，都可以使用應用程序。文件下載之后，應用程序在瀏覽器中運行，但運行時使用的是已經下載的這些文件，就像桌面應用程序一樣，與服務器或網絡連接的情況無關。

HTML5脫機應用提供了新的ApplicationCache對象，以及管理整個過程的方法、屬性以及事件。

Navigator對象使用屬性onLine代表連接的當前狀態。這個屬性有兩個事件，會在它的值發生變化時觸發。

2.2 本地存儲

在HTML5 Web Storage本地存儲中，數據的本地存儲包含了Local Storage和Session Storage。Session Storage只在頁面會話期間保持數據可用。就像是會話cookie的替代。

HTML5 Web Storage本地存儲的優勢：存儲空間更大，能夠滿足大部分Web應用程序的需求。本地存儲的數據內容不會自動發送到服務器端，特別是Local Storage只在本地使用，不會與服務器端發生交互，減少了用戶帶寬的消耗。

Indexed DB 是一種索引的層次性鍵-值存儲。在IndexedDB中，數據庫中的信息以對象的形式存儲在對象庫中。對象庫沒有特定的結構，只能夠找到其中對象的名稱和索引。這些對象也沒有既定的結構，每個對象的結構可以各不相同，多復雜都可以。

2.3 數據同步

數據的同步時離線應用模型的核心。在數據同步問題上，目前的數據庫相關模型在同步問題上有不同的技術選擇，如文件傳輸技術、數據復制技術等。本文數據同步選擇凈變化方式。

本地時間和網絡時間不一致時經常發生的事情，所以選擇服務器端的修改時間，記為時間戳T。同時在數據庫中加上一個客戶端修改標記bool型字段用于控制同步過程，目的是在網絡恢復時，檢查是不是需要同步服務器端數據和本地客戶端數據。

比較客戶端T和服務器端T，如果相同，則表示數據在客戶端和服務器端沒有變化，不需要同步；如果不相同，則表示在這個時間段內，數據發生了改變，需要同步數據。

2.4 數據傳輸

在 HTML5中，數據傳輸采用 WebSocket。HTML5 WebSockets規范定義了WebSockets API。為瀏覽器和服務器之間更快、更高效的雙向通信提供了連接支持。連接是通過TCP套接字建立的，中間不需要發送HTTP標頭，因此減少了每次調用中傳輸的數據量。

3.學生信息管理系統的應用

將基于HTML5的Web離線應用架構模型應用到學生信息管理系統中。在學生信息管理系統數據錄入、修改及刪除時，例如學生入學時的原始信息的輸入、修改，如學號、姓名、性別、班級、出生日期、籍貫等；刪除學生的信息，完成學生各學年的獎罰情況的輸入與修改；完成學籍變動情況的記錄，包括休學、復學、轉系、結業、畢業等。

在瀏覽器客戶端，用戶登錄上學生信息管理系統后。在網絡不可用的情況下，當輸入學生數據或修改學生數據時，系統將數據寫入本地數據庫中。在數據庫中，有一個時間戳作為一個字段，用來做數據的版本。

當網絡可用時，系統的狀態監測模塊檢測到后，比較本地和遠程服務器端中的數據變化。當發生變化時，將數據傳送到遠程數據庫中，采用凈變化更新的方式。同時更新同步控制用的狀態值。表示本次數據已經同步。

當用戶修改學生數據時，對比本地數據庫和遠程數據庫服務器中的數據，將增量更新數據到遠程數據庫中。

網絡相對本地來說是不可靠的，使用離線應用的學生管理系統則可以防止在網絡不可用時，系統不能使用。這從而大大方便了用戶的使用。同時由于程序已經下載到本地，瀏覽器加載的時候縮短了等待時間，提高了前端性能。

4.系統性能

用戶在使用Web系統中，大量的查詢的結果往往是重復的。這對服務器來說，無疑增加了大量的網絡帶寬和帶來了系統資源的壓力。Web離線學生管理系統在應用加載和數據查詢方面，不僅減輕了服務器端壓力，而且提高了前端性能，提高了用戶體驗。

在沒有使用Web離線系統時，系統的平均加載時間在0.8～5秒左右；當然隨著服務器性能和網絡會有一定的變化。在使用離線系統后，平均加載時間在 0.4～3秒左右。可以看出使用Web離線系統提高了前端性能，減輕了服務器的壓力，提高了用戶體驗。如圖2所示：

圖2 兩種查詢性能對比圖

5.結束語

基于HTML5的Web離線應用模型在學生信息管理系統中的應用，是在 B/S 模式下的MIS 系統 （管理信息系統），它使用了離線應用和離線存儲對學生信息進行管理。在網絡不可用時，支持在瀏覽器內離線使用系統，支持數據本地存儲，支持數據同步增量更新，同時支持數據的實時同步。提高了用戶體驗，提高了前端性能。隨著HTML5技術的成熟和普及，系統將在效率、安全性、完整性等方面的性能將得到極大的提高。根據信息技術的發展現狀，這種數據處理形式在今后將會成為主要的信息處理和管理形式。

[1]Bruce Lawson，Remy Sharp.HTML5 用戶指南[M].劉紅偉，譯.北京: 機械工業出版社，2011.

[2]Kevin Purdy.How HTML5 Will Change the Way You Use the Web[J].IEEE Jouma1，2009，（3）.

[3]譚駿珊，吳昌盛.基于 B/S 模式應用系統性能優化的研究[J].計算機應用，2003，（1）.

[4]王非.富互聯網應用中框架技術實現Web信息系統[J].計算機應用，2008，（10）.

[5]周楊.AJAX 應用的典型設計模式[J].計算機系統應用，2011，（1）.