如何使用jQuery簡(jiǎn)化Ajax開(kāi)發(fā)

這篇文章主要為大家展示了“如何使用jQuery簡(jiǎn)化Ajax開(kāi)發(fā)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用jQuery簡(jiǎn)化Ajax開(kāi)發(fā)”這篇文章吧。

jQuery 是什么？
jQuery 由 John Resig 創(chuàng)建于 2006 年初，對(duì)于任何使用 JavaScript 代碼的程序員來(lái)說(shuō)，它是一個(gè)非常有用的 JavaScript 庫(kù)。無(wú)論您是剛剛接觸 JavaScript 語(yǔ)言，并且希望獲得一個(gè)能解決文檔對(duì)象模型（Document Object Model，DOM）腳本和 Ajax 開(kāi)發(fā)中一些復(fù)雜問(wèn)題的庫(kù)，還是作為一個(gè)厭倦了 DOM 腳本和 Ajax 開(kāi)發(fā)中無(wú)聊的重復(fù)工作的資深 JavaScript 專家，jQuery 都會(huì)是您的首選。
jQuery 能幫助您保證代碼簡(jiǎn)潔易讀。您再也不必編寫(xiě)大堆重復(fù)的循環(huán)代碼和 DOM 腳本庫(kù)調(diào)用了。使用 jQuery，您可以把握問(wèn)題的要點(diǎn)，并使用盡可能最少的代碼實(shí)現(xiàn)您想要的功能。
毫無(wú)疑問(wèn)，jQuery 的原理是獨(dú)一無(wú)二的：它的目的就是保證代碼簡(jiǎn)潔并可重用。當(dāng)您理解并體會(huì)這一原理后，便可以開(kāi)始學(xué)習(xí)本教程了，看看 jQuery 對(duì)我們的編程方式有多少改進(jìn)吧。
一些簡(jiǎn)單的代碼簡(jiǎn)化
下面是一個(gè)簡(jiǎn)單示例，它說(shuō)明了 jQuery 對(duì)代碼的影響。要執(zhí)行一些真正簡(jiǎn)單和常見(jiàn)的任務(wù)，比方說(shuō)為頁(yè)面的某一區(qū)域中的每個(gè)鏈接附加一個(gè)單擊（click）事件，您可以使用純 JavaScript 代碼和 DOM 腳本來(lái)實(shí)現(xiàn)，如 清單 1 所示。
清單 1. 沒(méi)有使用 jQuery 的 DOM 腳本

復(fù)制代碼 代碼如下:

var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('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 實(shí)現(xiàn)的相同的功能。
清單 2. 使用了 jQuery 的 DOM 腳本

復(fù)制代碼 代碼如下:

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

是不是很神奇？ 使用 jQuery，您可以把握問(wèn)題的要點(diǎn)，只讓代碼實(shí)現(xiàn)您想要的功能，而省去了一些繁瑣的過(guò)程。無(wú)需對(duì)元素進(jìn)行循環(huán)，click() 函數(shù)將完成這些操作。同樣也不需要進(jìn)行多個(gè) DOM 腳本調(diào)用。您只需要使用一個(gè)簡(jiǎn)短的字符串對(duì)所需的元素進(jìn)行定義即可。
理解這一代碼的工作原理可能會(huì)有一點(diǎn)復(fù)雜。首先，我們使用了 $() 函數(shù) —— jQuery 中功能最強(qiáng)大的函數(shù)。通常，我們都是使用這個(gè)函數(shù)從文檔中選擇元素。在本例中，一個(gè)包含有一些層疊樣式表（Cascading Style Sheet，CSS）語(yǔ)法的字符串被傳遞給函數(shù)，然后 jQuery 盡可能高效地把這些元素找出來(lái)。
如果您具備 CSS 選擇器的基本知識(shí)，那么應(yīng)該很熟悉這些語(yǔ)法。在 清單 2 中，#external_links 用于檢索 id 為 external_links 的元素。a 后的空格表示 jQuery 需要檢索 external_links 元素中的所有 <a> 元素。用英語(yǔ)說(shuō)起來(lái)非常繞口，甚至在 DOM 腳本中也是這樣，但是在 CSS 中這再簡(jiǎn)單不過(guò)了
$() 函數(shù)返回一個(gè)含有所有與 CSS 選擇器匹配的元素的 jQuery 對(duì)象。jQuery 對(duì)象 類似于數(shù)組，但是它附帶有大量特殊的 jQuery 函數(shù)。比方說(shuō)，您可以通過(guò)調(diào)用 click 函數(shù)把 click 處理函數(shù)指定給 jQuery 對(duì)象中的所有元素。
還可以向 $() 函數(shù)傳遞一個(gè)元素或者一個(gè)元素?cái)?shù)組，該函數(shù)將把這些元素封裝在一個(gè) jQuery 對(duì)象中。您可能會(huì)想要使用這個(gè)功能將 jQuery 函數(shù)用于一些對(duì)象，比方說(shuō) window 對(duì)象。例如，我們通常會(huì)像下面這樣把函數(shù)分配給加載事件：
window.onload = function() {
// do this stuff when the page is done loading
};

使用 jQuery 編寫(xiě)的功能相同的代碼：
$(window).load(function() {
// run this when the whole page has been downloaded
});

您可能有所體會(huì)，等待窗口加載的過(guò)程是非常緩慢而且令人痛苦的，這是因?yàn)楸仨毜日麄€(gè)頁(yè)面加載完所有的內(nèi)容，包括頁(yè)面上所有的的圖片。有的時(shí)候，您希望首先完成圖片加載，但是在大多數(shù)情況下，您只需加載超文本標(biāo)志語(yǔ)言（Hypertext Markup Language，HTML）就可以了。通過(guò)在文檔中創(chuàng)建特殊的 ready 事件，jQuery 解決了這個(gè)問(wèn)題，方法如下：
$(document).ready(function() {
// do this stuff when the HTML is all ready
});

這個(gè)代碼圍繞 document 元素創(chuàng)建了一個(gè) jQuery 對(duì)象，然后建立一個(gè)函數(shù)，用于在 HTML DOM 文檔就緒的時(shí)候調(diào)用實(shí)例。可以根據(jù)需要任意地調(diào)用這個(gè)函數(shù)。并且能夠以真正的 jQuery 格式，使用快捷方式調(diào)用這個(gè)函數(shù)。這很簡(jiǎn)單，只需向 $() 函數(shù)傳遞一個(gè)函數(shù)就可以了：
$(function() {
// run this when the HTML is done downloading
});

到目前以止，我已經(jīng)向大家介紹了 $() 函數(shù)的三種用法。第四種方法可以使用字符串來(lái)創(chuàng)建元素。結(jié)果會(huì)產(chǎn)生一個(gè)包含該元素的 jQuery 對(duì)象。清單 3 顯示的示例在頁(yè)面中添加了一個(gè)段落。
清單 3. 創(chuàng)建和附加一個(gè)簡(jiǎn)單的段落
$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");

在前一個(gè)例子中您可能已經(jīng)注意到，jQuery 中的另一個(gè)功能強(qiáng)大的特性就是方法鏈接（method chaining）。每次對(duì) jQuery 對(duì)象調(diào)用方法時(shí)，方法都會(huì)返回相同的 jQuery 對(duì)象。這意味著如果您需要對(duì) jQuery 對(duì)象調(diào)用多個(gè)方法，那么您不必重新鍵入選擇器就可以實(shí)現(xiàn)這一目的：
$('#message').css('background', 'yellow').html('Hello!').show();

使 Ajax 變得簡(jiǎn)單
使用 jQuery 將使 Ajax 變得及其簡(jiǎn)單。jQuery 提供有一些函數(shù)，可以使簡(jiǎn)單的工作變得更加簡(jiǎn)單，復(fù)雜的工作變得不再?gòu)?fù)雜。
Ajax 最常見(jiàn)的用法就是把一塊 HTML 代碼加載到頁(yè)面的某個(gè)區(qū)域中去。為此，只需簡(jiǎn)單地選擇所需的元素，然后使用 load() 函數(shù)即可。下面是一個(gè)用于更新統(tǒng)計(jì)信息的示例：
$('#stats').load('stats.html');

通常，我們只需簡(jiǎn)單地把一些參數(shù)傳遞給服務(wù)器中的某個(gè)頁(yè)面。正如您所預(yù)料的，使用 jQuery 實(shí)現(xiàn)這一操作非常地簡(jiǎn)單。您可以使用 $.post() 或者 $.get()，這由所需的方法決定。如果需要的話，您還可以傳遞一個(gè)可選的數(shù)據(jù)對(duì)象和回調(diào)函數(shù)。清單 4 顯示了一個(gè)發(fā)送數(shù)據(jù)和使用回調(diào)的簡(jiǎn)單示例。
清單 4. 使用 Ajax 向頁(yè)面發(fā)送數(shù)據(jù)
$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});

如果您確實(shí)需要編寫(xiě)一些復(fù)雜的 Ajax 腳本，那么需要用到 $.ajax() 函數(shù)。您可以指定 xml、script、html 或者 json，jQuery 將自動(dòng)為回調(diào)函數(shù)準(zhǔn)備合適的結(jié)果，這樣您便可以立即使用該結(jié)果。還可以指定 beforeSend、error、success 或者 complete 回調(diào)函數(shù)，向用戶提供更多有關(guān) Ajax 體驗(yàn)的反饋。此外，還有一些其它的參數(shù)可供使用，您可以使用它們?cè)O(shè)置 Ajax 請(qǐng)求的超時(shí)，也可以設(shè)置頁(yè)面 “最近一次修改” 的狀態(tài)。清單 5 顯示了一個(gè)使用一些我所提到的參數(shù)檢索 XML 文檔的示例。
清單 5. $.ajax() 使 Ajax 由復(fù)雜變簡(jiǎ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
}
});

當(dāng) success 回調(diào)函數(shù)返回 XML 文檔后，您可以使用 jQuery 檢索這個(gè) XML 文檔，其方式與檢索 HTML 文檔是一樣的。這樣使得處理 XML 文檔變得相當(dāng)?shù)厝菀?，并且把?nèi)容和數(shù)據(jù)集成到了您的 Web 站點(diǎn)里面。清單 6 顯示了 success 函數(shù)的一個(gè)擴(kuò)展，它為 XML 中的每個(gè) <item> 元素都添加了一個(gè)列表項(xiàng)到 Web 頁(yè)面中。
清單 6. 使用 jQuery 處理 XML 文檔
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}

為 HTML 添加動(dòng)畫(huà)
可以使用 jQuery 處理基本的動(dòng)畫(huà)和顯示效果。animate() 函數(shù)是動(dòng)畫(huà)代碼的核心，它用于更改任何隨時(shí)間變化的數(shù)值型的 CSS 樣式值。比方說(shuō)，您可以變化高度、寬度、不透明度和位置。還可以指定動(dòng)畫(huà)的速度，定為毫秒或者預(yù)定義的速度：慢速，中速或快速。
下面是一個(gè)同時(shí)變化某個(gè)元素高度和寬度的示例。請(qǐng)注意，這些參數(shù)沒(méi)有開(kāi)始值，只有最終值。開(kāi)始值取自元素的當(dāng)前尺寸。同時(shí)我也附加了一個(gè)回調(diào)函數(shù)。
$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
alert('The element is done growing!');
});

jQuery 的內(nèi)置函數(shù)使更多常見(jiàn)的動(dòng)畫(huà)更容易完成。可以使用 show() 和 hide() 元素，立即顯示或者以特定的速度顯示。還可以通過(guò)使用 fadeIn() 和 fadeOut()，或者 slideDown() 和 slideUp() 顯示和隱藏元素，這取決于您所需要的顯示效果。下面的示例定義了一個(gè)下滑的導(dǎo)航菜單。
$('#nav').slideDown('slow');

DOM 腳本和事件處理
或許 jQuery 最擅長(zhǎng)的就是簡(jiǎn)化 DOM 腳本和事件處理。遍歷和處理 DOM 非常簡(jiǎn)單，同時(shí)附加、移除和調(diào)用事件也十分容易，且不像手動(dòng)操作那樣容易出錯(cuò)。
從本質(zhì)上說(shuō)，jQuery 可以使 DOM 腳本中的常用操作變得更加容易。您可以創(chuàng)建元素并且使用 append() 函數(shù)把它們與其它的一些元素鏈接到一起，使用 clone() 復(fù)制元素，使用 html() 設(shè)置內(nèi)容，使用 empty() 函數(shù)刪除內(nèi)容，使用 remove() 函數(shù)刪除所有的元素，即便是使用 wrap() 函數(shù)，用其他元素將這些元素包裝起來(lái)。
通過(guò)遍歷 DOM，一些函數(shù)可以用于更改 jQuery 對(duì)象本身的內(nèi)容?？梢垣@得元素所有的 siblings()、parents() 和 children()。還可以選擇 next() 和 prev() 兄弟元素。find() 函數(shù)或許是功能最強(qiáng)大的函數(shù)，它允許使用 jQuery 選擇器搜索 jQuery 對(duì)象中元素的后代元素。
如果結(jié)合使用 end() 函數(shù)，那么這些函數(shù)將變得更加強(qiáng)大。這個(gè)函數(shù)的功能類似于 undo 函數(shù)，用于返回到調(diào)用 find() 或 parents() 函數(shù)（或者其它遍歷函數(shù)）之前的 jQuery 對(duì)象。
如果配合方法鏈接（method chaining）一起使用，這些函數(shù)可以使復(fù)雜的操作看上去非常簡(jiǎn)單。清單 7 顯示了一個(gè)示例，其中包含有一個(gè)登錄表單并處理了一些與之有關(guān)的元素。
清單 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?');
});

不管您是否相信，這個(gè)示例只是一行滿是空白的被鏈接的代碼。首先，選擇登錄表單。然后，發(fā)現(xiàn)其中含有可選標(biāo)簽，隱藏它們，并調(diào)用 end() 返回表單。然后，我創(chuàng)建了密碼字段，將其邊界變?yōu)榧t色，再次調(diào)用 end() 返回表單。最后，我在表單中添加了一個(gè)提交事件處理程序。其中尤為有趣的就是（除了其簡(jiǎn)潔性以外），jQuery 完全優(yōu)化了所有的查詢操作，確保將所有內(nèi)容很好地鏈接在一起后，不需要對(duì)一個(gè)元素執(zhí)行兩次查詢。
處理常見(jiàn)事件就像調(diào)用函數(shù)（比方說(shuō) click()、submit() 或 mouseover()）和為其傳遞事件處理函數(shù)一樣簡(jiǎn)單。此外，還可以使用 bind('eventname', function(){}) 指定自定義的事件處理程序。可以使用 unbind('eventname') 刪除某些事件或者使用 unbind() 刪除所有的事件。有關(guān)這些函數(shù)的使用方法的完整列表，請(qǐng)參閱 參考資料 中的 jQuery 應(yīng)用程序編程接口（Application Program Interface，API）文檔。

釋放 jQuery 選擇器的強(qiáng)大能量
我們經(jīng)常會(huì)使用 ID 來(lái)選擇元素，比如 #myid，或者通過(guò)類名，比如 div.myclass 來(lái)選擇元素。然而，jQuery 提供了更為復(fù)雜和完整的選擇器語(yǔ)法，允許我們?cè)趩蝹€(gè)選擇器中選擇幾乎所有的元素組合。
jQuery 的選擇器語(yǔ)法主要是基于 CSS3 和 XPath 的。對(duì) CSS3 和 XPath 了解的越多，使用 jQuery 時(shí)就越加得心應(yīng)手。
CSS3 包含一些并不是所有瀏覽器都支持的語(yǔ)法，因此我們很少使用它。然而，我們?nèi)匀豢梢栽?jQuery 中使用 CSS3 選擇元素，因?yàn)?jQuery 具備自己的自定義選擇器引擎。比方說(shuō)，要在表格中的每一個(gè)空列中都添加一個(gè)橫杠，可以使用：:empty 偽選擇器（pseudo-selector）：
$('td:empty').html('-');

如果需要找出所有不含特定類的元素呢？ CSS3 同樣提供了一個(gè)語(yǔ)法可以完成這個(gè)目的，使用 :not 偽選擇器： 如下代碼顯示了如何隱藏所有不含 required 類的輸入內(nèi)容：
$('input:not(.required)').hide();

與在 CSS 中一樣，可以使用逗號(hào)將多個(gè)選擇器連接成一個(gè)。下面是一個(gè)同時(shí)隱藏頁(yè)面上所有類型列表的簡(jiǎn)單示例：
$('ul, ol, dl').hide();

XPath 是一種功能強(qiáng)大的語(yǔ)法，用于在文檔中搜尋元素。它與 CSS 稍有區(qū)別，不過(guò)它能實(shí)現(xiàn)的功能略多于 CSS。要在所有復(fù)選框的父元素中添加一個(gè)邊框，可以使用 XPath 的 /.. 語(yǔ)法：
$("input:checkbox/..").css('border', '1px solid #777');

jQuery 中也加入了一些 CSS 和 XPath 中沒(méi)有的選擇器。比方說(shuō)，要使一個(gè)表更具可讀性，通?？梢栽诒砀竦钠鏀?shù)行或偶數(shù)行中附加一個(gè)不同的類名 —— 也可以稱作把表分段（striping）。使用 jQuery 不費(fèi)吹灰之力就可以做到這點(diǎn)，這需要?dú)w功于 odd 偽選擇器。下面這個(gè)例子使用 striped 類改變了表格中所有奇數(shù)行的背景顏色：
$('table.striped > tr:odd').css('background', '#999999');

我們可以看到強(qiáng)大的 jQuery 選擇器是如何簡(jiǎn)化代碼的。不論您想處理什么樣的元素，不管這個(gè)元素是具體的還是模糊的，都有可能找到一種方法使用一個(gè) jQuery選擇器對(duì)它們進(jìn)行定義。

使用插件擴(kuò)展 jQuery
與大多數(shù)軟件不同，使用一個(gè)復(fù)雜的 API 為 jQuery 編寫(xiě)插件并不是非常困難。事實(shí)上，jQuery 插件非常易于編寫(xiě)，您甚至希望編寫(xiě)一些插件來(lái)使代碼更加簡(jiǎn)單。下面是可以編寫(xiě)的最基本的 jQuery 插件：
$.fn.donothing = function(){
return this;
};

雖然非常簡(jiǎn)單，但是還是需要對(duì)這個(gè)插件進(jìn)行一些解釋。首先，如果要為每一個(gè) jQuery 對(duì)象添加一個(gè)函數(shù)，必須把該函數(shù)指派給 $.fn。第二，這個(gè)函數(shù)必須要返回一個(gè) this（jQuery 對(duì)象），這樣才不至于打斷 方法鏈接（method chaining）。
可以輕松地在這個(gè)示例之上構(gòu)建。要編寫(xiě)一個(gè)更換背景顏色的插件，以替代使用 css('background')，可以使用下面的代碼：
$.fn.background = function(bg){
return this.css('background', bg);
};
清注意，可以只從 css() 返回值，因?yàn)橐呀?jīng)返回了 jQuery 對(duì)象。因此，方法鏈接（method chaining）仍然運(yùn)作良好。
我建議在需要重復(fù)工作的時(shí)候使用 jQuery 插件。比方說(shuō)，如果您需要使用 each() 函數(shù)反復(fù)執(zhí)行相同的操作，那么可以使用一個(gè)插件來(lái)完成。
由于 jQuery 插件相當(dāng)易于編寫(xiě)，所以有上百種可供你選擇使用。jQuery 提供的插件可用于制表、圓角、滑動(dòng)顯示、工具提示、日期選擇器，以及我們可以想到的一切效果。
最為復(fù)雜、使用最為廣泛的插件要屬界面（Interface），它是一種動(dòng)畫(huà)插件，用于處理排序、拖放功能、復(fù)雜效果、以及其它有趣和復(fù)雜的用戶界面（User Interface，UI）。界面對(duì)于 jQuery 來(lái)說(shuō)就如 Scriptaculous 對(duì)于 Prototype 一樣。
表單插件也同樣流行且非常有用，通過(guò)它可以使用 Ajax 在后臺(tái)中輕松地提交表單。這個(gè)插件用于處理一些常見(jiàn)的情況：您需要截獲某個(gè)表單的提交事件，找出所有不同的輸入字段，并使用這些字段構(gòu)造一個(gè) Ajax 調(diào)用。

以上是“如何使用jQuery簡(jiǎn)化Ajax開(kāi)發(fā)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！