用jQuery簡化Ajax開發實現方法第1/2頁

一些簡單的代碼簡化

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

清單 1 ：沒有使用 jQuery 的 DOM 指令碼
複製代碼 代碼如下: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 實現的相同的功能。
清單 2. 使用了 jQuery 的 DOM 指令碼
複製代碼 代碼如下:$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});

是不是很神奇？ 使用 jQuery，您可以把握問題的要點，只讓代碼實現您想要的功能，而省去了一些繁瑣的過程。無需對元素進行迴圈，click() 函數將完成這些操作。同樣也不需要進行多個 DOM 指令碼調用。您只需要使用一個簡短的字串對所需的元素進行定義即可。
理解這一代碼的工作原理可能會有一點複雜。首先，我們使用了 $() 函數 —— jQuery 中功能最強大的函數。通常，我們都是使用這個函數從文檔中選擇元素。在本例中，一個包含有一些層疊樣式表（Cascading Style Sheet，CSS）文法的字串被傳遞給函數，然後 jQuery 儘可能高效地把這些元素找出來。
如果您具備 CSS 選取器的基本知識，那麼應該很熟悉這些文法。在 清單 2 中，#external_links 用於檢索 id 為 external_links 的元素。a 後的空格表示 jQuery 需要檢索 external_links 元素中的所有 <a> 元素。用英語說起來非常繞口，甚至在 DOM 指令碼中也是這樣，但是在 CSS 中這再簡單不過了
$() 函數返回一個含有所有與 CSS 選取器匹配的元素的 jQuery 對象。jQuery 對象 類似於數組，但是它附帶有大量特殊的 jQuery 函數。比方說，您可以通過調用 click 函數把 click 處理函數指定給 jQuery 對象中的所有元素。
還可以向 $() 函數傳遞一個元素或者一個元素數組，該函數將把這些元素封裝在一個 jQuery 對象中。您可能會想要使用這個功能將 jQuery 函數用於一些對象，比方說 window 對象。例如，我們通常會像下面這樣把函數分配給載入事件： 複製代碼 代碼如下: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）就可以了。通過在文檔中建立特殊的 ready 事件，jQuery 解決了這個問題，方法如下： 複製代碼 代碼如下:$(document).ready(function() {
// do this stuff when the HTML is all ready
});

這個代碼圍繞 document 元素建立了一個 jQuery 對象，然後建立一個函數，用於在 HTML DOM 文檔就緒的時候調用執行個體。可以根據需要任意地調用這個函數。並且能夠以真正的 jQuery 格式，使用捷徑調用這個函數。這很簡單，只需向 $() 函數傳遞一個函數就可以了： 複製代碼 代碼如下:$(function() {
// run this when the HTML is done downloading
});

到目前以止，我已經向大家介紹了 $() 函數的三種用法。第四種方法可以使用字串來建立元素。結果會產生一個包含該元素的 jQuery 對象。清單 3 顯示的樣本在頁面中添加了一個段落。
清單 3. 建立和附加一個簡單的段落
複製代碼 代碼如下:$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");

在前一個例子中您可能已經注意到，jQuery 中的另一個功能強大的特性就是方法連結（method chaining）。每次對 jQuery 對象調用方法時，方法都會返回相同的 jQuery 對象。這意味著如果您需要對 jQuery 對象調用多個方法，那麼您不必重新鍵入選取器就可以實現這一目的：使 Ajax 變得簡單 複製代碼 代碼如下:$('#message').css('background', 'yellow').html('Hello!').show();

使用 jQuery 將使 Ajax 變得及其簡單。jQuery 提供有一些函數，可以使簡單的工作變得更加簡單，複雜的工作變得不再複雜。
Ajax 最常見的用法就是把一塊 HTML 程式碼載入到頁面的某個地區中去。為此，只需簡單地選擇所需的元素，然後使用 load() 函數即可。下面是一個用於更新統計資料的樣本： 複製代碼 代碼如下:$('#stats').load('stats.html');

通常，我們只需簡單地把一些參數傳遞給伺服器中的某個頁面。正如您所預料的，使用 jQuery 實現這一操作非常地簡單。您可以使用 $.post() 或者 $.get()，這由所需的方法決定。如果需要的話，您還可以傳遞一個可選的資料對象和回呼函數。清單 4 顯示了一個發送資料和使用回調的簡單樣本。
清單 4. 使用 Ajax 向頁面發送資料 複製代碼 代碼如下:$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});

如果您確實需要編寫一些複雜的 Ajax 指令碼，那麼需要用到 $.ajax() 函數。您可以指定 xml、script、html 或者 json，jQuery 將自動為回呼函數準備合適的結果，這樣您便可以立即使用該結果。還可以指定 beforeSend、error、success 或者 complete 回呼函數，向使用者提供更多有關 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 文檔變得相當地容易，並且把內容和Data Integration到了您的 Web 網站裡面。清單 6 顯示了 success 函數的一個擴充，它為 XML 中的每個 <item> 元素都添加了一個清單項目到 Web 頁面中。
清單 6. 使用 jQuery 處理 XML 文檔
複製代碼 代碼如下:success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}