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

胡云峰，男，彝族，云南文山人，文山学院信息科学学院讲师，硕士，主要从事计算机软件开发研究；陈皖芬，女，云南文山人，文山学院化学与工作学院教师，硕士，主要从事机械工程自动化研究。