郭慶燕　張　敏　楊賢棟

(福建省氣象信息中心　福建 福州 350001)

?

JQuery Ajax異步處理JSON數(shù)據(jù)實現(xiàn)氣象圖片的顯示

郭慶燕張敏楊賢棟

(福建省氣象信息中心福建 福州 350001)

摘要氣象資料復(fù)雜多樣，如何在氣象信息網(wǎng)上快速顯示氣象資料圖片，是氣象開發(fā)工作者的重要工作之一。針對這種需求，提出在頁面無刷新的情況下實現(xiàn)氣象圖片分類顯示的效果。前臺頁面通過Ajax向后臺的Servlet發(fā)出請求，后臺Servlet處理用戶請求后返回JSON格式的數(shù)據(jù)給請求頁面，請求頁面利用JQuery處理返回的JSON格式的數(shù)據(jù)，將結(jié)果呈獻給用戶。實驗結(jié)果表明利用這種jQuery Ajax 異步處理JSON數(shù)據(jù)的方法很好地實現(xiàn)了頁面對后臺數(shù)據(jù)的數(shù)據(jù)無刷新訪問，達到多種氣象圖片分類顯示效果。

關(guān)鍵詞AjaxJQueryJSON圖片分類顯示

0引言

本文的研究內(nèi)容是福建省氣象信息內(nèi)網(wǎng)的一個圖片顯示模塊。眾所周知，氣象資料的種類繁多，分類復(fù)雜，因此如何選擇一種快捷、有效的圖片顯示方式是很關(guān)鍵的。目前，Ajax技術(shù)發(fā)展迅速，它采用瀏覽器頁面與服務(wù)器之間異步通信機制[1]，在響應(yīng)瀏覽器的請求時，不必加載整個頁面，可以只加載某一個模塊，比如一個圖片顯示區(qū)，這樣大大提高了瀏覽器端的顯示速度。JQuery是目前使用最廣泛的JavaScript的函數(shù)庫，它兼容各種瀏覽器，能夠快速簡單地編寫可擴展和兼容性強的JavaScript代碼[2]，而且它為Ajax操作提供了很好的支持。JSON是一種輕量級的數(shù)據(jù)交換方式，它是完全獨立于語言的文本格式，易于閱讀與編寫[3]。

因此本文選擇JSON作為數(shù)據(jù)傳輸方式。本文基于圖片顯示效果的要求和顯示時效的要求，利用上述技術(shù)顯示不同種類的氣象圖片下不同時效的最新圖片。

1Ajax、JQuery和JSON技術(shù)的簡單介紹

Ajax包括JavaScript、XMLHttpRequest、CSS等幾種非常成熟的技術(shù)[4]。相對于Web服務(wù)，Ajax服務(wù)的優(yōu)點在于：第一，Ajax服務(wù)是異步的網(wǎng)絡(luò)服務(wù)，用戶端能夠使用戶在前臺操作的同時，在后臺與服務(wù)器開展通信，并能夠把服務(wù)器取得的信息實時顯示在瀏覽器上[5]；第二，在Ajax架構(gòu)中，服務(wù)器端和用戶端傳輸?shù)氖墙?jīng)過封裝的小段數(shù)據(jù)，而不是整頁的多媒體信息和html源代碼[6]，這就大大降低了網(wǎng)絡(luò)的通信負荷。

本文中當客戶端瀏覽氣象信息網(wǎng)的氣象圖片時，點擊某一類氣象圖片，只要求在圖片區(qū)顯示該類氣象圖片下不同時效的最新圖片，并不要求刷新整個頁面，使用Ajax技術(shù)實現(xiàn)該功能，大大減少瀏覽器的空閑等待時間。

JQuery是輕量級的JavaScript庫，它解決了多種瀏覽器中的兼容性，通過封裝JavaScript的原生方法，能夠快速簡單地編寫可擴展和兼容性強的JavaScript代碼，并且能夠使用戶的html頁面保持代碼和html內(nèi)容分離，避免在html頁面里插入一些JavaScript來調(diào)用命令。它為Ajax操作提供了很好的支持。在JQuery庫里面， .ajax ()可以發(fā)送任何Ajax請求獲取遠程數(shù)據(jù)， .get()、.post()、.getJSON()等簡單方式也可以發(fā)送請求[7]。本文中利用jQuery的這些優(yōu)點向后臺發(fā)送請求，獲取數(shù)據(jù)。

JSON是一種可以轉(zhuǎn)換為字符串的數(shù)據(jù)請求對象[8]，它以異步方式將字符串由客戶端傳遞到Web服務(wù)器的應(yīng)用程序中。本文利用Servlet結(jié)合JSON進行業(yè)務(wù)邏輯層與應(yīng)用表示層進行數(shù)據(jù)傳輸，Servlet是一種獨立于平臺和協(xié)議的服務(wù)器的Java應(yīng)用，可以生成動態(tài)的Web頁面[9]。

2氣象圖片顯示的實現(xiàn)方法

上述敘述，使我們充分認識到使用JQuery+Ajax異步處理JSON數(shù)據(jù)這種技術(shù)的先進性和快捷性[10]，也使我們了解了它們的技術(shù)原理和組成格式，結(jié)合氣象圖片的資料類型和要求的顯示效果，闡述氣象圖片資料的顯示過程。

2.1資料背景及圖片顯示要求

本文涉及到的氣象圖片主要包括粗網(wǎng)格要素圖、細網(wǎng)格要素圖、數(shù)值預(yù)報氣象要素圖、集合預(yù)報圖等不同類型的圖片，這些氣象圖片提供不同時效的溫、壓、濕、風、降水等信息?，F(xiàn)以集合預(yù)報圖這一類資料為例，具體闡述圖片資料的顯示過程。

本文中，集合預(yù)報圖片存儲在服務(wù)器的文件夾下，該類型資料下的圖片是實時更新的，最新資料圖片生成后，直接傳輸?shù)轿募夸浵?。集合預(yù)報圖主要包括6小時降水概率圖、6小時降水郵票圖、12小時降水概率圖、12小時降水郵票圖、24小時降水概率圖、24小時降水郵票圖等。同一類資料又根據(jù)不同的時效分為不同的圖片，時效性的不同是通過圖片的文件名不同來區(qū)別的。例如6小時降水郵票圖是每天的8：00和20：00生成，每次生成8張不同的圖片，圖片之間的時效性相差6小時，有6、12、18、24、30、36、42、48不同的實效圖片，這種時效性差別在文件名中有標記，以示區(qū)分不同的圖片。其他類型的資料和6小時降水郵票圖相似，不同的時效圖片在文件名明顯標注。這里不再贅述。

本文中對這些圖片的顯示要求：將集合預(yù)報下的某一種資料圖片的名稱以列表形式列出，點擊每種類型資料后，快速動態(tài)加載出該類型資料下的不同時效類型，再點擊某一種時效類型，在圖片區(qū)顯示該時效下最近更新的圖片。

2.2圖片顯示過程

這一部分中的主要工作是對文件的檢索處理和JQuery Ajax 異步處理JSON數(shù)據(jù)。根據(jù)顯示要求，當用戶點擊某一類數(shù)據(jù)圖片的某一種時效后，在圖片區(qū)顯示該時效下最新的一張圖片，因為圖片資料的目錄下是保存三天的數(shù)據(jù)，所以及時檢索出最新的那張圖片是關(guān)鍵的，本文首先處理不同的文件名區(qū)分出不同類型的時效圖片，然后根據(jù)同一時效圖的不同修改時間，檢索出該類時效圖的最新一張圖片。

最新的圖片檢索出來后，我們將其封裝成JSON數(shù)據(jù)格式，進行前后臺數(shù)據(jù)傳遞。當用戶在頁面上點擊某一類圖片后，提交Ajax請求，這里使用了JQuery的.getJSON(url,function callback(data))函數(shù)提交Ajax請求到指定的url，并且攜帶參數(shù)，最后用一個回調(diào)函數(shù)callback處理請求返回結(jié)果。

在基本介紹了圖片顯示過程中的關(guān)鍵問題后，結(jié)合程序具體介紹顯示方法。

首先，我們在Web工程新建一個jsp頁面，根據(jù)顯示要求，我們在jsp頁面里添加了兩個列表控件dataTypeSelect和hourSelect和一個圖片顯示區(qū)ECImg，列表控件dataTypeSelect顯示氣象要素所包含的資料類型，列表控件hourSelect顯示時效類型，圖片顯示區(qū)ECImg顯示最新圖片。當用戶在列表控件dataTypeSelect點擊了某一資料類型后，在列表控件hourSelect里動態(tài)加載該資料類型所包含的所有時效類型，同時用戶向后臺Servlet提交了Ajax請求，并將用戶選擇的資料類型名作為參數(shù)傳遞給后臺，在這個過程中使用JQuery的.getJSON(url,function callback(data))函數(shù)將參數(shù)傳遞給后臺的Servlet來處理用戶的請求。當用戶在列表框hourSelect里點擊該類型資料的某一時效類型后，該時效類型下的最新資料圖片就在圖片區(qū)ECImg里顯示出來。

其次， 我們寫了一個Servlet類處理Ajax請求數(shù)據(jù)，在Servlet類里，調(diào)用文件處理的類GetImagepath.java，將用戶點擊的資料類型下所有時效類型對應(yīng)的最新圖片封裝成JSONObject對象一次性返回給請求頁面。針對文件的處理，我們建立了一個配置文件name.properties和兩個類：FileUtil.java、GetImagepath.java。配置文件name.properties，包含數(shù)值預(yù)報氣象要素下的所有文件類型名以及路徑。

然后我們編寫一個讀取該配置文件的接口類FileUtil.java，該類實現(xiàn)讀取數(shù)值預(yù)報氣象要素所在路徑、氣象要素文件下資料類型以及其相對應(yīng)的時效類型。

在GetImagepath.java類中，本文實現(xiàn)檢索出某一類型資料下各時效類型對應(yīng)的最新更新圖片。根據(jù)2.1節(jié)中的顯示要求，當用戶選擇了某一類型資料的某一時效后，要求在圖片區(qū)顯示該時效對應(yīng)的最新圖片，我們處理的方法是，在GetImagepath.java中將該類型資料下的所有時效類型對應(yīng)的最新圖片一次性檢索出來，具體做法是根據(jù)文件名中時效性的標識，檢索出同一時效類型的圖片封裝在List對象imgPath里面，然后針對每一種時效類型，Collections.sort()函數(shù)根據(jù)文件修改時間對檢索出來的同一時效類型圖片進行排序，取修改時間最近的那張圖片為該時效類型所對應(yīng)的最新圖片，接著將這些時效類型和其所對應(yīng)的最新圖片封裝成一個一個的Map對象，Map里的“鍵”代表時效類型，“值”代表時效類型所對應(yīng)的最新圖片的文件名。然后將這些Map對象作為List對象mapList的元素傳遞給Servlet類，Servlet類從mapList對象中將數(shù)據(jù)讀取出來，封裝成JSONObject對象，一次性返回給前臺。這樣做避免多次檢索圖片，縮短相應(yīng)時間。

最后，前臺jsp頁面接受返回結(jié)果：請求的url通過后臺處理返回數(shù)據(jù)到前臺頁面，返回數(shù)據(jù)的處理就在回調(diào)函數(shù)callback中處理，處理過程：一是在第二個列表hourSelect中加載用戶所選擇的資料類型下的時效類型，二是，在圖片區(qū)顯示時效類型所對應(yīng)的最新圖片。

在介紹了顯示步驟后，氣象圖片的分類顯示實現(xiàn)方法如下：

(1) 前臺頁面 前臺頁面利用JQuery的.getJSON(url,function callback(data))方法，通過HTTP GET向Servlet發(fā)出請求，請求載入JSON數(shù)據(jù)。

function changeDataType(datetype)

{ var htmlx=″″;

var url = ″/view/servlet/ViewImage?dataTypeSelect=″+datetype;

//發(fā)送的url地址以及所傳遞的參數(shù)；

url = encodeURI(encodeURI(url));

＄.getJSON(url,function(s){

//function回調(diào)函數(shù)處理返回的JSON數(shù)據(jù)，將JSON數(shù)據(jù)讀取

//出來進行處理；

for(var i=0;i

{ if(i==0) { htmlx += ″″; }

else { htmlx +=″″; }

//動態(tài)加載時效類表}

＄(″#hourSelect″).html(htmlx);

var sel1=document.getElementById(″hourSelect″);

var tex1=sel1.options[sel1.selectedIndex].value;

changeHourType(tex1);

//調(diào)用函數(shù)在圖片區(qū)顯示最新圖片；

});}

(2) Servlet處理用戶發(fā)送的請求，并返回JSON格式的數(shù)據(jù)結(jié)果。

Servlet中通過HttpResponse的方式獲得請求，調(diào)用文件處理類GetImagepath.java處理請求的數(shù)據(jù)，GetImagepath.java將處理結(jié)果返回給Servlet，Servlet將時效類型所對應(yīng)的最新圖片封裝成JSON格式用Response輸出流的方式返回給請求頁面，請求頁面將JSON數(shù)據(jù)讀取出來，將最新圖片呈獻給用戶。

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

List l = FileUtil.getElements(id);

GetImagepath getImagepath=new GetImagepath();

//調(diào)用文件處理類;

List> ml = getImagepath.getPath(id, l);

String json =″{″;

json += ″″datas″:[″;

for (Map map : ml) {

json += ″{″key″:″ +″″″+ map.get(″type″) + ″ ″,″ + ″″src″:″ +″″″+ map.get(″src″) + ″ ″″ +″}, ″;}

//封裝JSON類型數(shù)據(jù)格式;

json = json.substring(0, json.length() - 2);

json += ″]}″;

OutputStream os = response.getOutputStream();

os.write(json.getBytes(″UTF-8″));

}

(3) 文件處理類 該類根據(jù)文件名的不同一次性檢索出資料類型下所有時效類型所對應(yīng)的最新圖片，將檢索結(jié)果傳遞給Servlet進行封裝。主要代碼如下：

public class GetImagepath {

public List> getPath(String str1, List list2) {List> mapList = new ArrayList>();

for (String str2 : list2) {

//將同一時效類型圖片檢索出來；

File tartmpFile = new File(path);

File[] fileTxt = (tartmpFile.listFiles());

for (int j = 0; j < fileTxt.length; j++) {if (fileTxt[j].isFile()) {

if (fileTxt[j].getName().endsWith(endName)) {

String e = path + File.separator + fileTxt[j].getName();

imgPath.add(e);}}}

Collections.sort(imgPath, new Comparator() {

public int compare(String s1, String s2) {

File f1 = new File(s1);

File f2 = new File(s2);

return (int) (f2.lastModified() - f1.lastModified());}

});

//根據(jù)文件的修改時間對同一類時效下的圖片進行排序；

Map imgMap = new HashMap();

//每一種時效類型所對應(yīng)的最新圖片封裝成Map類型；

if (imgPath.size() != 0) {

String repath = imgPath.get(0);

File f = new File(repath);

imgMap.put(″type″, str2);

imgMap.put(″src″, f.getName());}

else {

imgMap.put(″type″, str2);

imgMap.put(″src″,″xxxx″);}

mapList.add(m); }

//將Map類型數(shù)據(jù)作為List數(shù)據(jù)元素；

return ml;}}

2.3圖片顯示效果

以上敘述是以集合預(yù)報圖顯示為例介紹的，利用以上所介紹的處理方法，本文還實現(xiàn)了數(shù)值預(yù)報圖、粗網(wǎng)格要素圖、細網(wǎng)格要素圖等不同類型的圖片的顯示，顯示效果如圖1-圖3所示。

圖1　集合預(yù)報資料顯示圖

圖2　數(shù)值預(yù)報資料顯示圖

圖3　細網(wǎng)格要素圖

圖中，第一個列表中包含了集合預(yù)報下的所有資料類型，點擊某一種資料類型，在“預(yù)報時效”的列表中列出該種資料類型下的不同時效的圖片類型，點擊某一種時效類型，在右區(qū)域快速動態(tài)加載出該時效類型下的資料圖片。達到圖片顯示效果。

本文在利用JQuery Ajax 異步處理JSON數(shù)據(jù)技術(shù)實現(xiàn)氣象圖片顯示的過程中，當瀏覽器響應(yīng)用戶的請求時，不用刷新整個頁面，只加載了一個圖片顯示區(qū)就達到顯示該預(yù)報時效下的最

新圖片的效果，這樣大大提高了瀏覽器端的顯示速度，提高了用戶操作舒適度。

3結(jié)語

本文結(jié)合JSON數(shù)據(jù)傳輸格式和Jquery技術(shù)，利用Ajax異步交互技術(shù)成功實現(xiàn)了氣象圖片的分類顯示效果。Web開發(fā)變得更容易、更有效率，Ajax+JSON+Jquery這種開發(fā)方法在B/S模式的系統(tǒng)開發(fā)中具有一定的優(yōu)越性。

參考文獻

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

[2] 王濤.山西省氣象信息處理分析監(jiān)控系統(tǒng)設(shè)計與實現(xiàn)[D].山西:電子科技大學,2012.

[3] 高靜,段會川.JSON數(shù)據(jù)傳輸效率研究[J].計算機工程與設(shè)計,2011,32(7):2267-2268.

[4] 呂林濤,萬經(jīng)華,周紅芳.基于AJAX的Web無刷新頁面快速更新數(shù)據(jù)方法[J].計算機應(yīng)用研究,2006,23(11):199-200.

[5] 蔣維.Ajax技術(shù)在網(wǎng)絡(luò)B/S架構(gòu)中的應(yīng)用研究[J].微計算機應(yīng)用,2008,29(7):29-30.

[6] 胡振華,周斌,冷文浩.AJAX在J2EE中數(shù)據(jù)交互的應(yīng)用研究[J].計算機工程與設(shè)計,2008,29(12):3102-3104.

[7] 屈展,李嬋.JSON在Ajax數(shù)據(jù)交換中的應(yīng)用研究[J].西安石油大學學報,2011,26(1):95-98.

[8] 胡文發(fā),白中英.基于J2ME/J2EE的JSON數(shù)據(jù)交換的探討[J].電子設(shè)計工程,2009,17(12):102-103.

[9] 裴生雷.Ajax+JSP開發(fā)模式的研究及應(yīng)用[J].計算機技術(shù)與發(fā)展,2013,23(1):243-244.

[10] 李志秀,張軍,陳光.JQueryAjax異步處理JSON數(shù)據(jù)在項目管理系統(tǒng)中的應(yīng)用[J].云南大學學報,2011,33(S2):247-250.

ACHIEVING METEOROLOGICAL PICTURES DISPLAY BY ASYNCHRONOUSLY PROCESSING JSON DATA WITH JQUERY AJAX

Guo QingyanZhang MinYang Xiandong

(Meteorological Information Center of Fujian Province,Fuzhou 350001,Fujian,China)

AbstractMeteorological data is complex and diverse, how to quickly display the images of meteorological data online is one of the important jobs for meteorological development workers. In response to this demand, the paper presents the realisation of the classification display effect of meteorological pictures in the circumstance of without page refreshing. The webpage in foreground sends a request to the Servlet of background through Ajax, and the background Servlet returns the JSON format data back to the requesting page after processing the user request, and the requesting page processes the returned JSON format data with Jquery and then presents the result to users. Experimental results show that the use of such method asynchronously processing JSON data with JQuery Ajax well realises the access of webpages to the background data without refreshing, and achieves the results of classification display of meteorological images.

KeywordsAjaxJQueryJSONImage classification display

收稿日期：2014-09-28。福建省氣象局開放式氣象科學研究基金項目(2010K03)。郭慶燕，碩士，主研領(lǐng)域：計算機應(yīng)用。張敏，高工。楊賢棟，工程師。

中圖分類號TP3

文獻標識碼A

DOI:10.3969/j.issn.1000-386x.2016.06.005