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

郭慶燕　張　敏　楊賢棟

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

?

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

郭慶燕張敏楊賢棟

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

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

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

0引言

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2圖片顯示過程

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

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

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

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

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

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

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

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

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

(1) 前臺(tái)頁(yè)面 前臺(tái)頁(yè)面利用JQuery的.getJSON(url,function callback(data))方法，通過HTTP GET向Servlet發(fā)出請(qǐng)求，請(qǐng)求載入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ù)讀取

//出來進(jìn)行處理；

for(var i=0;i

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

else { htmlx +=″″; }

//動(dòng)態(tài)加載時(shí)效類表}

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

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

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

changeHourType(tex1);

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

});}

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

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

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ù)文件名的不同一次性檢索出資料類型下所有時(shí)效類型所對(duì)應(yīng)的最新圖片，將檢索結(jié)果傳遞給Servlet進(jìn)行封裝。主要代碼如下：

public class GetImagepath {

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

for (String str2 : list2) {

//將同一時(shí)效類型圖片檢索出來；

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ù)文件的修改時(shí)間對(duì)同一類時(shí)效下的圖片進(jìn)行排序；

Map imgMap = new HashMap();

//每一種時(shí)效類型所對(duì)應(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ù)作為L(zhǎng)ist數(shù)據(jù)元素；

return ml;}}

2.3圖片顯示效果

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

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

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

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

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

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

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

3結(jié)語

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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

[10] 李志秀,張軍,陳光.JQueryAjax異步處理JSON數(shù)據(jù)在項(xiàng)目管理系統(tǒng)中的應(yīng)用[J].云南大學(xué)學(xué)報(bào),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。福建省氣象局開放式氣象科學(xué)研究基金項(xiàng)目(2010K03)。郭慶燕，碩士，主研領(lǐng)域：計(jì)算機(jī)應(yīng)用。張敏，高工。楊賢棟，工程師。

中圖分類號(hào)TP3

文獻(xiàn)標(biāo)識(shí)碼A

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