使用 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 文檔變得相當地容易,並且把內容和數據集成到了您的 Web 站點裏面。清單 6 顯示了 success 函數的一個擴展,它爲 XML 中的每個 元素都添加了一個列表項到 Web 頁面中。
清單 6. 使用 jQuery 處理 XML 文檔
success: function(xml){
$(xml).find(‘item’).each(function(){
var item_text = $(this).text();
$(‘ li‘)
.html(item_text)
.appendTo(‘ol’);
});
}