jQuery讓Ajax變得異常簡單
使用jQuery,Ajax恐怕不能變得再簡單了. jQuery有一系列的函數,可以使簡單的事情變得真正簡單,讓復雜的事情也能變得盡可能
的簡單.
Ajax的一個一般用法就是加載一段html代碼到頁面上的某一區域. 要實現這個,你只要簡單的選中這個元素,然后使用load()函數.
下面是個例子,用來更新一些統計信息.
$('#stats').load('stats.html');通常,你可能需要向服務器端的頁面傳遞一些參數. 你可能猜到了, 使用jQuery來實現的話會十分簡單.你可以選擇使用$.post()或者$.get(), 當然要根據你的具體需要. 如果需要, 你可以傳遞一個可選的數據對象和一個回調函數.Listing4是一個發送數據以及使用回調函數的簡單例子:
[url=]Listing 4. Sending data to a page with Ajax[/url]
$.post('save.cgi', ...{
text: 'my string',
number: 23
}, function() ...{
alert('Your data has been saved.');
});
如果你真的想要一些復雜的Ajax代碼,那就是用$.ajax()函數. 你可以指定數據類型為xml, html, script或者json, jQuery 會為你自動準備好結果一遍你的回調函數能夠立即使用這些數據. 你還可以設定 beforeSend, error, success, 以及 complete 回調函數來給用戶一些ajax體驗的更多提示信息. 另外,還有一些參數,可以讓你設置ajax請求的超時時間,或者一個頁面的"最后更改"狀態. Listing5展示了一個獲取xml文檔并使用我上面提到的一些參數的簡單例子:
[url=]Listing 5. Complex Ajax made simple with $.ajax()[/url]
$.ajax(...{
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function()...{
alert('Error loading XML document');
},
success: function(xml)...{
// do something with xml
}
});
當你成功的獲得xml反饋的時候, 你可以使用jQuery來遍歷xml文檔,就像你操作html的方式一樣.這使操作一個xml文件以及整合內容到頁面上變得十分的簡單. Listing6 擴展了success函數,根據xml文檔里的每個<item>在頁面上增加一個了list(列表)條目.
[url=]Listing 6. Working with XML using jQuery[/url]
success: function(xml)...{
$(xml).find('item').each(function()...{
var item_text = $(this).text();
$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}
