丘岳峰， 蘇志遠(yuǎn) （北京郵電大學(xué) 自動(dòng)化學(xué)院，北京 100876）

·物流技術(shù)·

基于AJAX的物流紅外報(bào)警視頻監(jiān)控系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

丘岳峰， 蘇志遠(yuǎn) （北京郵電大學(xué) 自動(dòng)化學(xué)院，北京 100876）

0 引 言

近年來，物流行業(yè)取得了很大的進(jìn)步，物流設(shè)備設(shè)施也向著自動(dòng)化、信息化方向發(fā)展，不斷更新?lián)Q代。由此產(chǎn)生的物流安全問題，正日益受到人們的重視。另一方面，隨著物聯(lián)網(wǎng)的高速發(fā)展，以物聯(lián)網(wǎng)為代表的新興產(chǎn)業(yè)受到市場(chǎng)青睞，紅外傳感、視頻監(jiān)控等安防工具也得到了較為廣泛的應(yīng)用。

采用了紅外報(bào)警與視頻監(jiān)控結(jié)合的物流監(jiān)控系統(tǒng)，集合了紅外報(bào)警設(shè)備和視頻監(jiān)控設(shè)備的優(yōu)點(diǎn)，實(shí)現(xiàn)對(duì)物流防區(qū)進(jìn)行實(shí)時(shí)、高效以及快速定位響應(yīng)的報(bào)警監(jiān)控，是解決物流設(shè)備設(shè)施安全問題的重要手段。

傳統(tǒng)監(jiān)控系統(tǒng)無論是基于C/S（客戶端/服務(wù)器）構(gòu)架還是基于傳統(tǒng)的B/S（瀏覽器/服務(wù)器）構(gòu)架，都無法克服架構(gòu)本身的一些缺陷。本文提出的基于AJAX的物流紅外報(bào)警視頻監(jiān)控系統(tǒng)，采用B/S（瀏覽器/服務(wù)器）構(gòu)架，利用AJAX技術(shù)在瀏覽器與Web服務(wù)器之間使用異步數(shù)據(jù)傳輸而實(shí)現(xiàn)頁(yè)面無刷新無等待的特點(diǎn)，實(shí)現(xiàn)對(duì)防區(qū)安全的高效快速實(shí)時(shí)報(bào)警監(jiān)控，從而避免了傳統(tǒng)架構(gòu)的缺陷，優(yōu)化了監(jiān)控的實(shí)現(xiàn)效果。

1 AJAX技術(shù)

AJAX是Asynchronous JavaScript+XML的簡(jiǎn)寫，AJAX實(shí)際上不是一種技術(shù)，而是由JavaScript、XHTML和CSS、DOM、XML和XSTL、XML2HttpRequest以優(yōu)雅的方式結(jié)合而成的，采用AJAX技術(shù)必須使用基于XHTML和標(biāo)準(zhǔn)CSS的表示層[1]。

與傳統(tǒng)的Web應(yīng)用不同，AJAX采用異步交互過程，如圖1所示。

圖1 傳統(tǒng)Web應(yīng)用 （左）和AJAX模型 （右）

AJAX的工作原理就是相當(dāng)于在瀏覽器和服務(wù)器之間加了一個(gè)中間層，使用戶操作與服務(wù)器響應(yīng)異步化。而這一中間層所要做的工作都是由AJAX引擎 （AJAX engine）來完成的。實(shí)際上，AJAX引擎就是一些復(fù)雜的Javascript程序，這些程序通過調(diào)用XMLHttpRequest對(duì)象的屬性和方法來與服務(wù)器端進(jìn)行數(shù)據(jù)交互，然后再通過DOM來解析處理XML文檔和部分更新HTML頁(yè)面的內(nèi)容[2]。

2 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

2.1 系統(tǒng)概述與框架設(shè)計(jì)

2.1.1 系統(tǒng)概述。在物流防區(qū)中，各重要節(jié)點(diǎn)安裝成套的紅外報(bào)警設(shè)備和網(wǎng)絡(luò)視頻攝像頭，每個(gè)節(jié)點(diǎn)的攝像頭負(fù)責(zé)該節(jié)點(diǎn)紅外報(bào)警設(shè)備監(jiān)控區(qū)域的視頻監(jiān)控。紅外報(bào)警設(shè)備和網(wǎng)絡(luò)攝像頭記錄的報(bào)警記錄和監(jiān)控視頻信息由各自的硬件程序?qū)崟r(shí)寫入服務(wù)器端的數(shù)據(jù)庫(kù)，客戶端電腦通過B/S監(jiān)控系統(tǒng)進(jìn)行實(shí)時(shí)監(jiān)控。系統(tǒng)物理模型如圖2。

圖2 物流紅外報(bào)警視頻監(jiān)控系統(tǒng)物理模型

2.1.2 系統(tǒng)框架設(shè)計(jì)。物流紅外報(bào)警視頻監(jiān)控系統(tǒng)，服務(wù)器采用RedHat Enterprise 5.4操作系統(tǒng)，后臺(tái)數(shù)據(jù)庫(kù)使用Oracle 10g，Web服務(wù)器開發(fā)使用Tomcat?？蛻舳瞬僮飨到y(tǒng)采用 Microsoft Windows XP操作系統(tǒng)，瀏覽器為Internet Explorer 6.0。開發(fā)工具使用My Eclipse，B/S系統(tǒng)采用Appfuse框架，集成了Struts、Hibernate和Spring框架技術(shù)，前端使用jsp+jQuery框架。

2.2 系統(tǒng)功能。B/S系統(tǒng)以物流防區(qū)的平面區(qū)為主功能操作區(qū)，在平面圖上用相應(yīng)圖標(biāo)標(biāo)注出各紅外報(bào)警設(shè)備和視頻攝像頭的實(shí)際位置，提供對(duì)視頻攝像頭實(shí)時(shí)監(jiān)控視頻的觀看功能，并實(shí)時(shí)顯示紅外設(shè)備報(bào)警情況。

當(dāng)出現(xiàn)紅外報(bào)警時(shí)，主功能操作區(qū)將出現(xiàn)醒目報(bào)警提示，并定位到正在報(bào)警的紅外設(shè)備，可即時(shí)查看負(fù)責(zé)該紅外設(shè)備報(bào)警區(qū)域的攝像頭監(jiān)控錄像，從而對(duì)報(bào)警情況作及時(shí)處理。

B/S系統(tǒng)還有輔助功能菜單區(qū)，提供報(bào)警歷史記錄查詢、報(bào)警錄像查詢、攝像頭設(shè)備管理和紅外設(shè)備管理等輔助功能。

系統(tǒng)結(jié)構(gòu)功能圖如圖3。

圖3 系統(tǒng)結(jié)構(gòu)功能圖

2.3 系統(tǒng)實(shí)現(xiàn)。通過瀏覽器登錄紅外報(bào)警視頻監(jiān)控系統(tǒng)，作為視圖層的主功能區(qū)使用HTML顯示并基于JavaScript的事件驅(qū)動(dòng)，響應(yīng)用戶的各種輸入，檢測(cè)用戶是否有效并及時(shí)反饋，并采用定時(shí)器對(duì)有效請(qǐng)求通過AJAX與服務(wù)器異步通信來發(fā)送給業(yè)務(wù)邏輯層，通過jQuery框架可以支持跨瀏覽器平臺(tái)，具有很強(qiáng)的動(dòng)態(tài)性和交互性，并減少數(shù)據(jù)傳輸量，反應(yīng)速度快。

Web服務(wù)器端業(yè)務(wù)邏輯層使用JSP處理用戶請(qǐng)求和Struts處理業(yè)務(wù)邏輯，通過Hibernate訪問數(shù)據(jù)層處理設(shè)備數(shù)據(jù)并返回給客戶端，業(yè)務(wù)邏輯層主要處理報(bào)警情況顯示等。

2.3.1 封裝AJAX方法。使用AJAX發(fā)送請(qǐng)求是通過XMLHttprequest對(duì)象來實(shí)現(xiàn)。使用之前，要先實(shí)例化，并跨瀏覽器運(yùn)行，指定回調(diào)函數(shù)。然后通過Open方法建立對(duì)服務(wù)器的調(diào)用，send方法向服務(wù)器發(fā)送請(qǐng)求。為了實(shí)現(xiàn)AJAX方法調(diào)用的高效性和可重復(fù)性，本系統(tǒng)對(duì)AJAX方法進(jìn)行了封裝，將請(qǐng)求的url和回調(diào)函數(shù)作為參數(shù)傳入。代碼如下：function XmlHttp(option){

var xmlHttp=GetXmlHttpObject();

function GetXmlHttpObject(){

var xmlHttp=null;

try{//Firefox,Opera 8.0+,Safari

xmlHttp=new XMLHttpRequest();

}catch(e){//Internet Explorer

try{//5.5版本以上

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){//5.5版本一下

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}

return xmlHttp;}

function getResponse(){ xmlHttp.onreadystatechange=handleStateChange;

xmlHttp.open("POST",option.url,true);

xmlHttp.send(null);}

function handleStateChange(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

var xmlDoc=xmlHttp.responseXML;

eval(option.callback(xmlDoc));}} }

return{xmlHttpObject:xmlHttp,getResponse:getResponse};}

2.3.2 紅外報(bào)警記錄自動(dòng)提示。本系統(tǒng)最核心的功能是要實(shí)現(xiàn)紅外報(bào)警記錄自動(dòng)提示，這要借助使用javaScript定時(shí)器和AJAX技術(shù)，定時(shí)掃描數(shù)據(jù)庫(kù)中有無新的紅外報(bào)警記錄。

B/S系統(tǒng)通過使用JavaScript中的setInterval定時(shí)器，利用AJAX技術(shù)，定時(shí)返回?cái)?shù)據(jù)庫(kù)中最新紅外報(bào)警記錄表，在主功能區(qū)域上局部刷新顯示相關(guān)信息，來實(shí)現(xiàn)防區(qū)紅外報(bào)警記錄自動(dòng)提示。

首先，B/S系統(tǒng)主功能區(qū)頁(yè)面加載時(shí)，設(shè)置setInterval函數(shù)，設(shè)定時(shí)間間隔，定時(shí)調(diào)用AJAX方法，創(chuàng)建XMLHttprequest對(duì)象，創(chuàng)建回調(diào)函數(shù)并發(fā)送請(qǐng)求，服務(wù)器接收請(qǐng)求，返回從數(shù)據(jù)庫(kù)中獲取的最新紅外報(bào)警記錄。瀏覽器客戶端接收數(shù)據(jù)，調(diào)用回調(diào)函數(shù)，創(chuàng)建html對(duì)象，利用css絕對(duì)定位，在主功能區(qū)域頁(yè)面內(nèi)顯示報(bào)警圖標(biāo)及相應(yīng)功能操作。

2.3.3 界面實(shí)現(xiàn)。Web系統(tǒng)功能頁(yè)面主要分為2個(gè)部分：左側(cè)和主體。左側(cè)部分用于功能的選擇，主體部分用于用戶操作以及顯示操作結(jié)果。系統(tǒng)主體界面實(shí)現(xiàn)如圖4。

圖4 系統(tǒng)主體界面實(shí)現(xiàn)

3 結(jié)束語(yǔ)

本文介紹了基于AJAX的物流紅外報(bào)警視頻監(jiān)控系統(tǒng)的框架與結(jié)構(gòu)、開發(fā)模式以及實(shí)現(xiàn)的關(guān)鍵技術(shù)。實(shí)踐證明基于AJAX的Web系統(tǒng)應(yīng)用更加靈活、易于擴(kuò)展和維護(hù)，能夠提高對(duì)物流防區(qū)報(bào)警情況的響應(yīng)能力，對(duì)防區(qū)進(jìn)行高效實(shí)時(shí)的監(jiān)控，有一定的通用性和推廣價(jià)值。

[1] 程建軍.基于AJAX技術(shù)的研究生教育管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)技術(shù)與發(fā)展，2008,18(12):207-209.

[2] 陳鵬翔，盛建東，武紅旗,等.AJAX技術(shù)及其在農(nóng)業(yè)WebGIS中的應(yīng)用[J].測(cè)繪科學(xué)，2010,35(6):257-258.

[3] 柯昌正，黃厚寬.AJAX技術(shù)的原理與應(yīng)用[J].鐵路計(jì)算機(jī)應(yīng)用，2007,16(1):123-124.

[4] 張臣雄.基于IP網(wǎng)絡(luò)的遠(yuǎn)程安防圖像監(jiān)控系統(tǒng)[J].中國(guó)公共安全，2003(13):98-101.

[5] 姜敏，施健.基于嵌入式WEB服務(wù)器的遠(yuǎn)程視頻監(jiān)控技術(shù)[J].計(jì)算機(jī)時(shí)代，2001(7):112-114.

[6] 陶維．基于SSH多架構(gòu)Web系統(tǒng)設(shè)計(jì)及其應(yīng)用[J]．科技和產(chǎn)業(yè)，2009(3):101-104.

[7] 束超，翟玉慶.基于AJAX和JSON的高校成績(jī)管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化，2009(1):134-136.

[8] 孟超，曾連蓀.基于無線測(cè)控網(wǎng)的物流監(jiān)控信息系統(tǒng)[J].物流技術(shù)，2009,28(5):105-107.

[9] 郭永彩，余瀅，高潮.基于GSMGPRS的遠(yuǎn)程安防監(jiān)控管理系統(tǒng)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2010,19(1):123-126.

Design and Implementation of Logistics Monitor System of Infrared Alarm and Video on AJAX

QIU Yue-feng,SU Zhi-yuan (School of Automation,Beijing University of Posts&Telecommunications,Beijing 100876,China)

傳統(tǒng)的監(jiān)控系統(tǒng)功能單一，無法對(duì)異常實(shí)現(xiàn)快速響應(yīng)。為了實(shí)現(xiàn)對(duì)物流設(shè)備設(shè)施進(jìn)行實(shí)時(shí)高效的安全監(jiān)控，利用AJAX技術(shù)特點(diǎn)，提出了基于AJAX的物流紅外報(bào)警視頻監(jiān)控系統(tǒng)的實(shí)現(xiàn)方案，利用Java和JavaScript進(jìn)行開發(fā)，實(shí)現(xiàn)了設(shè)計(jì)方案，運(yùn)行結(jié)果表明，引入AJAX技術(shù)，提高了報(bào)警監(jiān)控響應(yīng)時(shí)間，減輕了服務(wù)器的負(fù)載壓力。

計(jì)算機(jī)技術(shù)；AJAX；紅外報(bào)警；視頻監(jiān)控

The traditional monitoring system has single function,cannot achieve rapid response.In order to realize real-time efficient logistics safety monitoring for equipment and facilities,using AJAX technique characteristics,this paper puts forward an implementation scheme that logistics monitor system of infrared alarm and video on AJAX,using Java and JavaScript in development,realize the design plan and operation results showed that the AJAX technology improves on response time of alarm monitoring and reduces the server load pressure.

computer technology;AJAX;infrared alarm;video monitoring

TP391

A

2010-12-29

丘岳峰（1987-），男，廣東興寧人，北京郵電大學(xué)自動(dòng)化學(xué)院碩士研究生，研究方向：物流信息化。

1002-3100(2011)04-0070-03