HTML5+ JQuery mobile + Ajax在線考試報名系統設計與實現
——以文山學院在線考試報名系統為例

胡云峰，陳皖芬

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

HTML5+ JQuery mobile + Ajax在線考試報名系統設計與實現
——以文山學院在線考試報名系統為例

胡云峰1，陳皖芬2

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

以文山學院考試在線報名系統為例，提出一種方便可行的信息系統移動化方案，實現以響應式網頁方式向PC與移動設備終端提供服務的方法。

HTML5；JQuery mobile；AJAX；在線考試報名；響應式網頁

2016年1月，中華人民共和國工業和信息化部發布了《2015年通信運營業統計公報》，根據公報內容，2015年，我國4G移動電話用戶總數達38 622.5萬戶，手機上網流量達到37.59億G，在移動互聯網總流量中的比重達到89.8%[1]。另據國內獨立第三方數據服務提供商TalkingData發布的《2015年移動互聯網行業發展報告》，截止2015年，我國國內移動智能終端設備達到了12.8億臺[2]。由此可見，移動終端設備已取代傳統PC機，成為互聯網使用設備的最主要構成部分。

目前，文山學院擁有在校學生8788人，以參加普通話水平測試為例，每次報名考試的學生人數超過3000人。面對如此巨大的考生數量，學校現有的機房和學生自身擁有的計算機數量已不能滿足一段時間內密集的報名工作，因此，將學校考試在線報名系統移動終端設備化就顯得迫在眉睫。

1 關鍵技術

1.1 HTML5

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

1.2 JQuery mobile

JQuery mobile是為了填補JQuery在移動設備應用上的缺憾的一個新項目，除了能提供很多基礎的移動頁面元素開發功能外，框架自身還提供了很多可供擴展的API，以便于開發人員在移動應用上使用。JQuery mobile的策略可以簡單地總結為：創建一個在常見智能手機/平板電腦瀏覽器領域能統一用戶界面的頂級JavaScript庫[3]。

1.3 Ajax

Ajax的全稱是Asynchronous JavaScript And XML，即異步JavaScript和XML，除了可以異步發送請求外，還能動態加載服務器響應數據，通過DOM動態更新HTML頁面，這使得人們可以避免頻繁刷新頁面，從而使用戶獲得連續的體驗[5]。

2 系統設計與實現

文山學院在線考試報名系統基于B/S模式開發，面向PC用戶提供在線考試報名功能。由于在開發系統時未考慮移動終端設備的兼容性，導致使用者在使用移動終端設備使用系統時，受制于屏幕大小、分辨率高低等因素的影響，無法得到良好的使用體驗。要解決這個問題，有兩種方式，一是對現有網站按照響應式網頁[6]的標準重新開發，該方案開發難度大、周期長；二是在現有系統的基礎上，結合HTML5、JQuery mobile、Ajax及網頁數據抓包等現有技術手段，開發具有響應式網頁使用效果的頁面。文章對第二種方式進行論述。

2.1 現有系統操作流程、數據分析

現有系統的操作流程為：在校學生填寫學號與姓名，系統根據在校學生名單查找匹配信息，如查詢成功，提取部分信息（身份證號碼等）報名考試。

系統分兩個步驟實現：一是檢驗所填學號、姓名與數據庫數據的匹配性，防止惡意報名。二是根據匹配結果，顯示學生相關信息，并提取部分信息進行考試報名。利用網絡抓包工具分別對兩個步驟進行數據抓包，分別得到以下關鍵數據：

步驟一：

POST /xyw/studentinfo.php HTTP/1.1

……………………

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

經分析，“POST /xyw/studentinfo.php”代表數據提交的方式為“POST”，提交地址為“/xyw/studentinfo. php，”“id=9”代表的是考生報名時候所選擇的項目編號，“xh=201511151115”是輸入的學號，“xm=%E5%BC%A0%E4%B8%89” 是 對 輸 入 的 姓 名進行URL編碼后的數據。如果查詢不到匹配信息，則有“沒有相匹配的學生信息……”的提示。

步驟二：

POST /xyw/bmks_do.php HTTP/1.1

……………………

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

可見，該步驟仍是以“POST”方式提交數據，目的地址為“/xyw/bmks_do.php”，所提交數據和上一步驟相比，多出了“sfzh=532621199508251336”一項，此為身份證號碼。如果報名成功，系統會給出“報名成功！”的提示。

2.2 響應式網頁設計與實現

首先，利用HTML5、JQuery mobile完成響應式網頁基礎頁面設計，實現移動終端設備最佳訪問效果。

其次，采取JQuery的方式，結合Ajax技術，模擬客戶端完成兩個步驟的數據提交，實現考試報名操作。

最后，實現PC訪問與移動終端設備訪問的自動判斷。由于系統并未以完全的響應式網頁方式開發，因此，要以一定的方式來使系統自動判斷客戶端類型，以實現PC與移動終端設備均能獲得良好的體驗。經研究測試，可以使用瀏覽器版本號函數（navigator.userAgent）來區分Windows系統和移動設備最常見的Android、IOS系統，以進行相應頁面的跳轉。

最終效果如圖1所示：

圖1 移動終端設備端效果

3 結語

文山學院移動終端版考試在線報名系統靈活運用了HTML5、JQuery mobile、Ajax及網頁抓包等技術，實現了響應式網頁的效果，使得在校學生可以利用移動終端設備方便快捷地在線報名考試，在一定范圍內實現了移動辦公的目標。目前該系統已全面投入使用。今后，系統會在現有功能的基礎上，進行全面改版，向完全響應式網頁方向轉化。

[1] 運行監測協調局. 2015年通信運營業統計公報[EB/OL]. [2016-01-21]. http://www.miit.gov.cn/n1146312/n1146904/ n1648372/c4620679/content.html.

[2] TalkingData移動數據研究中心. 2015年移動互聯網行業發展報告[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企業應用前端開發實戰 [M].第3版. 北京：電子工業出版社，2013：2-13.

[6] [英]Ben Frain.響應式Web設計 HTML5和CSS3實戰[M].第1版. 王永強.譯. 北京：人民郵電出版社，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

（責任編輯 劉常福）

2016-07-15

胡云峰，男，彝族，云南文山人，文山學院信息科學學院講師，碩士，主要從事計算機軟件開發研究；陳皖芬，女，云南文山人，文山學院化學與工作學院教師，碩士，主要從事機械工程自動化研究。