Ajax技術(shù)在安全生產(chǎn)監(jiān)管平臺中的應(yīng)用研究

摘要:為了滿足北京市宣武區(qū)安全生產(chǎn)監(jiān)管信息化的需要，加強政府電子政務(wù)的建設(shè)，提出了構(gòu)建基于AJAX的安全生產(chǎn)監(jiān)管綜合信息平臺。AJAX的頁面無刷新技術(shù)及頁面局部更新功能提升了用戶體驗，顯著提高了系統(tǒng)性能。

關(guān)鍵詞:AJAX;B/S;XMLHttpRquest;無刷新技術(shù);局部更新

中圖分類號:TP311文獻標識碼:A 文章編號:1009-3044(2009)25-7157-02

Application Study of Ajax in a Platform which about Safety Production and Surpervision

WANG Yang-yang1，2，MENG Yun1

(1.College of Computer and Information Engineer，Henan University，Kaifeng 475001，China;2.China Academy of Safety and Technology，Beijing 100029，China)

Abstract: In order to meet the informationization of safety production supervision needs of Xuanwu District， Beijing， and enhance e-government construction of the Government，Proposed construction of an integrated information of safe production and supervision platform based on AJAX， with the help of the web page non-refreshing technology in AJAX and local update system， users' experience and the system performencecan be improved greatly.

Key words:AJAX;B/S;XMLHttpRequest; non-refreshing technology;local update

安全生產(chǎn)監(jiān)管綜合信息平臺使得政府安監(jiān)部門可以綜合監(jiān)管本轄區(qū)的安全生產(chǎn)工作，依法監(jiān)督檢查本轄區(qū)內(nèi)生產(chǎn)經(jīng)營單位的安全生產(chǎn)執(zhí)法情況。但隨著信息量的不斷增加，web的響應(yīng)速度就成為衡量系統(tǒng)的重要指標。為了解決這一問題，筆者在該平臺采用了新一代的Ajax技術(shù)，由于Ajax是一種異步網(wǎng)絡(luò)應(yīng)用的技術(shù)，當瀏覽器與服務(wù)器交互時，Ajax技術(shù)可以將瀏覽器中的一部分內(nèi)容呈現(xiàn)出來，從而避免了將瀏覽器整個內(nèi)容提交到服務(wù)器。該系統(tǒng)中采用的頁面無刷新頁面更新技術(shù)及頁面局部更新技術(shù)，提升了用戶體驗，顯著提升了系統(tǒng)的執(zhí)行效率。

1 Ajax技術(shù)概述

AJAX(Asynchronous JavaScript and XML)其實是多種技術(shù)的綜合，包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。主要技術(shù)包含如下:1)AJAX的定義;2)基于WEB標準XHTML+CSS的表示;3)使用DOM(Document Object Model)進行動態(tài)顯示及交互;4)使用XML和XSLT進行數(shù)據(jù)交換及相關(guān)操作;5)使用XML Http Request異步數(shù)據(jù)查詢、檢索。

在AJAX中，XMLHttpRquest是其最核心的技術(shù)。XMLHttpRquest是XMLHTTP組件的對象，通過這個對象，AJAX可以像桌面應(yīng)用程序一樣只同服務(wù)器進行數(shù)據(jù)層面的交換，而不用每次都刷新頁面，也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來做。這樣既減輕了服務(wù)器負擔(dān)又加快了響應(yīng)速度、縮短了用戶等待的時間。

AJAX技術(shù)和傳統(tǒng)的WEB技術(shù)相比，存在以下三個主要區(qū)別:

1)能夠更新頁面中的部分內(nèi)容，不需要刷新整個頁面就能夠與服務(wù)器通信。

2)頁面和服務(wù)器直接的通信可以使用異步操作，從而不需要打斷用戶的操作，使得頁面具有更加快速的響應(yīng)能力。

3)由于頁面與服務(wù)器交互時，只需要頁面的部分內(nèi)容，因此減少了頁面與服務(wù)器的通信量，提高了應(yīng)用程序的效率。

2 系統(tǒng)結(jié)構(gòu)設(shè)計

系統(tǒng)采用B/S(Browser/Server，瀏覽器和服務(wù)器)結(jié)構(gòu)。B/S最大的特點就是可以在任何地方進行操作而不用安裝任何專門的軟件，實現(xiàn)了客戶端的零維護。生產(chǎn)經(jīng)營企業(yè)、行業(yè)用戶、街道基層用戶可以借助互聯(lián)網(wǎng)技術(shù)實現(xiàn)注冊用戶信息、遠程上報和更新管理相關(guān)數(shù)據(jù)、政府安監(jiān)部門通過互聯(lián)網(wǎng)技術(shù)下發(fā)通知、罰單。

根據(jù)用戶需求分析和系統(tǒng)設(shè)計目標的要求，可設(shè)計出系統(tǒng)的總體結(jié)構(gòu)設(shè)計如圖1所示。

3 基于Ajax的系統(tǒng)實現(xiàn)

Ajax的工作原理相當于在用戶和服務(wù)器之間增加了一個中間層——Ajax引擎，使用戶操作與服務(wù)器響應(yīng)異步化。這樣可以把一些服務(wù)器負擔(dān)的工作轉(zhuǎn)到客戶端，利于客戶端閑置的處理能力來處理，減輕了服務(wù)器的負擔(dān)。

在該系統(tǒng)中，利用了Ajax技術(shù)的異步通訊能力來增強頁面的交互性，提高系統(tǒng)效率。

1)無刷新技術(shù)

利用Ajax引擎來實現(xiàn)頁面的無刷新更新數(shù)據(jù)。一個完整的HTTP請求過程分為以下四步:①創(chuàng)建一個XmlHttpRequest對象;②指定相應(yīng)處理函數(shù);③發(fā)出HTTP請求;④處理服務(wù)器返回的信息。

創(chuàng)建XmlHttpReques對象

為了讓JavaScript可以向服務(wù)器發(fā)送HTTP請求，必須使用XMLHttpRequest對象。并且在使用之前要將XmlHttpRequest對象實例化。關(guān)鍵代碼如下:

If(window.XMLHttpRequest) {//Mozilla……

http_request=new XMLHttpRequest();

}else if(window.ActiveXObject) {//IE

http_request=new ActiveXObject(“Microsoft.XMLHTTP);}

因為各個瀏覽器對XMLHttpRequest對象的實例化過程實現(xiàn)不同，所以在這里要進行判斷。

指定相應(yīng)處理函數(shù)

http_request.onreadystatechange=selectInfo;

在這里指定服務(wù)器返回信息時客戶端的處理方式，需要將相應(yīng)的處理函數(shù)名稱賦給XmlHttpRequest對象的onreadystatechange屬性。

發(fā)出HTTP請求

http_request.open(“GET”，url，true)

http_request.send(data);

在這里利用XmlHttpRequest對象的open方法建立與服務(wù)器的連接，open的第一個參數(shù)是HTTP請求的方式，為Get、Post或Head。Open的第二個參數(shù)為目標URL，最后一個參數(shù)被設(shè)置為true，它指示該請求的異步特性。Send方法用來向服務(wù)器發(fā)送請求，發(fā)送的數(shù)據(jù)通過data參數(shù)發(fā)送到服務(wù)器。

處理服務(wù)器返回的信息

If(http_request.readyState==4){

If(http_request.status==200){

//信息已經(jīng)成功返回

取得服務(wù)器端返回的信息，然后按照實際情況進行處理

}else{

Alert(http_request.status);}}

在這里首先檢查XMLHttpRequest對象的readyState值，判斷請求的目前狀態(tài)。參照屬性表可以知道，readyState值為4的時候，代表服務(wù)器已經(jīng)傳回所有的信息。

服務(wù)器端的處理

服務(wù)器端根據(jù)客戶端傳過來的數(shù)據(jù)，從數(shù)據(jù)庫中讀取符合條件的記錄，并將得到的信息綁定到變量infor上，然后返回給客戶端。主要的代碼如下:

String sql=”查詢語句”;

SqlDataAdapter da=new SqlDataAdapter(sql，數(shù)據(jù)庫連接字符串);

Dataset ds=new DataSet();

da.fill(ds，”SelectContent);

……將讀取到的信息賦給變量infor

Response.write(infor);//將信息返回給客戶端

2)局部更新技術(shù)

利用Ajax的UpdatePanel控件來實現(xiàn)頁面局部更新技術(shù)。UpdatePanel控件是一個面板，它往往充當一個容器，能夠?qū)崿F(xiàn)局部更新功能。若web窗體頁只需要更新其區(qū)域中的部分內(nèi)容，用戶可以把更新的內(nèi)容事先放置在UpdatePanel控件中。程序的部分主要代碼如下:

安監(jiān)局科室:

行業(yè)監(jiān)管部門

UpdatePanel的UpdateMode屬性的值有兩個:①Always②Conditional，Always用來指定UpdatePanel里的內(nèi)容總是更新，而Conditional是指有條件的更新。這里我們采用的是Conditional。

Trigger屬性指定一個集合，用戶可以向該集合中添加實現(xiàn)局部更新或整頁回送的Trigger，Trigger有兩種類型:①AsyncPostBackTrigger;②PostBackTrigger。AsyncPostBackTrigger主要用來指定某個控件的某個事件引發(fā)異步回傳，即局部更新。它的屬性有ControlID和EventName。分別用來指定控件ID和控件事件。PostBackTrigger是來指定UpdatePanel控件內(nèi)的某個控件引發(fā)整個頁面的更新。

這里我們用的是AsyncPostBackTrigger，它的ControlID=”DropDownList1”指定了控件DropDownList1用來控制UpdatePanel1的局部更新，而EventName=“SelectIndexChanged”用戶指定是控件DropDownList1的事件SelectIndexChanged來引發(fā)局部更新。

該頁面實現(xiàn)了下拉框的局部更新功能，當選擇安監(jiān)局科室后，相應(yīng)的行業(yè)監(jiān)管部門會實現(xiàn)局部更新，顯示所選擇的安監(jiān)局科室的行業(yè)監(jiān)管部門，這樣就有效的提高了系統(tǒng)的效率，服務(wù)器與瀏覽器之間交換的數(shù)據(jù)大量減少，切實降低了系統(tǒng)的安全隱患。效果如圖2所示。

4 結(jié)論

基于Ajax技術(shù)的實現(xiàn)，避免了完全基于服務(wù)器端實現(xiàn)的種種弊病。用戶既能夠在選擇種類時即使獲得最新的數(shù)據(jù)，同時又避免服務(wù)器端頻繁處理數(shù)據(jù)而影響整個系統(tǒng)功能。本系統(tǒng)采用了Ajax中的頁面無刷新技術(shù)及頁面局部更新技術(shù)，給用戶帶來了良好的體驗，充分發(fā)揮了Ajax應(yīng)用的優(yōu)勢，極大地提高了系統(tǒng)的執(zhí)行效率。

參考文獻:

[1] 趙永屹. 基于AJAX與J2EE的新型Web應(yīng)用的設(shè)計與實現(xiàn)[J]，計算機工程與設(shè)計，2007，28(1):189-192.

[2] 徐紅勤. Ajax在網(wǎng)絡(luò)考試系統(tǒng)中的應(yīng)用[J].計算機應(yīng)用，2007，27(6):349-350.

[3] Crane D，Pascarello E，James D.Ajax in Action[M].ajaxcn.org，譯.北京:人民郵電出版社，2006

[4] 梁民，汪偉.基于AJAX技術(shù)開發(fā)Web應(yīng)用[J].電腦知識與技術(shù):學(xué)術(shù)交流，2006(2):119-119，193.

[5] 張慧武. 基于AJAX的音像制品電子商務(wù)系統(tǒng)實現(xiàn)[D].復(fù)旦大學(xué)，2008.