上海市中职校网上录取系统中Ajax技术的应用
[摘要] 通过分析上海市中职校网上录取系统中采取的相关技术，对提高用户上网使用体验的方法进行了研究。分析了B/S结构和C/S结构的性能特点，探讨了在B/S结构下，如何运用Ajax+Json技术加快页面响应速度，减轻服务器压力和提升系统用户体验等问题。
[关键词] 网上录取用户体验Ajax
引言
随着网络技术和无线通信技术的飞速发展，越来越多的工作都使用了网络技术，现代化招生录取工作正在向标准化、规范化、精准化和快速化发展，而原先上海市中等职业教育招生录取主要靠人工干预来控制信息流程，发生错误的可能性比较大。可见，传统的招生录取方法已逐渐不能适应现代化招生的要求，开发网上录取系统，势在必行。
根据教育部的文件精神，中职校的招生考试录取应当逐步实现计算机远程异地网上录取。上海市中职校网上录取系统是一个涵盖了中职校提前批次的报名、填报志愿、网上投档和查询录取结果的网络软件系统。它是中职校招生录取的新模式，实现了数据的集中管理。为学校和考生
提供了一个快捷和方便的网上报名平台，减少了招生工作的差错，提高招生工作的效率，也能够为后续的统计和决策提供准确信息。
招生录取系统面对的考生规模大、社会关注度高和安全保密要求严等特点，这些特点决定了网上招生录取系统必须满足以下几个要求：服务器的压力小、考生等待时间短、用户硬件要求低、系统稳定性强、交互响应速度迅速。从这些要求看，利用B/S结构的简洁实用，结合Ajax+Json技术提高页面载入和数据交互的速度，来开发招生录取系统是一个行之有效的方法。
1.功能模块设计
上海市中职校网上录取系统主要针对中职校提前批招生类型，即航空服务专业、艺术类和自荐类招生。系统共分为3大功能模块，来分别实现从考生面试、填志愿到投档录取整个过程，如下图所示：
图1系统功能模块图
2.系统架构模式的特点
表1 B/S结构与C/S结构特性比较
    B/S结构    C/S机构
适用范围和
硬件环境    建立在广域网之上的，不必是专门的网络硬件环境，有操作系统和web浏览器    通常用于局域网中，局域网之间再通过专门服务器提供连接和数据交换服务
使用对象    面向是不可知的用户，使用者可以是分散地域性的    用户固定，并且在相同区域，安全要求高需求
软件安装    客户端无需安装，只要有Web浏览器    需要安装才可使用
系统更新    升级服务器即可，系统维护开销减到最小    维护成本高，必须整体考察，可能所有客户端的程序都需要改变，升级难
交互性    建立在浏览器上，有更加丰富和生动的表现方式与用户交流    中央集权的机械式处理，交互性相对低
响应速度    客户端服务器端的交互是请求-响应模式，通常需要刷新页面    由于只有一层交互，因此响应速度较快
因为上海市中职校网上录取系统是主要是面向全市所有初中毕业生，使用者的年龄相对较小，而且分布区域比较广，包括全市以及安徽、山东和江苏的部分地区。从有利于考生的角度出发，系统应当是使用方便、交互性强、硬件要求不高、上网地点不受限制和维护升级方便的要求，所以系统采用为什么要用ajaxB/S（Browser/Server）架构，即浏览器/服务器结构。Browser指的是Web浏览器，极少数事务逻辑在前端实现，但主要事务逻辑在服务器端实现，客户端包含的逻辑很少，减少了前端即客户端的压力。另一种典型的架构是C/S（Client/Server）架构，即客户端/服务器端架构，C/S 架构是一种典型的两层架构，其客户端包含一个或多个在用户的电脑上运行的程序，而服务器端有两种，一种是数据库服务器端，客户端通过数据库连接访问服务器端的数据；另一种是Socket服务器端，服务器端的程序通过Socket与客户端的程序通信。因为客户端需要实现绝大多数的业务逻辑和界面展示。因为显示逻辑和事务处理都包含在其中，作为客户端的部分就需要承受很大的压力。两者比较如表1。
可见，使用了B/S架构的网上招生录取系统具有如下特点：
（1）方便考生：能以不同的接入方式（比如LAN、WAN、Internet/Intranet等）访问，无须特别安装，只有Web浏览器即可。
（2）确保了安全性：用户是通过中间层访问数据库，后台数据库不直接暴露在用户面前，这对于具有较高保密要求的网上录取系统的数据安全有更好地保障。
3.开发语言的选择
上海市中职校网上录取系统是用于招生录取和面向10万名左右初中毕业生的软件，因而它的系统性能要求很高，比如软件应用的安全性、并发性和健壮性，所以系统采用了Java语言编程。与平台无关是 Java 语言最大的优势。Java编写的程序可以在任何安装了 Java虚拟机 JVM 的计算机上正确的运行。此外，Java的安全体系架构也是其重要特之一，当使用支持Java的浏览器时，你可以放心地运行Java的小应用程序 Java Applet ，不必担心病毒的感染和恶意的企图。
系统的开发工具采用了MyEclipse 7.0，它是企业级工作平台（MyEclipse Enterprise Workbench ，简称MyEclipse），是一个十分优秀的用于开发Java程序的工具。它整合了数
据库、Java的开发、发布，以及应用程序服务器，它是功能丰富的JavaEE集成开发环境，包括了完备的编码、调试、测试和发布等功能。界面如下图：
图2 开发工具界面
4.Ajax与Json
4.1 Ajax技术的使用原因
采用B/S架构的不足之处在于它基于触发的事件驱动模式，它的请求-响应的交互模式，需要不断地更新页面，众多考生每执行一次对数据库服务器的访问操作都会在浏览器和服务器之间传送大量相同的数据，这样大大增加了服务器的负担。然而Ajax技术能提高异步通信能力，服务器返回的数据可以通过Ajax更新客户端界面（不刷新整个页面），从而有效减少相同数据的传输量，减少网络资源的浪费，减少了页面的等待时间和减轻服务器的压力，这样就提高了考生网上报名和填报志愿的速度。
4.2 Ajax技术与传统Web应用的比较
传统的Web应用是基于同步的触发事件驱动模式。用户通过客户端发送请求信息的表单，即向服务器发送一个请求。服务器接收后，通过触发相应的事件来处理用户请求，然后将结果回传给客户端浏览球，即送回一个新的网页。这样浪费了许多带宽，影响了使用速度。因为不但前后两个页面中的大部分HTML代码往往是相同的，来回传送过程中大量不变数据挤占了带宽，而且客户端响应是基于服务器响应时间，如果服务器响应时间过长，客户端的请求得不到响应，就容易造成网络堵塞甚至瘫痪
录取网络畅通是整个招生安全有序的必要保证。采用Ajax技术可以仅向服务器发送并取回需要更新的数据。用户在发送请求以后可以继续当前工作，包括浏览或提交信息，客户端和服务器端不必再相互等待，在服务器响应完成之后，Ajax将会获得更新部分的数据，同时更新了页面。因为在服务器和浏览器之间交换的数据大量减少，所以降低了网络负载，提高了网络速度。
4.3 Ajax技术的工作原理
Ajax是由一组技术组合而成，其核心技术是JavaScript、Document Object Model（简称DOM）、XMLHttpRequest和XML。它的工作原理相当于在客户端和服务器之间加了一个中
间层，即Ajax引擎，使客户端和服务器端异步化。用户递交请求时，Ajax可以完成一些类似数据的校验等工作，只有确实需要调用服务器数据的数据时，才由客户端通过JavaScript调用Ajax引擎向服务器发出请求，用户此时可以继续响相应的工作无需等待。当服务器端的数据返回时，Ajax引擎接受数据并通过相应的处理来更新局部的页面，这样减轻了服务器端的压力，提高了用户的浏览体验。
图3Ajax技术与传统Web技术的工作原理
4.4 Json
上海市中职校网上录取系统在设计中，为了提高数据传输的效率，在使用Ajax技术与JAVA后台交互数据时，没有采用常用的XML格式，而是采用了比之较晚的JSON数据格式。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成。它的优势在于数据组织更加精简，同等信息的数据量更小。JSON概念就是服务器直接生成Javascript语句，客户端获取后直接用eval方法来获得这个对象，这样就可以省去解析XML的性损失。JSON不仅减少了解析XML解析带来的性能问题和兼容性问题，而且对于Javascript来说非常容易使用，可以方便的通过遍历数组以及访问对象属性
来获取数据，JSON在可读性性虽然稍差，但写出来的字符JSON就明显少很多。去掉空白制表以及换行的话，JSON就是密密麻麻的有用数据，而xml却包含很多重复的标记字符。
本系统特地用Java编写一个JAR来分析JSON数据，我们在书写程序时只需要调用其方法即可。程序片段如下：
//导入JSON解析类库
import net.sf.json.JSONArray;
import net.sf.json.JSONException;
import net.sf.json.JsonConfig;
//提取数据到ArrayList
    ArrayList list = new ArrayList();
    list = TylqList(tylq,yxh);
    String fields = Parameter(“fields”); //取得需要的所有字段
    // JSON格式如:[“column1”
    // ,”column2”]
    String query = Parameter(“query”); // 查询的参数 文本框输入的值
    ArrayList listBySearch = null;
    JSONArray fieldsjsonArray = null;
    listBySearch = new ArrayList();
            try {
    fieldsjsonArray = JSONArray.fromObject(fields);
        String fieldName = null;
        for (int i = 0; list != null && i < list.size(); i++) {
            sh_tylq ks_yxtmp = (sh_tylq) (i);
            for (int j = 0; fieldsjsonArray != null
            && j < fieldsjsonArray.size(); j++) {
        fieldName = (String) (j);
                //将数据转换为JSON格式
ExtUtils.isDataInObjectField(fieldName, ks_yxtmp,query));