HTML5+ JQuery mobile + Ajax在線考試報(bào)名系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)
——以文山學(xué)院在線考試報(bào)名系統(tǒng)為例

胡云峰，陳皖芬

（1.文山學(xué)院 信息科學(xué)學(xué)院，云南 文山 663099；2.文山學(xué)院 化學(xué)與工程學(xué)院，云南 文山 663099）

HTML5+ JQuery mobile + Ajax在線考試報(bào)名系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)
——以文山學(xué)院在線考試報(bào)名系統(tǒng)為例

胡云峰1，陳皖芬2

（1.文山學(xué)院 信息科學(xué)學(xué)院，云南 文山 663099；2.文山學(xué)院 化學(xué)與工程學(xué)院，云南 文山 663099）

以文山學(xué)院考試在線報(bào)名系統(tǒng)為例，提出一種方便可行的信息系統(tǒng)移動(dòng)化方案，實(shí)現(xiàn)以響應(yīng)式網(wǎng)頁(yè)方式向PC與移動(dòng)設(shè)備終端提供服務(wù)的方法。

HTML5；JQuery mobile；AJAX；在線考試報(bào)名；響應(yīng)式網(wǎng)頁(yè)

2016年1月，中華人民共和國(guó)工業(yè)和信息化部發(fā)布了《2015年通信運(yùn)營(yíng)業(yè)統(tǒng)計(jì)公報(bào)》，根據(jù)公報(bào)內(nèi)容，2015年，我國(guó)4G移動(dòng)電話用戶總數(shù)達(dá)38 622.5萬(wàn)戶，手機(jī)上網(wǎng)流量達(dá)到37.59億G，在移動(dòng)互聯(lián)網(wǎng)總流量中的比重達(dá)到89.8%[1]。另?yè)?jù)國(guó)內(nèi)獨(dú)立第三方數(shù)據(jù)服務(wù)提供商TalkingData發(fā)布的《2015年移動(dòng)互聯(lián)網(wǎng)行業(yè)發(fā)展報(bào)告》，截止2015年，我國(guó)國(guó)內(nèi)移動(dòng)智能終端設(shè)備達(dá)到了12.8億臺(tái)[2]。由此可見(jiàn)，移動(dòng)終端設(shè)備已取代傳統(tǒng)PC機(jī)，成為互聯(lián)網(wǎng)使用設(shè)備的最主要構(gòu)成部分。

目前，文山學(xué)院擁有在校學(xué)生8788人，以參加普通話水平測(cè)試為例，每次報(bào)名考試的學(xué)生人數(shù)超過(guò)3000人。面對(duì)如此巨大的考生數(shù)量，學(xué)?，F(xiàn)有的機(jī)房和學(xué)生自身?yè)碛械挠?jì)算機(jī)數(shù)量已不能滿足一段時(shí)間內(nèi)密集的報(bào)名工作，因此，將學(xué)校考試在線報(bào)名系統(tǒng)移動(dòng)終端設(shè)備化就顯得迫在眉睫。

1 關(guān)鍵技術(shù)

1.1 HTML5

HTML5其前身名為Web Applications 1.0，于2004年被提出，2007年被W3C采納[3]。HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。HTML5引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式[4]。

1.2 JQuery mobile

JQuery mobile是為了填補(bǔ)JQuery在移動(dòng)設(shè)備應(yīng)用上的缺憾的一個(gè)新項(xiàng)目，除了能提供很多基礎(chǔ)的移動(dòng)頁(yè)面元素開(kāi)發(fā)功能外，框架自身還提供了很多可供擴(kuò)展的API，以便于開(kāi)發(fā)人員在移動(dòng)應(yīng)用上使用。JQuery mobile的策略可以簡(jiǎn)單地總結(jié)為：創(chuàng)建一個(gè)在常見(jiàn)智能手機(jī)/平板電腦瀏覽器領(lǐng)域能統(tǒng)一用戶界面的頂級(jí)JavaScript庫(kù)[3]。

1.3 Ajax

Ajax的全稱是Asynchronous JavaScript And XML，即異步JavaScript和XML，除了可以異步發(fā)送請(qǐng)求外，還能動(dòng)態(tài)加載服務(wù)器響應(yīng)數(shù)據(jù)，通過(guò)DOM動(dòng)態(tài)更新HTML頁(yè)面，這使得人們可以避免頻繁刷新頁(yè)面，從而使用戶獲得連續(xù)的體驗(yàn)[5]。

2 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

文山學(xué)院在線考試報(bào)名系統(tǒng)基于B/S模式開(kāi)發(fā)，面向PC用戶提供在線考試報(bào)名功能。由于在開(kāi)發(fā)系統(tǒng)時(shí)未考慮移動(dòng)終端設(shè)備的兼容性，導(dǎo)致使用者在使用移動(dòng)終端設(shè)備使用系統(tǒng)時(shí)，受制于屏幕大小、分辨率高低等因素的影響，無(wú)法得到良好的使用體驗(yàn)。要解決這個(gè)問(wèn)題，有兩種方式，一是對(duì)現(xiàn)有網(wǎng)站按照響應(yīng)式網(wǎng)頁(yè)[6]的標(biāo)準(zhǔn)重新開(kāi)發(fā)，該方案開(kāi)發(fā)難度大、周期長(zhǎng)；二是在現(xiàn)有系統(tǒng)的基礎(chǔ)上，結(jié)合HTML5、JQuery mobile、Ajax及網(wǎng)頁(yè)數(shù)據(jù)抓包等現(xiàn)有技術(shù)手段，開(kāi)發(fā)具有響應(yīng)式網(wǎng)頁(yè)使用效果的頁(yè)面。文章對(duì)第二種方式進(jìn)行論述。

2.1 現(xiàn)有系統(tǒng)操作流程、數(shù)據(jù)分析

現(xiàn)有系統(tǒng)的操作流程為：在校學(xué)生填寫(xiě)學(xué)號(hào)與姓名，系統(tǒng)根據(jù)在校學(xué)生名單查找匹配信息，如查詢成功，提取部分信息（身份證號(hào)碼等）報(bào)名考試。

系統(tǒng)分兩個(gè)步驟實(shí)現(xiàn)：一是檢驗(yàn)所填學(xué)號(hào)、姓名與數(shù)據(jù)庫(kù)數(shù)據(jù)的匹配性，防止惡意報(bào)名。二是根據(jù)匹配結(jié)果，顯示學(xué)生相關(guān)信息，并提取部分信息進(jìn)行考試報(bào)名。利用網(wǎng)絡(luò)抓包工具分別對(duì)兩個(gè)步驟進(jìn)行數(shù)據(jù)抓包，分別得到以下關(guān)鍵數(shù)據(jù)：

步驟一：

POST /xyw/studentinfo.php HTTP/1.1

……………………

id=9&xh=201511151115&xm=%E5%BC%A0%E4 %B8%89

經(jīng)分析，“POST /xyw/studentinfo.php”代表數(shù)據(jù)提交的方式為“POST”，提交地址為“/xyw/studentinfo. php，”“id=9”代表的是考生報(bào)名時(shí)候所選擇的項(xiàng)目編號(hào)，“xh=201511151115”是輸入的學(xué)號(hào)，“xm=%E5%BC%A0%E4%B8%89” 是 對(duì) 輸 入 的 姓 名進(jìn)行URL編碼后的數(shù)據(jù)。如果查詢不到匹配信息，則有“沒(méi)有相匹配的學(xué)生信息……”的提示。

步驟二：

POST /xyw/bmks_do.php HTTP/1.1

……………………

id=9&xh=201511151115&sfzh=532621199508251 336

可見(jiàn)，該步驟仍是以“POST”方式提交數(shù)據(jù)，目的地址為“/xyw/bmks_do.php”，所提交數(shù)據(jù)和上一步驟相比，多出了“sfzh=532621199508251336”一項(xiàng)，此為身份證號(hào)碼。如果報(bào)名成功，系統(tǒng)會(huì)給出“報(bào)名成功！”的提示。

2.2 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)

首先，利用HTML5、JQuery mobile完成響應(yīng)式網(wǎng)頁(yè)基礎(chǔ)頁(yè)面設(shè)計(jì)，實(shí)現(xiàn)移動(dòng)終端設(shè)備最佳訪問(wèn)效果。

其次，采取JQuery的方式，結(jié)合Ajax技術(shù)，模擬客戶端完成兩個(gè)步驟的數(shù)據(jù)提交，實(shí)現(xiàn)考試報(bào)名操作。

最后，實(shí)現(xiàn)PC訪問(wèn)與移動(dòng)終端設(shè)備訪問(wèn)的自動(dòng)判斷。由于系統(tǒng)并未以完全的響應(yīng)式網(wǎng)頁(yè)方式開(kāi)發(fā)，因此，要以一定的方式來(lái)使系統(tǒng)自動(dòng)判斷客戶端類型，以實(shí)現(xiàn)PC與移動(dòng)終端設(shè)備均能獲得良好的體驗(yàn)。經(jīng)研究測(cè)試，可以使用瀏覽器版本號(hào)函數(shù)（navigator.userAgent）來(lái)區(qū)分Windows系統(tǒng)和移動(dòng)設(shè)備最常見(jiàn)的Android、IOS系統(tǒng)，以進(jìn)行相應(yīng)頁(yè)面的跳轉(zhuǎn)。

最終效果如圖1所示：

圖1 移動(dòng)終端設(shè)備端效果

3 結(jié)語(yǔ)

文山學(xué)院移動(dòng)終端版考試在線報(bào)名系統(tǒng)靈活運(yùn)用了HTML5、JQuery mobile、Ajax及網(wǎng)頁(yè)抓包等技術(shù)，實(shí)現(xiàn)了響應(yīng)式網(wǎng)頁(yè)的效果，使得在校學(xué)生可以利用移動(dòng)終端設(shè)備方便快捷地在線報(bào)名考試，在一定范圍內(nèi)實(shí)現(xiàn)了移動(dòng)辦公的目標(biāo)。目前該系統(tǒng)已全面投入使用。今后，系統(tǒng)會(huì)在現(xiàn)有功能的基礎(chǔ)上，進(jìn)行全面改版，向完全響應(yīng)式網(wǎng)頁(yè)方向轉(zhuǎn)化。

[1] 運(yùn)行監(jiān)測(cè)協(xié)調(diào)局. 2015年通信運(yùn)營(yíng)業(yè)統(tǒng)計(jì)公報(bào)[EB/OL]. [2016-01-21]. http://www.miit.gov.cn/n1146312/n1146904/ n1648372/c4620679/content.html.

[2] TalkingData移動(dòng)數(shù)據(jù)研究中心. 2015年移動(dòng)互聯(lián)網(wǎng)行業(yè)發(fā)展報(bào)告[EB/OL]. [2016-01-20]. http://www.talkingdata. com/index/files/2016-01/1454056329890.pdf.

[3] 單東林，張曉菲，魏然. 鋒利的JQuery[M]. 第2版. 北京：人民郵電出版社，2015：291-292.

[4] 百度百科. HTML5[EB/OL]. [2016-01-20]. http://baike.baidu. com/link?url=NZ0pfYGT4D0PlYufY7150rywqxD2hIL_bxnqGf-OwPMDf0Wl0vZJZc6zMIE7Q7Xjds64qudcoXyvzHarReIp0_ #reference-[1]-951383-wrap.

[5] 李剛. 瘋狂Ajax講義：JQuery/Ext JS/Prototype/DWR企業(yè)應(yīng)用前端開(kāi)發(fā)實(shí)戰(zhàn) [M].第3版. 北京：電子工業(yè)出版社，2013：2-13.

[6] [英]Ben Frain.響應(yīng)式Web設(shè)計(jì) HTML5和CSS3實(shí)戰(zhàn)[M].第1版. 王永強(qiáng).譯. 北京：人民郵電出版社，2013：3.

Design and Implementation of Online Test Registration System of HTML5+JQERY MOBILE+AJAX:A Case Study of the Online Examination Registration System of Wenshan University

HU Yunfeng1, CHEN Wanfen2
(1.School of Information Science, Wenshan University, Wenshan Yunnan 663099, China; 2. School of Chemistry and Engineering, Wenshan University, Wenshan Yunnan 663099, China)

Taking the Online Test Registration System of Wenshan University as an example, this paper proposes a mobile information system method to realize the scheme of providing services for PC and mobile terminal equipment with responsive web.

HTML5; JQuery Mobile; AJAX; Online Test Registration; response web

TP393.092

A

1674-9200（2016）06-0053-03

（責(zé)任編輯 劉常福）

2016-07-15

胡云峰，男，彝族，云南文山人，文山學(xué)院信息科學(xué)學(xué)院講師，碩士，主要從事計(jì)算機(jī)軟件開(kāi)發(fā)研究；陳皖芬，女，云南文山人，文山學(xué)院化學(xué)與工作學(xué)院教師，碩士，主要從事機(jī)械工程自動(dòng)化研究。