龔俊維，倪少權(quán)

（西南交通大學(xué) 信息科學(xué)與技術(shù)學(xué)院，成都 610031）

Ajax技術(shù)在列車運行圖資料管理系統(tǒng)中的應(yīng)用

龔俊維，倪少權(quán)

（西南交通大學(xué) 信息科學(xué)與技術(shù)學(xué)院，成都 610031）

針對列車運行圖資料管理系統(tǒng)中現(xiàn)有的不足，本文根據(jù)Ajax技術(shù)原理，提出一種以Ajax+JSON作為關(guān)鍵技術(shù)，以HTML+HttpHandler作為系統(tǒng)開發(fā)方式的設(shè)計方案，實現(xiàn)了無提交索引的異步刷新以及數(shù)據(jù)的動態(tài)分頁技術(shù)，并給出了較為詳盡的關(guān)鍵技術(shù)與實現(xiàn)代碼，本文方法減少了服務(wù)器的壓力，改善了用戶體驗。

Ajax技術(shù)；動態(tài)分頁技術(shù)；異步刷新；JSON

列車運行圖是鐵路運輸工作的綜合性計劃，也是全路組織列車運行的基礎(chǔ)。當(dāng)前我國運用計算機編制列車運行圖的技術(shù)已經(jīng)趨于成熟，并日益完善且已向全路推廣應(yīng)用。若將地理位置不同的計算機通過網(wǎng)絡(luò)互聯(lián)互通，實現(xiàn)跨鐵路局運行資料數(shù)據(jù)的快速傳輸與有效查詢，將有效提高鐵路行車部門的工作效率和列車通過能力[1]。鑒于以上考慮，基于B/S的列車運行圖資料管理系統(tǒng)被提出。而用WebForm開發(fā)的aspx頁面含有很多運行在服務(wù)器端的交互控件，且每次執(zhí)行搜索等提交操作都會整體刷新頁面，造成許多重復(fù)數(shù)據(jù)的傳輸，這無疑加大了服務(wù)器的帶寬要求和運行負(fù)荷，容易使服務(wù)器暫時失去響應(yīng)，甚至崩潰。對客戶端而言，每次操作均需重載整個頁面，且在數(shù)據(jù)索引時長時間的等待也會造成不良的用戶體驗。

鑒于現(xiàn)有技術(shù)的諸多不足，本文提出了一種基于Ajax+JSON作為關(guān)鍵技術(shù)手段，以HTML+HttpHandler作為開發(fā)方式，實現(xiàn)了無提交索引的異步刷新以及數(shù)據(jù)的動態(tài)分頁技術(shù)，能有效減輕服務(wù)器的負(fù)荷、改善用戶體驗。

1 Ajax技術(shù)及其在列車運行圖資料管理系統(tǒng)中的應(yīng)用

1.1 Ajax簡介

異步JavaScript和XML（Ajax，Asynchronous JavaScript and XML）是一種用戶創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)，通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax可使網(wǎng)頁實現(xiàn)異步更新。這意味著在不重載整個網(wǎng)頁的情況下，對網(wǎng)頁的指定部分進(jìn)行內(nèi)容更新，這能節(jié)約服務(wù)器帶寬資源以及給客戶提供良好的用戶體驗。

1.2 Ajax工作原理

Ajax引擎用JavaScript語言編寫，通常在一個隱藏的框架中，負(fù)責(zé)編譯用戶界面與服務(wù)器之間的交互，如圖1所示。

圖1 Ajax工作原理

Ajax相當(dāng)于在客戶端和服務(wù)器端之間加了一個中間層，使用戶操作與服務(wù)器響應(yīng)異步化[2]。當(dāng)用戶需要更新頁面的某些數(shù)據(jù)時，用戶發(fā)出請求，Ajax引擎通過調(diào)用XMLHttpRequest對象的屬性和方法來對服務(wù)器進(jìn)行數(shù)據(jù)交互，服務(wù)器以XML文檔的形式返回給客戶端數(shù)據(jù)，客戶端瀏覽器通過DOM解析XML文檔獲取數(shù)據(jù)，最后通過JavaScript定義的函數(shù)來操作和改變HTML頁面內(nèi)容以達(dá)到動態(tài)更新頁面的指定部分內(nèi)容的效果。

1.3 Ajax工作流程

Ajax實現(xiàn)異步請求響應(yīng)的流程如下。

（1）在考慮兼容性條件下，創(chuàng)建XMLHttp-Request對象

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

XMLHttpRequest是JavaScript中的一個對象，也是Ajax使用的核心，所以首先要對其進(jìn)行創(chuàng)建，運用時需要注意各個瀏覽器廠商對于XMLHttpRequest的底層實現(xiàn)不同，因此在創(chuàng)建這個對象時要考慮兼容性[3]。

（2）對象XMLHttpRequest向服務(wù)器發(fā)出請求

xmlhttp.open(Method, Url, Asynchronous);

xmlhttp.send();

open函數(shù)的作用是設(shè)定參數(shù)，準(zhǔn)備向服務(wù)器發(fā)送請求，其中，第1個參數(shù)Method表示發(fā)送請求的方法，有GET和POST兩種，因使用GET請求常常會帶來緩存問題，通常用POST請求；第2個參數(shù)Url是發(fā)送請求的地址；第3個參數(shù)Asynchronous為發(fā)送請求的方式，是一個Boolean值，true為異步，false為同步。異步請求為發(fā)送請求后不等待服務(wù)器響應(yīng)繼續(xù)向下執(zhí)行，服務(wù)器響應(yīng)后調(diào)用onreadystatechange回調(diào)函數(shù)刷新指定的區(qū)域，send函數(shù)為向服務(wù)器發(fā)送請求，每發(fā)送一次請求，send函數(shù)就調(diào)用一次。

（3）服務(wù)器返回數(shù)據(jù)

服務(wù)器返回數(shù)據(jù)時，系統(tǒng)會自動調(diào)用XMLHttpRequest對象的onreadystatechange方法，所以此時需要給這個方法指定一個JavaScript的匿名函數(shù)，便于客戶端頁面刷新：

xmlhttp.onreadystatechange = function(){

if (xmlhttp.readyState == 4) {

if (xmlhttp.status == 200) {

onsuccess(xmlhttp.responseText); }

else{

onfail(xmlhttp.status); }}}

其中，變量readyState是返回XMLHTTP請求的當(dāng)前狀態(tài)，其值分別為：0 ，對象雖已建立，但是尚未初始化，即尚未調(diào)用open方法；1 ，對象已建立，但尚未調(diào)用send方法；2，send方法已調(diào)用，但當(dāng)前的狀態(tài)及http頭未知；3，數(shù)據(jù)傳送中，已接收部分?jǐn)?shù)據(jù)，因響應(yīng)及http頭不全，通過responseBody和responseText獲取的部分?jǐn)?shù)據(jù)會出現(xiàn)錯誤；4，數(shù)據(jù)接收完畢，獲取完整的數(shù)據(jù)回應(yīng)。

當(dāng)XMLHTTP請求的當(dāng)前狀態(tài)已完成時，判斷XMLHTTP的狀態(tài)碼是否是200（接收成功），若條件成立，再調(diào)用頁面的onsuccess函數(shù)來指定返回成功之后的操作，并傳遞一個服務(wù)器響應(yīng)文本，否則，調(diào)用onfail函數(shù)來指定返回失敗時的操作，如提示、警告用戶。

1.4 HTML+HttpHandler+Ajax開發(fā)方式

目前，主流的開發(fā)方式是ASP.Net WebForm，即使用微軟提供的許多服務(wù)器端控件來開發(fā)aspx頁面，其運行機制是頁面后臺代碼Code Behind，實際上，aspx底層實現(xiàn)了IHttpHandler接口，且封裝了很多操作，可以把其看作一個高級的.ashx文件，可以用其進(jìn)行“拖控件”化的開發(fā)。此種開發(fā)方式的優(yōu)點是門檻低，簡單易上手，不用了解HTTP的本質(zhì)，缺點是由于aspx頁面使用的是服務(wù)器端控件，每一次用戶提交操作都會等待服務(wù)器響應(yīng)，增加了服務(wù)器的負(fù)擔(dān)，并且由于aspx頁面底層封裝好了許多方法并且不易修改，開發(fā)熟練的程序員想使用一些自定義的方法會變得極為困難，使得開發(fā)方式不靈活。

相應(yīng)的，使用靜態(tài)HTML頁面+Http-Handler的開發(fā)方式，相比較WebForm開發(fā)的aspx頁面而言，優(yōu)點是服務(wù)器負(fù)擔(dān)較輕，相于服務(wù)器而言，請求htm頁面比aspx頁面更節(jié)省資源，缺點是無法實現(xiàn)動態(tài)效果。而靜態(tài)HTML頁面加上Ajax技術(shù)完全可以實現(xiàn)aspx動態(tài)頁面的效果，其靈活性和穩(wěn)定性較之a(chǎn)spx頁面更佳。而且在服務(wù)器端使用HttpHandler+模板引擎的方式來開發(fā)，可以將前后臺顯示和處理邏輯分開，開發(fā)者能專注于處理邏輯功能的開發(fā)而不用關(guān)注前臺頁面，提高開發(fā)效率。

1.5 JSON的數(shù)據(jù)序列化

JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON采用完全獨立于語言的文本格式，但也使用了類似于C語言家族的習(xí)慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成為理想的數(shù)據(jù)交換語言。便于人閱讀和編寫以及機器的解析和生成[4]。

2 列車運行圖資料管理系統(tǒng)的總體設(shè)計

列車運行圖資料管理系統(tǒng)開發(fā)的目的在于建立一個完善的網(wǎng)絡(luò)系統(tǒng)，向鐵路部門發(fā)布列車運行圖數(shù)據(jù)，實現(xiàn)資源共享，使用戶能方便、快捷的進(jìn)行資料查詢檢索和報表上傳下載等工作[5]。

系統(tǒng)采用HTML靜態(tài)頁面+模板引擎開發(fā)方式、ADO.Net作為數(shù)據(jù)庫交互方式、Ajax+JavaScript+Json作為前后端數(shù)據(jù)交互手段。列車運行圖資料管理系統(tǒng)功能模塊可劃分為：用戶管理、資料數(shù)據(jù)管理，報表管理，系統(tǒng)管理。如圖2所示，圖中黃框代表需實現(xiàn)Ajax技術(shù)以及數(shù)據(jù)分頁技術(shù)的系統(tǒng)子模塊。

圖2 列車運行圖資料管理系統(tǒng)功能模塊

（1）用戶管理模塊

管理系統(tǒng)用戶信息，增刪系統(tǒng)用戶、為用戶分配系統(tǒng)使用權(quán)限、瀏覽和按條件查詢用戶。

（2）資料數(shù)據(jù)管理模塊

模塊具有索引顯示功能，可輸入或選擇檢索關(guān)鍵字（線路名、車站名等）查詢運行圖資料信息[5]，查詢結(jié)果按鐵路局規(guī)定的格式顯示，若數(shù)據(jù)信息條目過多時，宜采用分頁顯示，通過點擊頁面索引超鏈接按鈕，即可定位到相應(yīng)資料信息顯示頁面，此時頁面只刷新數(shù)據(jù)顯示的表格部分而不是全部頁面。模塊具有數(shù)據(jù)導(dǎo)入導(dǎo)出功能，可以選擇手動錄入、Excel導(dǎo)入或從數(shù)據(jù)庫導(dǎo)入，需要時可以以txt文檔或者Excel表格導(dǎo)出。

（3）報表管理模塊

模塊具有報表文件的在線瀏覽功能，實現(xiàn)異步刷新和分頁技術(shù)、報表文件按其資料的類別進(jìn)行歸類、上傳下載功能、報表的條件查詢和修改刪除功能。

（4）系統(tǒng)管理模塊

模塊具有系統(tǒng)配置功能，可修改系統(tǒng)的配置信息，系統(tǒng)配置的參數(shù)有很多，如連接數(shù)據(jù)庫的參數(shù)，用戶名和密碼的設(shè)置要求需遵循長度、大小寫敏感、復(fù)雜度、允許錯誤登陸的次數(shù)等要求、網(wǎng)站基礎(chǔ)信息等；具有系統(tǒng)日志管理功能，能夠?qū)θ罩拘畔⑦M(jìn)行記錄、讀取、按條件查詢，如日志日期等；具有系統(tǒng)留言管理，管理用戶留言板信息；具有系統(tǒng)安全管理功能，能設(shè)置密碼加密方式等安全策略，如MD5密碼加鹽技術(shù)等。

3 基于Ajax技術(shù)的列車運行圖資料管理系統(tǒng)的關(guān)鍵技術(shù)

3.1 數(shù)據(jù)索引的無提交刷新

用戶選擇填入索引條件，點擊搜索按鈕后觸發(fā)搜索函數(shù)，用變量記錄所填信息以拼接Url字符串的方式傳遞到Ajax函數(shù)，最后傳回服務(wù)器端，搜索函數(shù)的請求部分如下：

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));

參數(shù)：

searchType：索引的類型

searchText：索引的值

pageNum：當(dāng)前所在頁數(shù)

countInPage：一頁顯示條目的數(shù)目

yxtDataList.ashx：運行圖數(shù)據(jù)瀏覽頁面的處理程序

function (resText)：服務(wù)器響應(yīng)后執(zhí)行的onsuccess函數(shù)

resText：服務(wù)器響應(yīng)的XML數(shù)據(jù)

服務(wù)器端接收到ajax請求后，獲取請求類型、當(dāng)前所在頁數(shù)、每頁顯示數(shù)據(jù)條數(shù)、搜索類型、搜索文本等參數(shù)，并作邏輯判斷。如果滿足條件則按照搜索條件從數(shù)據(jù)庫中讀取數(shù)據(jù)，如果數(shù)據(jù)條數(shù)較多，則以Json序列化方式返回給客戶端瀏覽器，服務(wù)器瀏覽器解析后呈現(xiàn)給用戶。處理程序的關(guān)鍵代碼如下：

if (action == "Search"){

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

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

int pageNum = 1;//如果沒有傳遞PageNum參數(shù)，則顯示第一頁

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"){

//調(diào)用DAL層的

自定義條件搜索函數(shù)，搜索結(jié)果封裝成對象數(shù)組形式

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

pageNum, countInPage);

JavaScriptSerializer jss = new JavaScript-Serializer();

string json = jss.Serialize(datas);//對象數(shù)組封裝成Json序列

context.Response.Write(json); }}}客戶端瀏覽器接收到服務(wù)器返回的Json序列，解析之后以操作DOM方式來刷新數(shù)據(jù)展示表格，搜索函數(shù)的返回部分如下：

var datas = JSON.parse(resText);

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

var x = document.getElementById("table"). insertRow(j + 1); //動態(tài)添加表格行

x.insertCell(1).innerHTML = datas[j]. DataName;//動態(tài)添加表格單元格

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

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

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

至此，在客戶端所看到的就是數(shù)據(jù)展示表格的不提交刷新效果了。

3.2 基于Ajax+Json的分頁技術(shù)

當(dāng)索引出來的結(jié)果條目過多時，如果把這么多數(shù)據(jù)都在一個頁面發(fā)送給客戶端會造成以下幾個問題：

（1）數(shù)據(jù)在頁面中顯示過程漫長，甚至?xí)斐蓴?shù)據(jù)的缺損、遺漏和丟失；（2）服務(wù)器壓力過大，易造成網(wǎng)絡(luò)資源嚴(yán)重浪費，甚至?xí)a(chǎn)生嚴(yán)重的網(wǎng)絡(luò)堵塞現(xiàn)象；

（3）所需等待時間過長，對用戶而言是一次糟糕的體驗。

針對以上問題，本文引入Ajax+Json方式來進(jìn)行分頁。

所謂分頁技術(shù)，是指客戶端向服務(wù)器發(fā)出索引請求時，數(shù)據(jù)庫服務(wù)器根據(jù)客戶端瀏覽器的需求向數(shù)據(jù)庫“按需取量”，用戶看到的是請求的那部分?jǐn)?shù)據(jù)，而不是全部。

通過Ajax異步傳輸來減少網(wǎng)絡(luò)傳輸內(nèi)容，查詢返回的內(nèi)容以Json序列化方式傳遞給客戶端瀏覽器解析，再加以傳統(tǒng)分頁技術(shù)。這種瀏覽方式對于服務(wù)器而言，節(jié)省資源，對于用戶而言，客戶端和服務(wù)器之間的數(shù)據(jù)通信量很少，等待時間短，用戶體驗良好，不用刷新整個頁面，是一種理想的分頁瀏覽方式[6～7]。

實現(xiàn)步驟如下：

（1）向數(shù)據(jù)庫請求數(shù)據(jù)，傳遞搜索內(nèi)容、當(dāng)前所在頁及每頁顯示的條數(shù)，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分別是查詢數(shù)據(jù)開始和結(jié)束的數(shù)據(jù)索引號，具體的值分別為((pageNum -1) * countInPage + 1)和pageNum * countInPage，@Condition1為搜索文本。

（2）服務(wù)器端把查詢獲取的數(shù)據(jù)返回給客戶端瀏覽器，客戶端瀏覽器操作DOM刷新數(shù)據(jù)表格。

（3）動態(tài)添加頁碼導(dǎo)航鏈接：

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

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

這里的頁碼導(dǎo)航鏈接非跳轉(zhuǎn)鏈接，只需要用到鏈接的點擊處理函數(shù)，所以給跳轉(zhuǎn)url賦空值，再給頁碼導(dǎo)航鏈接動態(tài)添加點擊處理函數(shù)即可。

4 結(jié)束語

在列車運行圖資料管理系統(tǒng)中，本文基于Ajax技術(shù)實現(xiàn)了異步區(qū)域無提交刷新、靜態(tài)頁面下表格的動態(tài)刷新與分頁，避免了服務(wù)器端和客戶端瀏覽器之間的大量重復(fù)數(shù)據(jù)交互，減小了服務(wù)器的運行壓力、提高了運行性能，尤其對于需要頻繁進(jìn)行區(qū)域數(shù)據(jù)交互的功能頁面，在用戶體驗方面會有很大提高。

[1]彭其淵，閆海峰，石子明.計算機編制列車運行圖的理論與方法[M].成都：西南交通大學(xué)出版社，2004.

[2]柯昌正，黃厚寬.Ajax技術(shù)的原理和應(yīng)用[J].鐵路計算機應(yīng)用，2007，16（1）：27-29.

[3]蘭小機，段保霞，彭建偉.基于Ajax的WebGIS研究與應(yīng)用[J].測繪科學(xué)，2009，34（2）：214-216.

[4]楊會俠，吳立言，等. Ajax技術(shù)在仿真數(shù)據(jù)管理系統(tǒng)中的應(yīng)用[J].計算機工程與設(shè)計，2008，29（14）：3625-3627.

[5]嚴(yán) 冰.基于B/S模式的列車運行圖資料管理系統(tǒng)研究與設(shè)計[D].成都：西南交通大學(xué)，2006.

[6]屈武江.基于Ajax技術(shù)的ASP.NET數(shù)據(jù)分頁[J].計算機系統(tǒng)應(yīng)用，2013，22（9）：154-159.

[7]邱國偉，梁永全，陳玉娥.ASP.NET中數(shù)據(jù)分頁技術(shù)的研究[[J].計算機應(yīng)用研究，2007，24（9）：159-161.

責(zé)任編輯 方 圓

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

龔俊維，在讀碩士研究生；倪少權(quán)，教授。