潘 杰, 周傳生

(沈陽師范大學(xué) 科信軟件學(xué)院, 沈陽 110034)

?

基于jQuery框架的Web研究與實(shí)現(xiàn)

潘 杰, 周傳生

(沈陽師范大學(xué) 科信軟件學(xué)院, 沈陽 110034)

傳統(tǒng)的Web應(yīng)用解決方案將所有的操作集成在服務(wù)器端進(jìn)行,客戶端所做的工作只是簡(jiǎn)單的顯示網(wǎng)頁。Ajax的出現(xiàn)改變了傳統(tǒng)Web開發(fā)的模式,通過異步方式的數(shù)據(jù)傳輸實(shí)現(xiàn)Web服務(wù)的有效性和獨(dú)立性,將之前的單擊顯示頁面式的體驗(yàn)變成具有交互性、靈活性的桌面應(yīng)用程序體驗(yàn)。基于Ajax技術(shù)的Web程序開發(fā)和應(yīng)用不僅對(duì)瀏覽器兼容性差,而且采用傳統(tǒng)的XML進(jìn)行數(shù)據(jù)傳輸。XML數(shù)據(jù)格式在使用的過程中不僅會(huì)帶來很多數(shù)據(jù)冗余,而且還不容易對(duì)其解析。將XML和JSON進(jìn)行對(duì)比和分析,最終以JSON作為Ajax通信中的數(shù)據(jù)傳遞格式,并用jQuery中的方法來解析JSON數(shù)據(jù)與封裝Ajax異步請(qǐng)求。jQuery是一個(gè)優(yōu)秀、靈活多變的JavaScript框架,可以兼容CSS3和各種主流的瀏覽器,其模塊化的開發(fā)方式可以讓開發(fā)者按需加載資源。在分析了傳統(tǒng)的Web開發(fā)模式存在的問題后,提出了基于jQuery框架的Ajax異步請(qǐng)求,實(shí)現(xiàn)Web快速便捷開發(fā)與更優(yōu)化的用戶體驗(yàn)。

Ajax; jQuery框架; 異步交互; 用戶體驗(yàn)

隨著互聯(lián)網(wǎng)的迅速發(fā)展,Web頁面得到了廣泛應(yīng)用,但人們的需求已不僅限于頁面的功能,而更多地注重頁面展示形式和用戶體驗(yàn)度。傳統(tǒng)Web技術(shù)的同步請(qǐng)求-響應(yīng)系統(tǒng)架構(gòu)逐漸顯現(xiàn)出不足,其中最為突出的一點(diǎn)是每當(dāng)用戶發(fā)送請(qǐng)求時(shí)都要再次刷新頁面,給用戶帶來很多不便;服務(wù)器每次返回的頁面標(biāo)簽信息很多,給服務(wù)器帶來很大負(fù)擔(dān),不能很快地響應(yīng)用戶請(qǐng)求。Ajax技術(shù)可以挖掘并開發(fā)web瀏覽器的潛力,結(jié)合jQuery技術(shù)可以方便地為網(wǎng)站提供Ajax交互,從而改變傳統(tǒng)Web開發(fā)模式,提供全新的用戶體驗(yàn)[1]。

1 傳統(tǒng)的Web開發(fā)模式

在傳統(tǒng)的Web應(yīng)用的開發(fā)中,一般都是請(qǐng)求→刷新→顯示的模式。這種模式可以描述為每當(dāng)用戶單擊按鈕或鏈接事件時(shí)都會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求,而這些請(qǐng)求都要由服務(wù)器來處理,服務(wù)器將處理完成后的信息返回到瀏覽器,從而在瀏覽器端進(jìn)行顯示。但是在服務(wù)器處理請(qǐng)求的過程中,瀏覽器始終處于Loading狀態(tài),顯示為空白狀態(tài)或沒有響應(yīng)的狀態(tài),用戶在此期間只能等待。而實(shí)際上,用戶也許只想獲得關(guān)于一件商品的價(jià)格信息,這樣的請(qǐng)求很微小卻還要刷新整個(gè)頁面,以至于其他的圖片和數(shù)據(jù)也都被重新運(yùn)算和下載了。這不僅使網(wǎng)絡(luò)流量增加,也給服務(wù)器帶來一定程度的處理負(fù)擔(dān),從而使用戶體驗(yàn)的質(zhì)量大幅下降。目前,該問題基本得到了解決,除了更優(yōu)秀的程序設(shè)計(jì)、編碼優(yōu)化和調(diào)整服務(wù)器之外,還可以采用Ajax技術(shù)。

2 基于Ajax的Web應(yīng)用

網(wǎng)頁自動(dòng)刷新功能在Web網(wǎng)站上已經(jīng)屢見不鮮了,如即時(shí)新聞信息,股票信息等,都需要不斷地獲取最新的信息。Ajax技術(shù)的出現(xiàn)使頁面不用頻繁刷新,并逐漸代替了傳統(tǒng)的Web交互的方式,還通過隱藏的框架來完成異步提交[2]。它通過XMLHttpResqust讀取異步數(shù)據(jù),用XML和XSLT交換與處理數(shù)據(jù),并使用DOM來實(shí)現(xiàn)頁面的動(dòng)態(tài)顯示和交互[3-5],已經(jīng)成為Web開發(fā)領(lǐng)域的一個(gè)里程碑。

相對(duì)傳統(tǒng)的基于頁面導(dǎo)航的Web應(yīng)用程序,Ajax應(yīng)用程序通常是一個(gè)單頁面應(yīng)用程序,應(yīng)用程序利用GUI的事件和異步傳輸與Web服務(wù)器通信[6]。通過Ajax的核心對(duì)象XMLHttpRequest,web開發(fā)人員可以在應(yīng)用程序的任意一個(gè)地方初始化Http請(qǐng)求,并在不耽擱用戶時(shí)間的情況下處理響應(yīng)。只有確定了要從服務(wù)器端交換新數(shù)據(jù),并不更新其他數(shù)據(jù)才可以由Ajax引擎向服務(wù)器端提交訪問的請(qǐng)求,從而避免一些不必要的用戶請(qǐng)求,造成服務(wù)器處理負(fù)擔(dān)過大[7]。

Ajax技術(shù)的廣泛應(yīng)用,不僅在一定程度上促進(jìn)了頁面表現(xiàn)和頁面數(shù)據(jù)的分離,而且使Web應(yīng)用的交互特性、反應(yīng)的速度、柔性邁向了更高、更新的層次。但不同瀏覽器對(duì)Ajax的處理方式不一樣,所以實(shí)現(xiàn)Ajax請(qǐng)求時(shí),必須解決瀏覽器的兼容問題,這樣就加大了開發(fā)成本[8]。

3 基于jQuery框架在無刷新技術(shù)上的優(yōu)勢(shì)

jQuery是一個(gè)優(yōu)秀的JavaScript框架,強(qiáng)調(diào)的理念是寫得少,做得多[9],以其輕巧便捷與強(qiáng)大的功能受到越來越多的人追捧。jQuery獨(dú)特的選擇器、鏈?zhǔn)讲僮?、事件處理機(jī)制和封裝完善的Ajax都是其他JavaScript庫望塵莫及的。

jQuery可以很輕易地將結(jié)構(gòu)與行為分離,在頁面中只定義結(jié)構(gòu),里面沒有任何交互的邏輯,元素的交互行為都被定義在腳本文件里,正好體現(xiàn)了前端分層設(shè)計(jì)思想。

jQuery是一個(gè)輕量級(jí)的Ajax框架,相對(duì)于Ajax,在無刷新技術(shù)實(shí)現(xiàn)上引入 jQuery有很多優(yōu)勢(shì)。jQuery對(duì)Ajax操作進(jìn)行了良好的封裝,提供了一套完整的Ajax功能,使Ajax應(yīng)用開發(fā)過程簡(jiǎn)單化。jQuery兼容各種主流的瀏覽器,程序員不用像以前那樣花大量的精力去解決瀏覽器的兼容性問題。jQuery中方便、靈活的事件機(jī)制給無刷新頁面增加了友好的效果與交互體驗(yàn)[10]。

4 基于jQuery框架的Ajax異步請(qǐng)求設(shè)計(jì)與實(shí)現(xiàn)

4.1 設(shè)計(jì)思路與框架

圖1 使用jQuery與Ajax的四層框架結(jié)構(gòu)

使用jQuery框架設(shè)計(jì)Ajax異步請(qǐng)求,動(dòng)態(tài)生成功能按鈕與業(yè)務(wù)表單?？傮w設(shè)計(jì)包括頁面設(shè)計(jì)、前臺(tái)邏輯設(shè)計(jì)、業(yè)務(wù)邏輯管理設(shè)計(jì)和數(shù)據(jù)庫設(shè)計(jì),每個(gè)層次之間相對(duì)獨(dú)立[11]。其中頁面設(shè)計(jì)包括基于Web標(biāo)準(zhǔn)的XHTML和層疊樣式表CSS,并結(jié)合bootstrap實(shí)現(xiàn)響應(yīng)式布局,使用jQuery對(duì)象的底層$.ajax()方法對(duì)DOM封裝與交互,并使用jQuery的append()方法實(shí)現(xiàn)頁面的動(dòng)態(tài)顯示;業(yè)務(wù)邏輯管理器用python實(shí)現(xiàn)業(yè)務(wù)邏輯的操作;最底層用MySQL設(shè)計(jì)數(shù)據(jù)庫,實(shí)現(xiàn)數(shù)據(jù)存取功能。

4.2 JSON數(shù)據(jù)交換技術(shù)

在異步應(yīng)用程序中發(fā)送和接收信息時(shí),XML和JSON成為主要的數(shù)據(jù)交換格式。XML即可擴(kuò)展標(biāo)記語言,允許通過使用自定義格式標(biāo)記、交換和處理數(shù)據(jù),有助于在客戶端與服務(wù)器之間傳輸結(jié)構(gòu)化數(shù)據(jù)[12]。但是,近年來Ajax技術(shù)的出現(xiàn)影響了應(yīng)用程序架構(gòu),將XML與Ajax技術(shù)結(jié)合之后會(huì)產(chǎn)生一些難以解決的問題,如安全方面和傳輸效率方面等。

圖2 JSON—種雙向往返的數(shù)據(jù)交換格式

為了解決這些問題,本文將采用一種XML的替代數(shù)據(jù)格式JSON。JSON是一個(gè)輕量級(jí)的數(shù)據(jù)交換格式,各種不同的服務(wù)器端技術(shù)以及JavaScript技術(shù)本身都可以很容易和輕松地解析JSON。作為一個(gè)完整的數(shù)據(jù)交換格式,它可以在活對(duì)象(存在于內(nèi)存中并能與程序中其他對(duì)象互通消息的對(duì)象,而對(duì)象在序列化或轉(zhuǎn)換數(shù)據(jù)交換格式之后,獨(dú)立于程序而存在,也不可能接受其他對(duì)象發(fā)送的消息,自然就不是“活”的了。)和用于交換的格式之間進(jìn)行雙向轉(zhuǎn)義。

JSON對(duì)象是一個(gè)沒有規(guī)則的“名稱/值”對(duì)集合。每個(gè)對(duì)象都以“{”開始,“}”結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”;名稱和值對(duì)之間用“,”分隔。數(shù)組是“值”的有序的集合。每個(gè)數(shù)組都以“[”開始,以“]”結(jié)束。值與值之間用“,”來分隔。值,也就是value可以是雙引號(hào)括起來的字符串(string)、數(shù)值(number)、true、false、null、對(duì)象(object)或者數(shù)組(array)[13],而且這些結(jié)構(gòu)可以互相嵌套。它可以屏蔽DOM解析XML文件的復(fù)雜性及兼容性等問題,大大提高數(shù)據(jù)解析速度?；谝陨咸攸c(diǎn),在此用易于解析的JSON來進(jìn)行客戶端與服務(wù)器端之間的數(shù)據(jù)交換。

4.3 創(chuàng)建Ajax引擎

Ajax引擎實(shí)際上只是一個(gè)用javascript編寫的函數(shù),只有從服務(wù)器上獲取信息的時(shí)候才調(diào)用它[14]。為了實(shí)現(xiàn)無刷新,用jQuery框架來簡(jiǎn)化Ajax引擎的開發(fā)。在jQuery中,除了可以使用全局性用函數(shù)load()、get()、post()實(shí)現(xiàn)頁面的異步調(diào)用和服務(wù)器的交互數(shù)據(jù)外,還有一個(gè)功能更強(qiáng)悍的最底層的方法$.ajax(),該方法不僅可以方便的實(shí)現(xiàn)上述3個(gè)全局函數(shù)完成的功能,還更多的關(guān)注實(shí)現(xiàn)過程中的細(xì)節(jié)[15]。

語法格式為:$.ajax([options])

其中可選參數(shù)[options]為$.ajax()方法中的請(qǐng)求設(shè)置,格式為key/value,既包含發(fā)送請(qǐng)求的參數(shù),也包含服務(wù)器響應(yīng)后回調(diào)的數(shù)據(jù)。請(qǐng)求部分代碼如下:

Function getAjax(url,data,type,dataType,successfn,errorfn){

……∥ajax封裝

};

這是一種通用的ajax()請(qǐng)求方法,它接受一個(gè)JSON對(duì)象,所有的配置項(xiàng)都是在事件觸發(fā)時(shí)傳過來的。其中url配置為發(fā)送到服務(wù)器的請(qǐng)求地址,data配置為發(fā)送到服務(wù)器的數(shù)據(jù),該數(shù)據(jù)用JSON封裝,type配置為請(qǐng)求方式(“POST”或“GET”),默認(rèn)為“GET”,dataType指定服務(wù)器返回的數(shù)據(jù)類型,常用的如:xml、html、json、text,successfn指定成功回調(diào)函數(shù),errorfn指定失敗的回調(diào)函數(shù)。

4.4 服務(wù)器請(qǐng)求處理

在服務(wù)器端的代碼中,用業(yè)務(wù)管理器management()得到在請(qǐng)求中發(fā)送的數(shù)據(jù),根據(jù)功能編號(hào)查找配置文件獲取數(shù)據(jù)的配置信息,然后通過調(diào)用存儲(chǔ)過程完成數(shù)據(jù)操作,最后將響應(yīng)數(shù)據(jù)返回給前臺(tái)頁面。

4.5 響應(yīng)回調(diào)函數(shù)

Ajax引擎得到服務(wù)器響應(yīng)成功返回的數(shù)據(jù)后,調(diào)用回調(diào)函數(shù)successfn()進(jìn)行回調(diào)處理。響應(yīng)部分代碼如下:

function successfnBtn(datasource){

……

∥動(dòng)態(tài)生成按鈕

$(“#btnheader”).append(

“

onclick=‘“+btnObj.buttonevent+”’>

”);

∥動(dòng)態(tài)加載固化模板

$(‘#grid’).load(‘a(chǎn)caYear.html’);

……

}

在執(zhí)行回調(diào)函數(shù)時(shí),其中的參數(shù)用來接收從服務(wù)器端返回的數(shù)據(jù),Ajax引擎獲得響應(yīng)數(shù)據(jù),然后使用jQuery中的append()來操作DOM動(dòng)態(tài)添加功能按鈕并及時(shí)反映新的表單內(nèi)容,并使用bootstrap設(shè)置樣式。功能按鈕不僅有約束限制,還綁定了特定的事件,這些信息是在配置文件里預(yù)先定義好的,并且封裝在響應(yīng)數(shù)據(jù)里。需要強(qiáng)調(diào)的是jQuery提供了load()方法,可以加載固化模板,在一定程度上能夠使數(shù)據(jù)與表現(xiàn)分離,用戶通過點(diǎn)擊按鈕可以輕松地對(duì)表單進(jìn)行操作。

圖3 動(dòng)態(tài)加載功能按鈕與業(yè)務(wù)表單

本文使用jQuery這一輕量級(jí)JavaScript框架大大簡(jiǎn)化了Ajax應(yīng)用的Web開發(fā)的過程,既解決了瀏覽器兼容問題,又提高了頁面加載速度,同時(shí)改善了傳統(tǒng)Web開發(fā)在這方面的不足,實(shí)現(xiàn)了Web快速便捷開發(fā)和優(yōu)化了用戶使用體驗(yàn)。

[1]李志義,義梅練.基于用戶體驗(yàn)的網(wǎng)站優(yōu)化研究綜述[J].情報(bào)科學(xué), 2013,31(11):150-154.

[2]于虹.Ajax無刷新技術(shù)[J].電腦知識(shí)與技術(shù), 2009,5(17):4782-4784.

[3]仰燕蘭,金曉雪,葉樺.ASP.NET AJAX框架研究及其在Web開發(fā)中的應(yīng)用[J].計(jì)算機(jī)應(yīng)用與軟件, 2011,28(6):195-198.

[4]田原.基于AJAX的教學(xué)Web應(yīng)用[J].遼寧工程技術(shù)大學(xué)學(xué)報(bào), 2007,26(5):737-739.

[5]陸海晶,劉萬軍.基于Ajax的Web應(yīng)用技術(shù)的研究與實(shí)現(xiàn)[J].科學(xué)技術(shù)與工程, 2007,7(3):415-418.

[6]MARCHETTO A,TONELLA P,RUCCA F.Re Ajax:reverse engineering tool for Ajax Web applications[J].IET Software, 2012,6(1):33-49.

[7]熊文,熊淑華,孫旭,等.Ajax技術(shù)在Web2.0網(wǎng)站設(shè)計(jì)中的應(yīng)用研究[J].計(jì)算機(jī)技術(shù)與發(fā)展, 2012,22(3):145-148.

[8]施俊.基于Struts2+jQuery+JSON實(shí)現(xiàn)Ajax數(shù)據(jù)顯示[J].電腦知識(shí)與技術(shù), 2014,10(26):6090-6092.

[9]單東林.鋒利的jQuery[M].北京:人民郵電出版社, 2009:4-5.

[10]尹婷,趙思佳.基于jQuery框架的AJAX網(wǎng)站設(shè)計(jì)模式的研究[J].湖南環(huán)境生物職業(yè)技術(shù)學(xué)院學(xué)報(bào), 2010,16(3):1-4.

[11]高鵬,徐小力,吳國(guó)新,等.基于Ajax的四層架構(gòu)遠(yuǎn)程監(jiān)測(cè)系統(tǒng)設(shè)計(jì)[J].計(jì)算機(jī)工程與設(shè)計(jì), 2014,35(2):695-699.

[12]王前,鄒霞.XML數(shù)據(jù)交換技術(shù)在電子監(jiān)察系統(tǒng)中的應(yīng)用[J].沈陽師范大學(xué)學(xué)報(bào):自然科學(xué)版, 2007,25(3):345-348.

[13]谷方舟,沈波.JSON數(shù)據(jù)交換格式在異構(gòu)系統(tǒng)集成中的應(yīng)用研究[J].鐵路計(jì)算機(jī)應(yīng)用, 2012,21(2):1-4.

[14]方俊.Ajax引擎的設(shè)計(jì)和應(yīng)用[J].電腦與信息技術(shù), 2006,14(3):25-29.

[15]高波,戴連榮.基于動(dòng)態(tài)HTML的科研檔案管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].遼寧師范大學(xué)學(xué)報(bào):自然科學(xué)版, 2000,23(4):373-377.

Research and implementation of Web based on jQuery framework

PANJie,ZHOUChuansheng

(Software College, Shenyang Normal University, Shenyang 110034, China)

Traditional Web application solutions integrate all operations performed on the server side, while the work done by the client simply displays the webpage.Ajax has changed the traditional Web development model.It realizes the effectiveness and independence of Web services through Asynchronous data transfer, making the transition from the previous experience of Clicking to show the style to the experience of interactive, flexible desktop application.Web application development based on Ajax technology not only is poor for browser compatibility but also uses the traditional XML data format.This kind of data format will not only generate large amounts of data redundancy, but also exist the issues of Complex data analysis.By comparing XML with JSON, this paper chooses JSON as the data transmission format in Ajax, and uses jQuery to parse JSON data and package Ajax asynchronous request.jQuery is an excellent, flexible javascript framework and compatible with CSS3 and various browsers.Its modular development approach allows developers to load resources on demand.After analyzing the traditional problems of Web development model, this article proposes Ajax asynchronous request based on jQuery framework to achieve quick and easy Web development and more optimal user experience.

Ajax;jQuery framework;asynchronous interaction;user experience

2014-11-12。

遼寧省高等學(xué)校本科專業(yè)設(shè)置預(yù)測(cè)系統(tǒng)研究項(xiàng)目(遼教函[1008]225號(hào))。

潘 杰(1987-),女,河北秦皇島人,沈陽師范大學(xué)碩士研究生; 周傳生(1966-),男,安徽霍邱人,沈陽師范大學(xué)教授,碩士研究生導(dǎo)師。

1673-5862(2015)01-0096-04

TP311

A

10.3969/ j.issn.1673-5862.2015.01.021