Ajax技术在列车运行图资料管理系统中的应用

龚俊维，倪少权

（西南交通大学 信息科学与技术学院，成都 610031）

Ajax技术在列车运行图资料管理系统中的应用

龚俊维，倪少权

（西南交通大学 信息科学与技术学院，成都 610031）

针对列车运行图资料管理系统中现有的不足，本文根据Ajax技术原理，提出一种以Ajax+JSON作为关键技术，以HTML+HttpHandler作为系统开发方式的设计方案，实现了无提交索引的异步刷新以及数据的动态分页技术，并给出了较为详尽的关键技术与实现代码，本文方法减少了服务器的压力，改善了用户体验。

Ajax技术；动态分页技术；异步刷新；JSON

列车运行图是铁路运输工作的综合性计划，也是全路组织列车运行的基础。当前我国运用计算机编制列车运行图的技术已经趋于成熟，并日益完善且已向全路推广应用。若将地理位置不同的计算机通过网络互联互通，实现跨铁路局运行资料数据的快速传输与有效查询，将有效提高铁路行车部门的工作效率和列车通过能力[1]。鉴于以上考虑，基于B/S的列车运行图资料管理系统被提出。而用WebForm开发的aspx页面含有很多运行在服务器端的交互控件，且每次执行搜索等提交操作都会整体刷新页面，造成许多重复数据的传输，这无疑加大了服务器的带宽要求和运行负荷，容易使服务器暂时失去响应，甚至崩溃。对客户端而言，每次操作均需重载整个页面，且在数据索引时长时间的等待也会造成不良的用户体验。

鉴于现有技术的诸多不足，本文提出了一种基于Ajax+JSON作为关键技术手段，以HTML+HttpHandler作为开发方式，实现了无提交索引的异步刷新以及数据的动态分页技术，能有效减轻服务器的负荷、改善用户体验。

1 Ajax技术及其在列车运行图资料管理系统中的应用

1.1 Ajax简介

异步JavaScript和XML（Ajax，Asynchronous JavaScript and XML）是一种用户创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，Ajax可使网页实现异步更新。这意味着在不重载整个网页的情况下，对网页的指定部分进行内容更新，这能节约服务器带宽资源以及给客户提供良好的用户体验。

1.2 Ajax工作原理

Ajax引擎用JavaScript语言编写，通常在一个隐藏的框架中，负责编译用户界面与服务器之间的交互，如图1所示。

图1 Ajax工作原理

Ajax相当于在客户端和服务器端之间加了一个中间层，使用户操作与服务器响应异步化[2]。当用户需要更新页面的某些数据时，用户发出请求，Ajax引擎通过调用XMLHttpRequest对象的属性和方法来对服务器进行数据交互，服务器以XML文档的形式返回给客户端数据，客户端浏览器通过DOM解析XML文档获取数据，最后通过JavaScript定义的函数来操作和改变HTML页面内容以达到动态更新页面的指定部分内容的效果。

1.3 Ajax工作流程

Ajax实现异步请求响应的流程如下。

（1）在考虑兼容性条件下，创建XMLHttp-Request对象

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

XMLHttpRequest是JavaScript中的一个对象，也是Ajax使用的核心，所以首先要对其进行创建，运用时需要注意各个浏览器厂商对于XMLHttpRequest的底层实现不同，因此在创建这个对象时要考虑兼容性[3]。

（2）对象XMLHttpRequest向服务器发出请求

xmlhttp.open(Method, Url, Asynchronous);

xmlhttp.send();

open函数的作用是设定参数，准备向服务器发送请求，其中，第1个参数Method表示发送请求的方法，有GET和POST两种，因使用GET请求常常会带来缓存问题，通常用POST请求；第2个参数Url是发送请求的地址；第3个参数Asynchronous为发送请求的方式，是一个Boolean值，true为异步，false为同步。异步请求为发送请求后不等待服务器响应继续向下执行，服务器响应后调用onreadystatechange回调函数刷新指定的区域，send函数为向服务器发送请求，每发送一次请求，send函数就调用一次。

（3）服务器返回数据

服务器返回数据时，系统会自动调用XMLHttpRequest对象的onreadystatechange方法，所以此时需要给这个方法指定一个JavaScript的匿名函数，便于客户端页面刷新：

xmlhttp.onreadystatechange = function(){

if (xmlhttp.readyState == 4) {

if (xmlhttp.status == 200) {

onsuccess(xmlhttp.responseText); }

else{

onfail(xmlhttp.status); }}}

其中，变量readyState是返回XMLHTTP请求的当前状态，其值分别为：0 ，对象虽已建立，但是尚未初始化，即尚未调用open方法；1 ，对象已建立，但尚未调用send方法；2，send方法已调用，但当前的状态及http头未知；3，数据传送中，已接收部分数据，因响应及http头不全，通过responseBody和responseText获取的部分数据会出现错误；4，数据接收完毕，获取完整的数据回应。

当XMLHTTP请求的当前状态已完成时，判断XMLHTTP的状态码是否是200（接收成功），若条件成立，再调用页面的onsuccess函数来指定返回成功之后的操作，并传递一个服务器响应文本，否则，调用onfail函数来指定返回失败时的操作，如提示、警告用户。

1.4 HTML+HttpHandler+Ajax开发方式

目前，主流的开发方式是ASP.Net WebForm，即使用微软提供的许多服务器端控件来开发aspx页面，其运行机制是页面后台代码Code Behind，实际上，aspx底层实现了IHttpHandler接口，且封装了很多操作，可以把其看作一个高级的.ashx文件，可以用其进行“拖控件”化的开发。此种开发方式的优点是门槛低，简单易上手，不用了解HTTP的本质，缺点是由于aspx页面使用的是服务器端控件，每一次用户提交操作都会等待服务器响应，增加了服务器的负担，并且由于aspx页面底层封装好了许多方法并且不易修改，开发熟练的程序员想使用一些自定义的方法会变得极为困难，使得开发方式不灵活。

相应的，使用静态HTML页面+Http-Handler的开发方式，相比较WebForm开发的aspx页面而言，优点是服务器负担较轻，相于服务器而言，请求htm页面比aspx页面更节省资源，缺点是无法实现动态效果。而静态HTML页面加上Ajax技术完全可以实现aspx动态页面的效果，其灵活性和稳定性较之aspx页面更佳。而且在服务器端使用HttpHandler+模板引擎的方式来开发，可以将前后台显示和处理逻辑分开，开发者能专注于处理逻辑功能的开发而不用关注前台页面，提高开发效率。

1.5 JSON的数据序列化

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。便于人阅读和编写以及机器的解析和生成[4]。

2 列车运行图资料管理系统的总体设计

列车运行图资料管理系统开发的目的在于建立一个完善的网络系统，向铁路部门发布列车运行图数据，实现资源共享，使用户能方便、快捷的进行资料查询检索和报表上传下载等工作[5]。

系统采用HTML静态页面+模板引擎开发方式、ADO.Net作为数据库交互方式、Ajax+JavaScript+Json作为前后端数据交互手段。列车运行图资料管理系统功能模块可划分为：用户管理、资料数据管理，报表管理，系统管理。如图2所示，图中黄框代表需实现Ajax技术以及数据分页技术的系统子模块。

图2 列车运行图资料管理系统功能模块

（1）用户管理模块

管理系统用户信息，增删系统用户、为用户分配系统使用权限、浏览和按条件查询用户。

（2）资料数据管理模块

模块具有索引显示功能，可输入或选择检索关键字（线路名、车站名等）查询运行图资料信息[5]，查询结果按铁路局规定的格式显示，若数据信息条目过多时，宜采用分页显示，通过点击页面索引超链接按钮，即可定位到相应资料信息显示页面，此时页面只刷新数据显示的表格部分而不是全部页面。模块具有数据导入导出功能，可以选择手动录入、Excel导入或从数据库导入，需要时可以以txt文档或者Excel表格导出。

（3）报表管理模块

模块具有报表文件的在线浏览功能，实现异步刷新和分页技术、报表文件按其资料的类别进行归类、上传下载功能、报表的条件查询和修改删除功能。

（4）系统管理模块

模块具有系统配置功能，可修改系统的配置信息，系统配置的参数有很多，如连接数据库的参数，用户名和密码的设置要求需遵循长度、大小写敏感、复杂度、允许错误登陆的次数等要求、网站基础信息等；具有系统日志管理功能，能够对日志信息进行记录、读取、按条件查询，如日志日期等；具有系统留言管理，管理用户留言板信息；具有系统安全管理功能，能设置密码加密方式等安全策略，如MD5密码加盐技术等。

3 基于Ajax技术的列车运行图资料管理系统的关键技术

3.1 数据索引的无提交刷新

用户选择填入索引条件，点击搜索按钮后触发搜索函数，用变量记录所填信息以拼接Url字符串的方式传递到Ajax函数，最后传回服务器端，搜索函数的请求部分如下：

var searchType = document.getElementB yId("searchType").value;

searchText、pageNum、countInPage获取方式同上

ajax("yxtDataList.ashx?Action=Search &SearchType=" + searchType + "&SearchText=" + searchText + "&PageNum=" + pageNum + "&CountInPage=" + countInPage, function (resText));

参数：

searchType：索引的类型

searchText：索引的值

pageNum：当前所在页数

countInPage：一页显示条目的数目

yxtDataList.ashx：运行图数据浏览页面的处理程序

function (resText)：服务器响应后执行的onsuccess函数

resText：服务器响应的XML数据

服务器端接收到ajax请求后，获取请求类型、当前所在页数、每页显示数据条数、搜索类型、搜索文本等参数，并作逻辑判断。如果满足条件则按照搜索条件从数据库中读取数据，如果数据条数较多，则以Json序列化方式返回给客户端浏览器，服务器浏览器解析后呈现给用户。处理程序的关键代码如下：

if (action == "Search"){

string searchType = context.Request["Search-Type"];

string searchText = context.Request["Search-Text"];

int pageNum = 1;//如果没有传递PageNum参数，则显示第一页

if (context.Request["PageNum"] != null) {

pageNum = Convert.ToInt32(context. Request["PageNum"]);}

int countInPage = int.Parse(context. Request["CountInPage"]);

if (string.IsNullOrEmpty(searchText)){

if (searchType ==

"searchByUsername"){

//调用DAL层的

自定义条件搜索函数，搜索结果封装成对象数组形式

Data[] datas = new DataDAL().SearchByCond itionInPage(searchText,

pageNum, countInPage);

JavaScriptSerializer jss = new JavaScript-Serializer();

string json = jss.Serialize(datas);//对象数组封装成Json序列

context.Response.Write(json); }}}客户端浏览器接收到服务器返回的Json序列，解析之后以操作DOM方式来刷新数据展示表格，搜索函数的返回部分如下：

var datas = JSON.parse(resText);

for (var j = 0; j ＜ users.length; ++j) {

var x = document.getElementById("table"). insertRow(j + 1); //动态添加表格行

x.insertCell(1).innerHTML = datas[j]. DataName;//动态添加表格单元格

x.insertCell(2).innerHTML = datas[j]. DataClass;

x.insertCell(3).innerHTML = datas[j]. DataInfo1;

x.insertCell(4).innerHTML = datas[j]. Datainfo2; …… }

至此，在客户端所看到的就是数据展示表格的不提交刷新效果了。

3.2 基于Ajax+Json的分页技术

当索引出来的结果条目过多时，如果把这么多数据都在一个页面发送给客户端会造成以下几个问题：

（1）数据在页面中显示过程漫长，甚至会造成数据的缺损、遗漏和丢失；（2）服务器压力过大，易造成网络资源严重浪费，甚至会产生严重的网络堵塞现象；

（3）所需等待时间过长，对用户而言是一次糟糕的体验。

针对以上问题，本文引入Ajax+Json方式来进行分页。

所谓分页技术，是指客户端向服务器发出索引请求时，数据库服务器根据客户端浏览器的需求向数据库“按需取量”，用户看到的是请求的那部分数据，而不是全部。

通过Ajax异步传输来减少网络传输内容，查询返回的内容以Json序列化方式传递给客户端浏览器解析，再加以传统分页技术。这种浏览方式对于服务器而言，节省资源，对于用户而言，客户端和服务器之间的数据通信量很少，等待时间短，用户体验良好，不用刷新整个页面，是一种理想的分页浏览方式[6～7]。

实现步骤如下：

（1）向数据库请求数据，传递搜索内容、当前所在页及每页显示的条数，SQL查询语句如下：

select * from (select *, ROW_NUMBER() OVER (order by ID) AS ROWNUM from T_Data)

T_Data where (ROWNUM between @Start and @End) and DataInfo1=@Condition1

其中@Start和@End分别是查询数据开始和结束的数据索引号，具体的值分别为((pageNum -1) * countInPage + 1)和pageNum * countInPage，@Condition1为搜索文本。

（2）服务器端把查询获取的数据返回给客户端浏览器，客户端浏览器操作DOM刷新数据表格。

（3）动态添加页码导航链接：

for (var k = 0; k ＜ pageNum; ++k) {

document.getElementById("pageHref"). innerHTML += "＜ahref='javascript:void(0)' onclick=’page + k + ’＞[" + pageNum+ "]＜/a＞";}

这里的页码导航链接非跳转链接，只需要用到链接的点击处理函数，所以给跳转url赋空值，再给页码导航链接动态添加点击处理函数即可。

4 结束语

在列车运行图资料管理系统中，本文基于Ajax技术实现了异步区域无提交刷新、静态页面下表格的动态刷新与分页，避免了服务器端和客户端浏览器之间的大量重复数据交互，减小了服务器的运行压力、提高了运行性能，尤其对于需要频繁进行区域数据交互的功能页面，在用户体验方面会有很大提高。

[1]彭其渊，闫海峰，石子明.计算机编制列车运行图的理论与方法[M].成都：西南交通大学出版社，2004.

[2]柯昌正，黄厚宽.Ajax技术的原理和应用[J].铁路计算机应用，2007，16（1）：27-29.

[3]兰小机，段保霞，彭建伟.基于Ajax的WebGIS研究与应用[J].测绘科学，2009，34（2）：214-216.

[4]杨会侠，吴立言，等. Ajax技术在仿真数据管理系统中的应用[J].计算机工程与设计，2008，29（14）：3625-3627.

[5]严 冰.基于B/S模式的列车运行图资料管理系统研究与设计[D].成都：西南交通大学，2006.

[6]屈武江.基于Ajax技术的ASP.NET数据分页[J].计算机系统应用，2013，22（9）：154-159.

[7]邱国伟，梁永全，陈玉娥.ASP.NET中数据分页技术的研究[[J].计算机应用研究，2007，24（9）：159-161.

责任编辑 方 圆

Application of Ajax technology in Train Operation Diagram Data Management System

GONG Junwei, NI Shaoquan
( School of Information Science and Technology, Southwest Jiaotong University, Chengdu 610031, China )

In view of the existing problems to Train Operation Diagram Data Management System, this article put forward a design scheme which was used Ajax and JSON as the key technology, used HTML and HttpHandler as the system development mode, to implement the asynchronous refresh searching without submitted and dynamic data paging technology, given the design scheme and key code in detail, reduced the pressure of the server, and improved the user’s experience.

Ajax technology; dynamic paging technology; asynchronous refresh; JSON

1005-8451（2014）09-0029-05

U292.41∶TP39

A

2014-03-03

龚俊维，在读硕士研究生；倪少权，教授。