基于jQuery和Ajax構(gòu)建富Internet應(yīng)用程序

最近JQuery人氣急升，現(xiàn)已成為 Web 開發(fā)人員選的 JavaScript 庫。與此同時(shí)，人們對(duì)富 Internet 應(yīng)用程序（Rich Internet Application，RIA）（什么是富Internet應(yīng)用程序？）的應(yīng)用和需求也在迅速增長，并期待用基于瀏覽器的應(yīng)用程序代替桌面應(yīng)用程序。無論是電子表格，還是薪水冊和電子郵件應(yīng)用程序，現(xiàn)在都在瀏覽器中再現(xiàn)了類似于桌面的體驗(yàn)。隨著這些應(yīng)用程序數(shù)量的增多和功能的日益復(fù)雜，JavaScript 庫將會(huì)變得越來越重要，因?yàn)樗菢?gòu)建這些應(yīng)用程序的堅(jiān)實(shí)基礎(chǔ)。JQuery 無疑成為了開發(fā)人員好選擇。本系列文章深入探索了 jQuery，并提供了堅(jiān)實(shí)的基礎(chǔ)。開發(fā)人員借助這個(gè)基礎(chǔ)就可以快速輕松地構(gòu)建自己的 RIA。

在本系列中，您了解了用來構(gòu)建 RIA 以及為頁面添加交互性的三個(gè)基本組件。第一個(gè)模塊是 Event 模塊，借助此模塊，能捕獲用戶對(duì)頁面的任意交互并以編程的方式進(jìn)行響應(yīng)。比如，您可以向按鈕點(diǎn)擊、鼠標(biāo)移動(dòng)等事件附加代碼。下一個(gè)模塊是 Attributes 模塊，它解釋了如何在頁面元素上獲得/設(shè)置值，以及如何將其作為帶有變量的數(shù)據(jù)對(duì)象。這些值包含了決定為用戶提供何種響應(yīng)的大部分信息。最后，您還看到了 如何進(jìn)行 CSS 處理，以及如何在不重新加載頁面的情況下更改頁面上任意元素的布局、顏色、字體等。了解這三個(gè)模塊之后，就等于掌握了交互 Web 頁面的三個(gè)基本元素 — 獲取用戶交互（Event）、收集信息（Attribute）以及在事件和信息基礎(chǔ)上提供反饋（CSS）。

在本文中，將對(duì)交互 Web 頁面的這三個(gè)基本元素進(jìn)行更進(jìn)一步的探究，提供當(dāng)今高級(jí) Web 應(yīng)用程序必備的 “酷” 效果和特征。這些附加的模塊對(duì)提供 RIA 而言并不是至關(guān)重要的，但這些效果和特征會(huì)給用戶留下深刻印象，并且還會(huì)極大地?cái)U(kuò)展 RIA 的可用范圍和特性。您將看到的第一個(gè)模塊是 Effects 模塊，它包含很多特性，比如隱藏元素、隨處移動(dòng)元素、淡入淡出元素等。換言之，這些都是讓 Web 頁酷起來的 “亮點(diǎn)”。最后一個(gè)要討論的模塊是 Asynchronous JavaScript + XML (Ajax) 模塊。大多數(shù)人都將該模塊等同為 RIA。Ajax 讓 Web 應(yīng)用程序無需重載頁面就能與服務(wù)器進(jìn)行交互、向服務(wù)器傳遞信息并從中獲取信息（與 Web 上的一些意見相反，Ajax不單純是一個(gè)很酷的 JavaScript 動(dòng)畫工具）。您將發(fā)現(xiàn) jQuery 提供了極其簡單易用的 Ajax 工具。實(shí)際上，jQuery 使 Ajax 的使用與調(diào)用其他 JavaScript 方法一樣簡單。

本文中的示例應(yīng)用程序是個(gè)總結(jié)，展示了 Effects 和 Ajax 模塊如何融入到這個(gè)示例 Web 郵件應(yīng)用程序中。我將向這個(gè)示例程序添加一些效果使其更加漂亮，而且更重要的一點(diǎn)是，我將添加一些 Ajax 代碼，以便無需重載頁面郵件應(yīng)用程序就能顯示信息。

Effects 模塊

從其名字往往容易得出這樣的結(jié)論，Effects 模塊只包含一些動(dòng)畫和效果，而這些動(dòng)畫和效果往往是一些 “正規(guī)” 的 Web 頁面所竭力避免的。但實(shí)際情況并非如此。幾乎所有的應(yīng)用程序都會(huì)遇到這樣的情況，即某個(gè)頁面元素需要隱藏或其視圖應(yīng)該根據(jù)另一個(gè)頁面元素的狀態(tài)進(jìn)行切換。這類更改對(duì)于一個(gè) RIA 而言非常重要，因?yàn)樗鼈冏屇軌蚣虞d某個(gè)頁面的所有頁面元素，然后通過隱藏/顯示特定的元素只顯示所需的信息。重載頁面的方式并不可取。比如一個(gè)具有兩個(gè)選項(xiàng)的組合框，一個(gè)選項(xiàng)是隱藏 div，一個(gè)選項(xiàng)是顯示此 div。很顯然，與更改組合框并重載頁面隱藏/顯示 div 相比，用客戶端代碼隱藏/顯示此 div 更簡單和高效。而僅隱藏/顯示還是要讓它淡入/淡出，則完全取決于您。

如上所述，最基本的效果函數(shù)是show()和hide()函數(shù)。這非常直觀；它們可分別用來顯示和隱藏頁面上的某個(gè)元素。

清單 1. 隱藏和顯示函數(shù)

// shows every <p> on the page
$("p").show();

// hides every <p> on the page
$("p").hide();

// hides every other <p> on the page
$("p:odd").hide();

除了這些基本操作，利用show()和hide()這兩個(gè)函數(shù)，還能更多地控制頁面元素如何顯示和隱藏。相關(guān)文檔將hide()描述為 “優(yōu)美” 的顯示/隱藏，對(duì)于show()，就是綜合淡入和滑出的效果。

在開始深入探討一些例子之前，不妨回過頭來看看傳遞給這些效果函數(shù)的參數(shù)。每個(gè)函數(shù)（除了通用的show()和hide()函數(shù)之外）都允許在效果完成時(shí)傳入要調(diào)用的速度和函數(shù)。速度用來控制效果出現(xiàn)的快慢。這個(gè)參數(shù)可以是一個(gè)"slow"、"fast"或"normal"字符串。此外，如果需要精確控制動(dòng)畫時(shí)間，那就需要用參數(shù)指定毫秒數(shù)。Effects 函數(shù)的第二個(gè)參數(shù)本身就是一個(gè)函數(shù)，此函數(shù)在效果完成后調(diào)用。如果想要將幾個(gè)效果組合成一個(gè)較大規(guī)模的效果，這一點(diǎn)將非常重要，因?yàn)槔盟?，能夠可靠地控制一個(gè)效果何時(shí)完成，下一個(gè)效果何時(shí)開始。

清單 2. 復(fù)合效果

// the img with an ID of "picture" should start hidden
// when the "showPicture" button is pressed, show the img with an ID of "picture"
// and animate it, so it appears quickly in a fade In and slide out, and when
// it's done being shown, show the caption of the picture, which is
// always in the span right after the <img> tag

<input type="button" id="showPicture">

<img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>

// jQuery code inside the document.ready() function

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
$("#picture").show("fast", function(){
$("#picture").next().show();
});
});

// notice how it took more text to describe what you want to happen than it took
// to actually code it!

Effects 模塊還有其他一些函數(shù)，它們與show()和hide()非常類似，并且最終所實(shí)現(xiàn)的功能也基本相同；只不過實(shí)現(xiàn)的方式不同。slideDown()和slideUp()函數(shù)分別用來顯示和隱藏一個(gè)頁面元素。不過，這是通過將該元素滑下或滑上的動(dòng)畫效果實(shí)現(xiàn)的（從其名稱中不難看出這一點(diǎn)）。與我剛剛提到的增強(qiáng)了的hide()和show()函數(shù)類似，您也可以控制滑動(dòng)的速度以及在效果完成時(shí)要調(diào)用的函數(shù)。此外，要顯示/隱藏頁面元素還有另一種選擇，即fadeIn()和fadeOut()函數(shù)，正如其名字所示，這兩個(gè)函數(shù)用來淡入頁面元素直至該元素透明，然后使該元素消失。它們允許在效果完成時(shí)定制速度和要調(diào)用的函數(shù)。

有一個(gè)很有趣的函數(shù)，它可部分隱藏和顯示頁面元素，此函數(shù)是fadeTo()，它能讓頁面元素部分透明。我認(rèn)為此函數(shù)對(duì) RIA 很重要，因?yàn)橥该餍允峭怀鲰撁嫔夏硞€(gè)元素的一種很好的方式，并可用來顯示頁面的禁用區(qū)域。例如，頁面上有幾個(gè)選項(xiàng)卡，可以讓所有未被選中的選項(xiàng)卡呈現(xiàn)一些透明性來突出其未被選中?；蛘?，在一個(gè)頁面表單上，可以讓所有沒有焦點(diǎn)的元素呈現(xiàn)一些透明性以向用戶突出哪個(gè)Form元素當(dāng)前具有焦點(diǎn)。此外，透明性本身就很酷。在進(jìn)行設(shè)計(jì)時(shí)，不妨遵循這樣一條通用的箴言 “如果蘋果公司這么設(shè)計(jì)，效果一定很酷”。

本文名稱：基于jQuery和Ajax構(gòu)建富Internet應(yīng)用程序
本文鏈接：http://muchs.cn/news33/151883.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、外貿(mào)建站、虛擬主機(jī)、網(wǎng)站營銷、自適應(yīng)網(wǎng)站、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)