使用 jQuery，第 3 部分：用 jQuery 和 Ajax 構建富 Internet 應用程序

最近這幾個月以來，JQuery 受歡迎的指數迅速攀升，現已成爲 Web 開發人員首選的 JavaScript 庫。與此同時，人們對富 Internet 應用程序（Rich Internet Application，RIA）的應用和需求也在迅速增長，並期待用基於瀏覽器的應用程序代替桌面應用程序。無論是電子表格，還是薪水冊和電子郵件應用程序，現在都在瀏覽器中再現了類似於桌面的體驗。隨着這些應用程序數量的增多和功能的日益複雜，JavaScript 庫將會變得越來越重要，因爲它是構建這些應用程序的堅實基礎。JQuery 無疑成爲了開發人員最佳選擇。本系列文章深入探索了 jQuery，並提供了堅實的基礎。開發人員藉助這個基礎就可以快速輕鬆地構建自己的 RIA。

在本系列 之前的一篇文章 中，您瞭解了用來構建 RIA 以及爲頁面添加交互性的三個基本組件。第一個模塊是 Event 模塊，藉助此模塊，能捕獲用戶對頁面的任意交互並以編程的方式進行響應。比如，您可以向按鈕點擊、鼠標移動等事件附加代碼。下一個模塊是 Attributes 模塊，它解釋瞭如何在頁面元素上獲得/設置值，以及如何將其作爲帶有變量的數據對象。這些值包含了決定爲用戶提供何種響應的大部分信息。最後，您還看到了 如何進行 CSS 處理，以及如何在不重新加載頁面的情況下更改頁面上任意元素的佈局、顏色、字體等。瞭解這三個模塊之後，就等於掌握了交互 Web 頁面的三個基本元素 — 獲取用戶交互（Event）、收集信息（Attribute）以及在事件和信息基礎上提供反饋（CSS）。

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

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

Effects 模塊

從其名字往往容易得出這樣的結論，Effects 模塊只包含一些動畫和效果，而這些動畫和效果往往是一些 “正規” 的 Web 頁面所竭力避免的。但實際情況並非如此。幾乎所有的應用程序都會遇到這樣的情況，即某個頁面元素需要隱藏或其視圖應該根據另一個頁面元素的狀態進行切換。這類更改對於一個 RIA 而言非常重要，因爲它們讓您能夠加載某個頁面的所有頁面元素，然後通過隱藏/顯示特定的元素只顯示所需的信息。重載頁面的方式並不可取。比如一個具有兩個選項的組合框，一個選項是隱藏 div，一個選項是顯示此 div。很顯然，與更改組合框並重載頁面隱藏/顯示 div 相比，用客戶端代碼隱藏/顯示此 div 更簡單和高效。而僅隱藏/顯示還是要讓它淡入/淡出，則完全取決於您。

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

清單 1. 隱藏和顯示函數

				
// 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() 這兩個函數，還能更多地控制頁面元素如何顯示和隱藏。相關文檔將 hide() 描述爲 “優美” 的顯示/隱藏，對於 show()，就是綜合淡入和滑出的效果。

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

清單 2. 複合效果

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

有一個很有趣的函數，它可部分隱藏和顯示頁面元素，此函數是 fadeTo()，它能讓頁面元素部分透明。我認爲此函數對 RIA 很重要，因爲透明性是突出頁面上某個元素的一種很好的方式，並可用來顯示頁面的禁用區域。例如，頁面上有幾個選項卡，可以讓所有未被選中的選項卡呈現一些透明性來突出其未被選中。或者，在一個頁面表單上，可以讓所有沒有焦點的元素呈現一些透明性以向用戶突出哪個 Form 元素當前具有焦點。此外，透明性本身就很酷。在進行設計時，不妨遵循這樣一條通用的箴言 “如果蘋果公司這麼設計，效果一定很酷”。

清單 3. 使用 fadeTo() 增添很酷的效果

 

本文轉自IBM Developerworks中國

      請點擊此處查看全文