快捷導(dǎo)航

用jQuery簡化Ajax開發(fā)實(shí)現(xiàn)方法第1/2頁

更新時(shí)間：2010年04月05日 23:39:03 作者：

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

一些簡單的代碼簡化

下面是一個(gè)簡單示例，它說明了 jQuery 對(duì)代碼的影響。要執(zhí)行一些真正簡單和常見的任務(wù)，比方說為頁面的某一區(qū)域中的每個(gè)鏈接附加一個(gè)單擊（click）事件，您可以使用純 JavaScript 代碼和 DOM 腳本來實(shí)現(xiàn)，如清單 1 所示。

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

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

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

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

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

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

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

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

 
$(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ù)。這很簡單，只需向 $() 函數(shù)傳遞一個(gè)函數(shù)就可以了：

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

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

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

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

 
$('<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)這一目的：使 Ajax 變得簡單

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

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

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

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

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

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

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

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

如果您確實(shí)需要編寫一些復(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è)置頁面 “最近一次修改” 的狀態(tài)。清單 5 顯示了一個(gè)使用一些我所提到的參數(shù)檢索 XML 文檔的示例。
清單 5. $.ajax() 使 Ajax 由復(fù)雜變簡單

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

 
$.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 頁面中。
清單 6. 使用 jQuery 處理 XML 文檔

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

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

12 下一頁閱讀全文