南京軍區(qū)南京總醫(yī)院博士后工作站 田 軍

1.引言

近年來，隨著互聯(lián)網(wǎng)的普及和應(yīng)用，Web應(yīng)用在我們的生活中隨處可見，從我們?nèi)粘g覽的門戶網(wǎng)站、微博，到企事業(yè)OA辦公系統(tǒng)、客戶關(guān)系管理系統(tǒng)等信息化辦公平臺，越來越多的應(yīng)用依托Web平臺，使得過去操作系統(tǒng)的兼容性等問題不再成為信息系統(tǒng)安裝和使用的瓶頸，Web應(yīng)用逐漸滲透到我們生活的每一個(gè)角落。

2.用戶體驗(yàn)對于Web應(yīng)用的重要性

對于任何一款Web系統(tǒng)來說，用戶體驗(yàn)比其他任何一個(gè)方面都顯得更加重要。對于大多數(shù)用戶來說，不管訪問的是什么類型的Web系統(tǒng)，它都是一個(gè)“自助式”的產(chǎn)品。沒有可以事先閱讀的說明書，沒有任何操作培訓(xùn)或討論會。用戶所能依靠的只有自己的智慧和經(jīng)驗(yàn)，來獨(dú)自面對這個(gè)系統(tǒng)，如果沒有很好的用戶體驗(yàn)，也許用戶只會成會匆匆的過客。因此，只有提供優(yōu)質(zhì)的用戶體驗(yàn)才能夠真正保持Web系統(tǒng)的持久競爭力。

3.jQuery簡介

為了在前端得到更好的用戶體驗(yàn)，減輕服務(wù)器端的負(fù)載壓力，越來越多的javascript框架被應(yīng)用到Web開發(fā)中。jQuery是繼prototype之后又一個(gè)優(yōu)秀的javascript框架。它是輕量級的js庫(壓縮后只有21k)，兼容CSS3，還兼容各種瀏覽器（IE 6.0+，F(xiàn)F 1.5+，Safari 2.0+，Opera 9.0+）。這些特點(diǎn)使得開發(fā)者不需要關(guān)注瀏覽器的兼容性，而把更多的精力投入到業(yè)務(wù)邏輯和用戶體驗(yàn)的實(shí)現(xiàn)上。jQuery的語法設(shè)計(jì)可以使開發(fā)者更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。早在jQuery誕生之初，其核心理念就是write less，do more，讓開發(fā)人員通過較少的代碼實(shí)現(xiàn)更豐富的功能。

4.Web開發(fā)中常用的jQuery應(yīng)用

4.1 jQuery環(huán)境的搭建

在Web開發(fā)中應(yīng)用jQuery非常簡便。jQuery庫是一個(gè)單獨(dú)的javascript文件，可以保存到本地或者服務(wù)器直接引用，也可以從多個(gè)公共服務(wù)器中選擇引用。

jQuery目前最新的版本是1.8.2（截止2012年10月），引用的語法則和引用js文件一樣，通常如下：

4.2 jQuery讓AJAX變得簡單

AJAX即“Asynchronous JavaScript and XML”（異步JavaScript和XML)，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過AJAX，可使用XMLHttpRequest對象來直接與服務(wù)器進(jìn)行通信。通過這個(gè)對象，可在不重載頁面的情況與Web服務(wù)器交換數(shù)據(jù)，從而做到了頁面的局部刷新。

正因?yàn)锳JAX技術(shù)的出現(xiàn)和成熟，使得Web應(yīng)用和桌面應(yīng)用程序的距離越來越近。頁面不再會不停刷屏甚至白屏，帶給用戶更好的操作體驗(yàn)。在網(wǎng)頁中合理地使用AJAX可以使Web應(yīng)用煥然一新。AJAX技術(shù)的應(yīng)用，促進(jìn)了頁面表現(xiàn)和數(shù)據(jù)的分離，使Web應(yīng)用的交互性、反應(yīng)速度、柔性提高到了一個(gè)新的層次。

在jQuery框架中，AJAX是應(yīng)用最為廣泛的技術(shù)。使用jQuery使AJAX變得極其簡單，通過$get(url，data，callback，type)方法就可以實(shí)現(xiàn)異步操作，其中url是異步請求的頁面(可以是.ashx文件)，data是參數(shù)，callback是回調(diào)函數(shù)，而type是返回?cái)?shù)據(jù)的類型.type有xml，html，json，text等。

當(dāng)然，我們也可以使用$.ajax()函數(shù)編寫一些復(fù)雜的Ajax腳本，使用方法如下所示，當(dāng)success回調(diào)函數(shù)返回XML文檔后，我們使用jQuery檢索這個(gè)XML文檔，其方式與檢索HTML文檔是一樣的。這樣使得處理XML文檔變得相當(dāng)?shù)厝菀祝⑶野褍?nèi)容和數(shù)據(jù)集成到了Web站點(diǎn)里面。

$.ajax({

url：'document.xml',

type：'GET',

dataType：'xml',

timeout：1000,

error：function(){

alert('Error loading XML document');

},

success：function(xml){

// do something with xml

}

});

4.3 使用簡單的語法為html提供動態(tài)特效

jQuery可以用來處理基本的動畫和顯示效果。animate() 函數(shù)是動畫代碼的核心，它用于更改任何隨時(shí)間變化的數(shù)值型的CSS樣式值。比方說，您可以變化高度、寬度、不透明度和位置。還可以指定動畫的速度，定為毫秒或者預(yù)定義的速度：慢速，中速或快速。同時(shí)，jQuery還提供了一組方法，用以實(shí)現(xiàn)網(wǎng)頁對象的動態(tài)特效，如常用的show()和hide()方法，實(shí)現(xiàn)一個(gè)jQuery對象的漸入和淡出。函數(shù)接受的參數(shù)除了快慢等，還可以接收整型，作為漸入或淡出的完成時(shí)間，單位為ms。

4.4 豐富的插件機(jī)制為Web應(yīng)用提供了強(qiáng)大的擴(kuò)展性和高體驗(yàn)性

jQuery的另一大特點(diǎn)是開源，目前jQuery的官方插件是jQuery UI。開發(fā)者可以任意擴(kuò)展jQuery的函數(shù)庫或者按照自己的需求開發(fā)UI組件。目前網(wǎng)上已經(jīng)有數(shù)以千計(jì)的jQuery插件，涵蓋Web應(yīng)用中各種各樣的需求。例如Ajax輔助、數(shù)據(jù)表格、動態(tài)列表、XML工具、拖曳、cookie處理、彈出層等等。

如果希望直觀地呈現(xiàn)統(tǒng)計(jì)數(shù)據(jù)，我們可以使用jQchart、TufteGraph等優(yōu)秀的圖表；如果用到日歷功能，我們可以使用Date Picker、wdCalendar等插件；如果希望用上對話框，我們可以使用Modal Dialog等插件?？傊?，豐富的jQuery帶給我們開發(fā)者極大的便利，同時(shí)豐富的功能擴(kuò)展也能滿足用戶更高的體驗(yàn)需求。

5.結(jié)束語

JQuery作為一個(gè)輕量的js庫，使用起來很方便，也總是能給開發(fā)者提供不同尋常的效果和特性。它簡化了javascript和AJAX編程，帶給訪問者完全不同的瀏覽感受。在web開發(fā)中，適當(dāng)、合理地使用jQuery技術(shù)，就可以讓我們開發(fā)的應(yīng)用具有較好的用戶操作體驗(yàn)，較快的網(wǎng)頁響應(yīng)速度以及解決瀏覽器的兼容問題，在很大程度上起到事半功倍的效果。

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

[2]曾順.精通JavaScript+jQuery[M].北京:人民郵電出版社,2010,217-218.

[3]單東林,張曉菲,魏然.鋒利的jQuery[M].北京:人民郵電出版社,2009,197-198.