基于HTML5的Web離線應(yīng)用模型在學(xué)生信息管理系統(tǒng)中的應(yīng)用

肖禎懷，許 文

（1.商丘職業(yè)技術(shù)學(xué)院，河南 商丘 476000；2.商丘師范學(xué)院，河南 商丘 476000）

學(xué)生信息管理是學(xué)校管理重要的組成部分，隨著信息技術(shù)的發(fā)展，從原先的單機(jī)版到網(wǎng)絡(luò)版，從 C/S模式到 B/S模式。但是B/S模式應(yīng)用在遇到網(wǎng)絡(luò)暫時(shí)不可用問題時(shí)，可能會(huì)造成B/S的程序無法正常運(yùn)行，因此離線Web應(yīng)用技術(shù)應(yīng)運(yùn)而生。

本文通過對比研究現(xiàn)有的Web離線應(yīng)用系統(tǒng)技術(shù)，提出基于HTML5的Web離線應(yīng)用架構(gòu)模型OFF-ORDER，支持離線和本地存儲(chǔ)，并應(yīng)用在學(xué)生信息管理系統(tǒng)中。

該系統(tǒng)不僅能夠存儲(chǔ)和管理各種學(xué)生信息，具備相應(yīng)的統(tǒng)計(jì)功能，使教師和學(xué)生能夠方便地查閱有關(guān)的信息，而且可以通過瀏覽器離線完成各項(xiàng)操作，大大提高了學(xué)校的辦公效率。

1.HTML5

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

2.基于HTML5的Web離線應(yīng)用架構(gòu)

早期的HTML頁面通過把頁面信息保存到本地緩沖區(qū)，在“脫機(jī)瀏覽”的狀態(tài)下能看到部分信息，但它遠(yuǎn)遠(yuǎn)滿足不了動(dòng)態(tài)信息交互的需求;發(fā)展到ASP、JSP

等實(shí)現(xiàn)動(dòng)態(tài)信息交互的技術(shù)階段，使用Cookie技術(shù)緩存動(dòng)態(tài)數(shù)據(jù)，因其空間和安全限制，難以實(shí)現(xiàn)離線應(yīng)用。

當(dāng)前Web離線應(yīng)用架構(gòu)雖然能夠給用戶提供強(qiáng)大靈活的離線功能保證，但是具有以下缺點(diǎn)：嚴(yán)重依賴插件（如Google Gears本質(zhì)是ActiveX），插件不僅面臨著版本限制，而且面臨著安全威脅，同時(shí)應(yīng)用平臺(tái)具有局限性；同步更新時(shí)，數(shù)據(jù)傳輸采用的是效率低又耗費(fèi)帶寬的輪詢方式[3]。

鑒于以上缺點(diǎn)，結(jié)合現(xiàn)有的Web離線應(yīng)用架構(gòu)，本文引入HTML5技術(shù)，并提出基于HTML5的Web離線應(yīng)用架構(gòu)，使系統(tǒng)的效率得到優(yōu)化[4]。如圖1所示。整個(gè)架構(gòu)包括服務(wù)端（server）和客戶端（Client）[5]。

下文將重點(diǎn)說明該架構(gòu)在本地服務(wù)、本地存儲(chǔ)、數(shù)據(jù)同步和數(shù)據(jù)傳輸4個(gè)方面的實(shí)現(xiàn)。

圖1 基于HTML5的Web離線應(yīng)用架構(gòu)

2.1 本地應(yīng)用

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

HTML5脫機(jī)應(yīng)用提供了新的ApplicationCache對象，以及管理整個(gè)過程的方法、屬性以及事件。

Navigator對象使用屬性onLine代表連接的當(dāng)前狀態(tài)。這個(gè)屬性有兩個(gè)事件，會(huì)在它的值發(fā)生變化時(shí)觸發(fā)。

2.2 本地存儲(chǔ)

在HTML5 Web Storage本地存儲(chǔ)中，數(shù)據(jù)的本地存儲(chǔ)包含了Local Storage和Session Storage。Session Storage只在頁面會(huì)話期間保持?jǐn)?shù)據(jù)可用。就像是會(huì)話cookie的替代。

HTML5 Web Storage本地存儲(chǔ)的優(yōu)勢：存儲(chǔ)空間更大，能夠滿足大部分Web應(yīng)用程序的需求。本地存儲(chǔ)的數(shù)據(jù)內(nèi)容不會(huì)自動(dòng)發(fā)送到服務(wù)器端，特別是Local Storage只在本地使用，不會(huì)與服務(wù)器端發(fā)生交互，減少了用戶帶寬的消耗。

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

2.3 數(shù)據(jù)同步

數(shù)據(jù)的同步時(shí)離線應(yīng)用模型的核心。在數(shù)據(jù)同步問題上，目前的數(shù)據(jù)庫相關(guān)模型在同步問題上有不同的技術(shù)選擇，如文件傳輸技術(shù)、數(shù)據(jù)復(fù)制技術(shù)等。本文數(shù)據(jù)同步選擇凈變化方式。

本地時(shí)間和網(wǎng)絡(luò)時(shí)間不一致時(shí)經(jīng)常發(fā)生的事情，所以選擇服務(wù)器端的修改時(shí)間，記為時(shí)間戳T。同時(shí)在數(shù)據(jù)庫中加上一個(gè)客戶端修改標(biāo)記bool型字段用于控制同步過程，目的是在網(wǎng)絡(luò)恢復(fù)時(shí)，檢查是不是需要同步服務(wù)器端數(shù)據(jù)和本地客戶端數(shù)據(jù)。

比較客戶端T和服務(wù)器端T，如果相同，則表示數(shù)據(jù)在客戶端和服務(wù)器端沒有變化，不需要同步；如果不相同，則表示在這個(gè)時(shí)間段內(nèi)，數(shù)據(jù)發(fā)生了改變，需要同步數(shù)據(jù)。

2.4 數(shù)據(jù)傳輸

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

3.學(xué)生信息管理系統(tǒng)的應(yīng)用

將基于HTML5的Web離線應(yīng)用架構(gòu)模型應(yīng)用到學(xué)生信息管理系統(tǒng)中。在學(xué)生信息管理系統(tǒng)數(shù)據(jù)錄入、修改及刪除時(shí)，例如學(xué)生入學(xué)時(shí)的原始信息的輸入、修改，如學(xué)號、姓名、性別、班級、出生日期、籍貫等；刪除學(xué)生的信息，完成學(xué)生各學(xué)年的獎(jiǎng)罰情況的輸入與修改；完成學(xué)籍變動(dòng)情況的記錄，包括休學(xué)、復(fù)學(xué)、轉(zhuǎn)系、結(jié)業(yè)、畢業(yè)等。

在瀏覽器客戶端，用戶登錄上學(xué)生信息管理系統(tǒng)后。在網(wǎng)絡(luò)不可用的情況下，當(dāng)輸入學(xué)生數(shù)據(jù)或修改學(xué)生數(shù)據(jù)時(shí)，系統(tǒng)將數(shù)據(jù)寫入本地?cái)?shù)據(jù)庫中。在數(shù)據(jù)庫中，有一個(gè)時(shí)間戳作為一個(gè)字段，用來做數(shù)據(jù)的版本。

當(dāng)網(wǎng)絡(luò)可用時(shí)，系統(tǒng)的狀態(tài)監(jiān)測模塊檢測到后，比較本地和遠(yuǎn)程服務(wù)器端中的數(shù)據(jù)變化。當(dāng)發(fā)生變化時(shí)，將數(shù)據(jù)傳送到遠(yuǎn)程數(shù)據(jù)庫中，采用凈變化更新的方式。同時(shí)更新同步控制用的狀態(tài)值。表示本次數(shù)據(jù)已經(jīng)同步。

當(dāng)用戶修改學(xué)生數(shù)據(jù)時(shí)，對比本地?cái)?shù)據(jù)庫和遠(yuǎn)程數(shù)據(jù)庫服務(wù)器中的數(shù)據(jù)，將增量更新數(shù)據(jù)到遠(yuǎn)程數(shù)據(jù)庫中。

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

4.系統(tǒng)性能

用戶在使用Web系統(tǒng)中，大量的查詢的結(jié)果往往是重復(fù)的。這對服務(wù)器來說，無疑增加了大量的網(wǎng)絡(luò)帶寬和帶來了系統(tǒng)資源的壓力。Web離線學(xué)生管理系統(tǒng)在應(yīng)用加載和數(shù)據(jù)查詢方面，不僅減輕了服務(wù)器端壓力，而且提高了前端性能，提高了用戶體驗(yàn)。

在沒有使用Web離線系統(tǒng)時(shí)，系統(tǒng)的平均加載時(shí)間在0.8～5秒左右；當(dāng)然隨著服務(wù)器性能和網(wǎng)絡(luò)會(huì)有一定的變化。在使用離線系統(tǒng)后，平均加載時(shí)間在 0.4～3秒左右。可以看出使用Web離線系統(tǒng)提高了前端性能，減輕了服務(wù)器的壓力，提高了用戶體驗(yàn)。如圖2所示：

圖2 兩種查詢性能對比圖

5.結(jié)束語

基于HTML5的Web離線應(yīng)用模型在學(xué)生信息管理系統(tǒng)中的應(yīng)用，是在 B/S 模式下的MIS 系統(tǒng) （管理信息系統(tǒng)），它使用了離線應(yīng)用和離線存儲(chǔ)對學(xué)生信息進(jìn)行管理。在網(wǎng)絡(luò)不可用時(shí)，支持在瀏覽器內(nèi)離線使用系統(tǒng)，支持?jǐn)?shù)據(jù)本地存儲(chǔ)，支持?jǐn)?shù)據(jù)同步增量更新，同時(shí)支持?jǐn)?shù)據(jù)的實(shí)時(shí)同步。提高了用戶體驗(yàn)，提高了前端性能。隨著HTML5技術(shù)的成熟和普及，系統(tǒng)將在效率、安全性、完整性等方面的性能將得到極大的提高。根據(jù)信息技術(shù)的發(fā)展現(xiàn)狀，這種數(shù)據(jù)處理形式在今后將會(huì)成為主要的信息處理和管理形式。

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

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

[3]譚駿珊，吳昌盛.基于 B/S 模式應(yīng)用系統(tǒng)性能優(yōu)化的研究[J].計(jì)算機(jī)應(yīng)用，2003，（1）.

[4]王非.富互聯(lián)網(wǎng)應(yīng)用中框架技術(shù)實(shí)現(xiàn)Web信息系統(tǒng)[J].計(jì)算機(jī)應(yīng)用，2008，（10）.

[5]周楊.AJAX 應(yīng)用的典型設(shè)計(jì)模式[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2011，（1）.