jQuery ajax 例子

使用 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 中的每個 元素都添加了一個清單項目到 Web 頁面中。

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

success: function(xml){

$(xml).find(‘item’).each(function(){

var item_text = $(this).text();

$(‘ li‘)

.html(item_text)

.appendTo(‘ol’);

});

}