使用 jQuery 簡化 Ajax 開發

文檔選項

		打印本頁
		將此頁作爲電子郵件發送

級別： 中級

Jesse Skinner, Web 開發人員, Freelance

2007 年 5 月 16 日

jQuery 是一個JavaScript 庫，它有助於簡化 JavaScript? 以及 Asynchronous JavaScript + XML (Ajax) 編程。與類似的 JavaScript 庫不同，jQuery 具有獨特的基本原理，可以簡潔地表示常見的複雜代碼。學習 jQuery 基本原理，探索其特性和功能，執行一些常見的 Ajax 任務並掌握如何使用插件擴展 jQuery。

jQuery 是什麼？

請訪問 Ajax 技術資源中心，這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裏找到。

jQuery 由 John Resig 創建於 2006 年初，對於任何使用 JavaScript 代碼的程序員來說，它是一個非常有用的 JavaScript 庫。無論您是剛剛接觸 JavaScript 語言，並且希望獲得一個能解決文檔對象模型（Document Object Model，DOM）腳本和 Ajax 開發中一些複雜問題的庫，還是作爲一個厭倦了 DOM 腳本和 Ajax 開發中無聊的重複工作的資深 JavaScript 專家，jQuery 都會是您的首選。

jQuery 能幫助您保證代碼簡潔易讀。您再也不必編寫大堆重複的循環代碼和 DOM 腳本庫調用了。使用 jQuery，您可以把握問題的要點，並使用盡可能最少的代碼實現您想要的功能。

毫無疑問，jQuery 的原理是獨一無二的：它的目的就是保證代碼簡潔並可重用。當您理解並體會這一原理後，便可以開始學習本教程了，看看 jQuery 對我們的編程方式有多少改進吧。

回頁首

一些簡單的代碼簡化

下面是一個簡單示例，它說明了 jQuery 對代碼的影響。要執行一些真正簡單和常見的任務，比方說爲頁面的某一區域中的每個鏈接附加一個單擊（click）事件，您可以使用純 JavaScript 代碼和 DOM 腳本來實現，如 清單 1 所示。

清單 1. 沒有使用 jQuery 的 DOM 腳本

                  var external_links = document.getElementByIdx('external_links');  var links = external_links.getElementsByTagName_r('a');  for (var i=0;i < links.length;i++) {      var link = links.item(i);      link.onclick = function() {          return confirm('You are going to visit: ' + this.href);      };  }  

清單 2 顯示了使用 jQuery 實現的相同的功能。

清單 2. 使用了 jQuery 的 DOM 腳本

                  $('#external_links a').click(function() {      return confirm('You are going to visit: ' + this.href);  });  

是不是很神奇？ 使用 jQuery，您可以把握問題的要點，只讓代碼實現您想要的功能，而省去了一些繁瑣的過程。無需對元素進行循環，de<click()de< 函數將完成這些操作。同樣也不需要進行多個 DOM 腳本調用。您只需要使用一個簡短的字符串對所需的元素進行定義即可。

理解這一代碼的工作原理可能會有一點複雜。首先，我們使用了 de<$()de< 函數 —— jQuery 中功能最強大的函數。通常，我們都是使用這個函數從文檔中選擇元素。在本例中，一個包含有一些層疊樣式表（Cascading Style Sheet，CSS）語法的字符串被傳遞給函數，然後 jQuery 儘可能高效地把這些元素找出來。

如果您具備 CSS 選擇器的基本知識，那麼應該很熟悉這些語法。在 清單 2 中，de<#external_linksde< 用於檢索 de<idde< 爲 de<external_linksde< 的元素。de<ade< 後的空格表示 jQuery 需要檢索 de<external_linksde< 元素中的所有 de<<a>de< 元素。用英語說起來非常繞口，甚至在 DOM 腳本中也是這樣，但是在 CSS 中這再簡單不過了

de<$()de< 函數返回一個含有所有與 CSS 選擇器匹配的元素的 jQuery 對象。jQuery 對象 類似於數組，但是它附帶有大量特殊的 jQuery 函數。比方說，您可以通過調用 de<clickde< 函數把 click 處理函數指定給 jQuery 對象中的所有元素。

還可以向 de<$()de< 函數傳遞一個元素或者一個元素數組，該函數將把這些元素封裝在一個 jQuery 對象中。您可能會想要使用這個功能將 jQuery 函數用於一些對象，比方說 de<windowde< 對象。例如，我們通常會像下面這樣把函數分配給加載事件：

window.onload = function() {      // do this stuff when the page is done loading  };  

使用 jQuery 編寫的功能相同的代碼：

$(window).load(function() {      // run this when the whole page has been downloaded  });  

您可能有所體會，等待窗口加載的過程是非常緩慢而且令人痛苦的，這是因爲必須等整個頁面加載完所有的內容，包括頁面上所有的的圖片。有的時候，您希望首先完成圖片加載，但是在大多數情況下，您只需加載超文本標誌語言（Hypertext Markup Language，HTML）就可以了。通過在文檔中創建特殊的de<readyde< 事件，jQuery 解決了這個問題，方法如下：

$(document).ready(function() {      // do this stuff when the HTML is all ready  });  

這個代碼圍繞 de<documentde< 元素創建了一個 jQuery 對象，然後建立一個函數，用於在 HTML DOM 文檔就緒的時候調用實例。可以根據需要任意地調用這個函數。並且能夠以真正的 jQuery 格式，使用快捷方式調用這個函數。這很簡單，只需向 de<$()de< 函數傳遞一個函數就可以了：

$(function() {      // run this when the HTML is done downloading  });  

到目前以止，我已經向大家介紹了 de<$()de< 函數的三種用法。第四種方法可以使用字符串來創建元素。結果會產生一個包含該元素的 jQuery 對象。清單 3 顯示的示例在頁面中添加了一個段落。

清單 3. 創建和附加一個簡單的段落

                  $('<p></p>')      .html('Hey World!')      .css('background', 'yellow')      .appendTo("body");  

在前一個例子中您可能已經注意到，jQuery 中的另一個功能強大的特性就是方法鏈接（method chaining）。每次對 jQuery 對象調用方法時，方法都會返回相同的 jQuery 對象。這意味着如果您需要對 jQuery 對象調用多個方法，那麼您不必重新鍵入選擇器就可以實現這一目的：

$('#message').css('background', 'yellow').html('Hello!').show();  

回頁首

使 Ajax 變得簡單

使用 jQuery 將使 Ajax 變得及其簡單。jQuery 提供有一些函數，可以使簡單的工作變得更加簡單，複雜的工作變得不再複雜。

Ajax 最常見的用法就是把一塊 HTML 代碼加載到頁面的某個區域中去。爲此，只需簡單地選擇所需的元素，然後使用 de<load()de< 函數即可。下面是一個用於更新統計信息的示例：

$('#stats').load('stats.html');  

通常，我們只需簡單地把一些參數傳遞給服務器中的某個頁面。正如您所預料的，使用 jQuery 實現這一操作非常地簡單。您可以使用 de<$.post()de< 或者de<$.get()de<，這由所需的方法決定。如果需要的話，您還可以傳遞一個可選的數據對象和回調函數。清單 4 顯示了一個發送數據和使用回調的簡單示例。

清單 4. 使用 Ajax 向頁面發送數據

                  $.post('save.cgi', {      text: 'my string',      number: 23  }, function() {      alert('Your data has been saved.');  });  

如果您確實需要編寫一些複雜的 Ajax 腳本，那麼需要用到 de<$.ajax()de< 函數。您可以指定 de<xmlde<、de<scriptde<、de<htmlde< 或者 de<jsonde<，jQuery 將自動爲回調函數準備合適的結果，這樣您便可以立即使用該結果。還可以指定 de<beforeSendde<、de<errorde<、de<successde< 或者 de<completede< 回調函數，向用戶提供更多有關 Ajax 體驗的反饋。此外，還有一些其它的參數可供使用，您可以使用它們設置 Ajax 請求的超時，也可以設置頁面 “最近一次修改” 的狀態。清單 5 顯示了一個使用一些我所提到的參數檢索 XML 文檔的示例。

清單 5. $.ajax() 使 Ajax 由複雜變簡單 

                  $.ajax({      url: 'document.xml',      type: 'GET',      dataType: 'xml',      timeout: 1000,      error: function(){          alert('Error loading XML document');      },      success: function(xml){          // do something with xml      }  });  

當 success 回調函數返回 XML 文檔後，您可以使用 jQuery 檢索這個 XML 文檔，其方式與檢索 HTML 文檔是一樣的。這樣使得處理 XML 文檔變得相當地容易，並且把內容和數據集成到了您的 Web 站點裏面。清單 6 顯示了 de<successde< 函數的一個擴展，它爲 XML 中的每個 de<<item>de< 元素都添加了一個列表項到 Web 頁面中。

清單 6. 使用 jQuery 處理 XML 文檔

                  success: function(xml){      $(xml).find('item').each(function(){          var item_text = $(this).text();            $('<li></li>')              .html(item_text)              .appendTo('ol');      });  }  

回頁首

爲 HTML 添加動畫

可以使用 jQuery 處理基本的動畫和顯示效果。de<animate()de< 函數是動畫代碼的核心，它用於更改任何隨時間變化的數值型的 CSS 樣式值。比方說，您可以變化高度、寬度、不透明度和位置。還可以指定動畫的速度，定爲毫秒或者預定義的速度：慢速，中速或快速。

下面是一個同時變化某個元素高度和寬度的示例。請注意，這些參數沒有開始值，只有最終值。開始值取自元素的當前尺寸。同時我也附加了一個回調函數。

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){      alert('The element is done growing!');  });  

jQuery 的內置函數使更多常見的動畫更容易完成。可以使用 de<show()de< 和 de<hide()de< 元素，立即顯示或者以特定的速度顯示。還可以通過使用 de<fadeIn()de< 和de<fadeOut()de<，或者 de<slideDown()de< 和 de<slideUp()de< 顯示和隱藏元素，這取決於您所需要的顯示效果。下面的示例定義了一個下滑的導航菜單。

$('#nav').slideDown('slow');  

回頁首

DOM 腳本和事件處理

或許 jQuery 最擅長的就是簡化 DOM 腳本和事件處理。遍歷和處理 DOM 非常簡單，同時附加、移除和調用事件也十分容易，且不像手動操作那樣容易出錯。

從本質上說，jQuery 可以使 DOM 腳本中的常用操作變得更加容易。您可以創建元素並且使用 de<append()de< 函數把它們與其它的一些元素鏈接到一起，使用de<clone()de< 複製元素，使用 de<html()de< 設置內容，使用 de<empty()de< 函數刪除內容，使用 de<remove()de< 函數刪除所有的元素，即便是使用 de<wrap()de< 函數，用其他元素將這些元素包裝起來。

通過遍歷 DOM，一些函數可以用於更改 jQuery 對象本身的內容。可以獲得元素所有的 de<siblings()de<、de<parents()de< 和 de<children()de<。還可以選擇 de<next()de< 和de<prev()de< 兄弟元素。de<find()de< 函數或許是功能最強大的函數，它允許使用 jQuery 選擇器搜索 jQuery 對象中元素的後代元素。

如果結合使用 de<end()de< 函數，那麼這些函數將變得更加強大。這個函數的功能類似於 undo 函數，用於返回到調用 de<find()de< 或 de<parents()de< 函數（或者其它遍歷函數）之前的 jQuery 對象。

如果配合方法鏈接（method chaining）一起使用，這些函數可以使複雜的操作看上去非常簡單。清單 7 顯示了一個示例，其中包含有一個登錄表單並處理了一些與之有關的元素。

清單 7. 輕鬆地遍歷和處理 DOM

                  $('form#login')      // hide all the labels inside the form with the 'optional' class      .find('label.optional').hide().end()        // add a red border to any password fields in the form      .find('input:password').css('border', '1px solid red').end()        // add a submit handler to the form      .submit(function(){          return confirm('Are you sure you want to submit?');      });  

不管您是否相信，這個示例只是一行滿是空白的被鏈接的代碼。首先，選擇登錄表單。然後，發現其中含有可選標籤，隱藏它們，並調用 de<end()de< 返回表單。然後，我創建了密碼字段，將其邊界變爲紅色，再次調用 de<end()de< 返回表單。最後，我在表單中添加了一個提交事件處理程序。其中尤爲有趣的就是（除了其簡潔性以外），jQuery 完全優化了所有的查詢操作，確保將所有內容很好地鏈接在一起後，不需要對一個元素執行兩次查詢。

處理常見事件就像調用函數（比方說 de<click()de<、de<submit()de< 或 de<mouseover()de<）和爲其傳遞事件處理函數一樣簡單。此外，還可以使用 de<bind('eventname', function(){})de< 指定自定義的事件處理程序。可以使用 de<unbind('eventname')de< 刪除某些事件或者使用 de<unbind()de< 刪除所有的事件。有關這些函數的使用方法的完整列表，請參閱 參考資料 中的 jQuery 應用程序編程接口（Application Program Interface，API）文檔。

回頁首

釋放 jQuery 選擇器的強大能量

我們經常會使用 ID 來選擇元素，比如 de<#myidde<，或者通過類名，比如 de<div.myclassde< 來選擇元素。然而，jQuery 提供了更爲複雜和完整的選擇器語法，允許我們在單個選擇器中選擇幾乎所有的元素組合。

jQuery 的選擇器語法主要是基於 CSS3 和 XPath 的。對 CSS3 和 XPath 瞭解的越多，使用 jQuery 時就越加得心應手。有關 jQuery 選擇器的完整列表，包括 CSS 和 XPath，請參閱 參考資料 中的鏈接。

CSS3 包含一些並不是所有瀏覽器都支持的語法，因此我們很少使用它。然而，我們仍然可以在 jQuery 中使用 CSS3 選擇元素，因爲 jQuery 具備自己的自定義選擇器引擎。比方說，要在表格中的每一個空列中都添加一個橫槓，可以使用：de<:emptyde< 僞選擇器（pseudo-selector）：

$('td:empty').html('-');  

如果需要找出所有不含特定類的元素呢？ CSS3 同樣提供了一個語法可以完成這個目的，使用 de<:notde< 僞選擇器： 如下代碼顯示瞭如何隱藏所有不含 de<requiredde<類的輸入內容：

$('input:not(.required)').hide();  

與在 CSS 中一樣，可以使用逗號將多個選擇器連接成一個。下面是一個同時隱藏頁面上所有類型列表的簡單示例：