基于jQuery框架的Web研究與實現

潘 杰, 周傳生

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

?

基于jQuery框架的Web研究與實現

潘 杰, 周傳生

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

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

Ajax; jQuery框架; 異步交互; 用戶體驗

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

1 傳統的Web開發模式

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

2 基于Ajax的Web應用

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

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

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

3 基于jQuery框架在無刷新技術上的優勢

jQuery是一個優秀的JavaScript框架,強調的理念是寫得少,做得多[9],以其輕巧便捷與強大的功能受到越來越多的人追捧。jQuery獨特的選擇器、鏈式操作、事件處理機制和封裝完善的Ajax都是其他JavaScript庫望塵莫及的。

jQuery可以很輕易地將結構與行為分離,在頁面中只定義結構,里面沒有任何交互的邏輯,元素的交互行為都被定義在腳本文件里,正好體現了前端分層設計思想。

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

4 基于jQuery框架的Ajax異步請求設計與實現

4.1 設計思路與框架

圖1 使用jQuery與Ajax的四層框架結構

使用jQuery框架設計Ajax異步請求,動態生成功能按鈕與業務表單。總體設計包括頁面設計、前臺邏輯設計、業務邏輯管理設計和數據庫設計,每個層次之間相對獨立[11]。其中頁面設計包括基于Web標準的XHTML和層疊樣式表CSS,并結合bootstrap實現響應式布局,使用jQuery對象的底層$.ajax()方法對DOM封裝與交互,并使用jQuery的append()方法實現頁面的動態顯示;業務邏輯管理器用python實現業務邏輯的操作;最底層用MySQL設計數據庫,實現數據存取功能。

4.2 JSON數據交換技術

在異步應用程序中發送和接收信息時,XML和JSON成為主要的數據交換格式。XML即可擴展標記語言,允許通過使用自定義格式標記、交換和處理數據,有助于在客戶端與服務器之間傳輸結構化數據[12]。但是,近年來Ajax技術的出現影響了應用程序架構,將XML與Ajax技術結合之后會產生一些難以解決的問題,如安全方面和傳輸效率方面等。

圖2 JSON—種雙向往返的數據交換格式

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

JSON對象是一個沒有規則的“名稱/值”對集合。每個對象都以“{”開始,“}”結束。每個“名稱”后跟一個“:”;名稱和值對之間用“,”分隔。數組是“值”的有序的集合。每個數組都以“[”開始,以“]”結束。值與值之間用“,”來分隔。值,也就是value可以是雙引號括起來的字符串(string)、數值(number)、true、false、null、對象(object)或者數組(array)[13],而且這些結構可以互相嵌套。它可以屏蔽DOM解析XML文件的復雜性及兼容性等問題,大大提高數據解析速度。基于以上特點,在此用易于解析的JSON來進行客戶端與服務器端之間的數據交換。

4.3 創建Ajax引擎

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

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

其中可選參數[options]為$.ajax()方法中的請求設置,格式為key/value,既包含發送請求的參數,也包含服務器響應后回調的數據。請求部分代碼如下:

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

……∥ajax封裝

};

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

4.4 服務器請求處理

在服務器端的代碼中,用業務管理器management()得到在請求中發送的數據,根據功能編號查找配置文件獲取數據的配置信息,然后通過調用存儲過程完成數據操作,最后將響應數據返回給前臺頁面。

4.5 響應回調函數

Ajax引擎得到服務器響應成功返回的數據后,調用回調函數successfn()進行回調處理。響應部分代碼如下:

function successfnBtn(datasource){

……

∥動態生成按鈕

$(“#btnheader”).append(

“

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

”);

∥動態加載固化模板

$(‘#grid’).load(‘acaYear.html’);

……

}

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

圖3 動態加載功能按鈕與業務表單

本文使用jQuery這一輕量級JavaScript框架大大簡化了Ajax應用的Web開發的過程,既解決了瀏覽器兼容問題,又提高了頁面加載速度,同時改善了傳統Web開發在這方面的不足,實現了Web快速便捷開發和優化了用戶使用體驗。

[1]李志義,義梅練.基于用戶體驗的網站優化研究綜述[J].情報科學, 2013,31(11):150-154.

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

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

[4]田原.基于AJAX的教學Web應用[J].遼寧工程技術大學學報, 2007,26(5):737-739.

[5]陸海晶,劉萬軍.基于Ajax的Web應用技術的研究與實現[J].科學技術與工程, 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技術在Web2.0網站設計中的應用研究[J].計算機技術與發展, 2012,22(3):145-148.

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

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

[10]尹婷,趙思佳.基于jQuery框架的AJAX網站設計模式的研究[J].湖南環境生物職業技術學院學報, 2010,16(3):1-4.

[11]高鵬,徐小力,吳國新,等.基于Ajax的四層架構遠程監測系統設計[J].計算機工程與設計, 2014,35(2):695-699.

[12]王前,鄒霞.XML數據交換技術在電子監察系統中的應用[J].沈陽師范大學學報:自然科學版, 2007,25(3):345-348.

[13]谷方舟,沈波.JSON數據交換格式在異構系統集成中的應用研究[J].鐵路計算機應用, 2012,21(2):1-4.

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

[15]高波,戴連榮.基于動態HTML的科研檔案管理系統的設計與實現[J].遼寧師范大學學報:自然科學版, 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。

遼寧省高等學校本科專業設置預測系統研究項目(遼教函[1008]225號)。

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

1673-5862(2015)01-0096-04

TP311

A

10.3969/ j.issn.1673-5862.2015.01.021