JQuery Ajax異步處理JSON數據實現氣象圖片的顯示

郭慶燕　張　敏　楊賢棟

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

?

JQuery Ajax異步處理JSON數據實現氣象圖片的顯示

郭慶燕張敏楊賢棟

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

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

關鍵詞AjaxJQueryJSON圖片分類顯示

0引言

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

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

1Ajax、JQuery和JSON技術的簡單介紹

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

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

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

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

2氣象圖片顯示的實現方法

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

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

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

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

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

2.2圖片顯示過程

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

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

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

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

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

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

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

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

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

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

function changeDataType(datetype)

{ var htmlx=″″;

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

//發送的url地址以及所傳遞的參數；

url = encodeURI(encodeURI(url));

＄.getJSON(url,function(s){

//function回調函數處理返回的JSON數據，將JSON數據讀取

//出來進行處理；

for(var i=0;i

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

else { htmlx +=″″; }

//動態加載時效類表}

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

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

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

changeHourType(tex1);

//調用函數在圖片區顯示最新圖片；

});}

(2) Servlet處理用戶發送的請求，并返回JSON格式的數據結果。

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

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

List l = FileUtil.getElements(id);

GetImagepath getImagepath=new GetImagepath();

//調用文件處理類;

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

String json =″{″;

json += ″″datas″:[″;

for (Map map : ml) {

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

//封裝JSON類型數據格式;

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

json += ″]}″;

OutputStream os = response.getOutputStream();

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

}

(3) 文件處理類 該類根據文件名的不同一次性檢索出資料類型下所有時效類型所對應的最新圖片，將檢索結果傳遞給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());}

});

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

Map imgMap = new HashMap();

//每一種時效類型所對應的最新圖片封裝成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類型數據作為List數據元素；

return ml;}}

2.3圖片顯示效果

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

圖1　集合預報資料顯示圖

圖2　數值預報資料顯示圖

圖3　細網格要素圖

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

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

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

3結語

本文結合JSON數據傳輸格式和Jquery技術，利用Ajax異步交互技術成功實現了氣象圖片的分類顯示效果。Web開發變得更容易、更有效率，Ajax+JSON+Jquery這種開發方法在B/S模式的系統開發中具有一定的優越性。

參考文獻

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

[2] 王濤.山西省氣象信息處理分析監控系統設計與實現[D].山西:電子科技大學,2012.

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

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

[5] 蔣維.Ajax技術在網絡B/S架構中的應用研究[J].微計算機應用,2008,29(7):29-30.

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

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

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

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

[10] 李志秀,張軍,陳光.JQueryAjax異步處理JSON數據在項目管理系統中的應用[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)。郭慶燕，碩士，主研領域：計算機應用。張敏，高工。楊賢棟，工程師。

中圖分類號TP3

文獻標識碼A

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