DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> jQuery ajax 例子
jQuery ajax 例子
編輯: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 文檔變得相當地容易,並且把內容和數據集成到了您的 Web 站點裡面。清

單 6 顯示了 success 函數的一個擴展,它為 XML 中的每個 元素都添加了一個列表項到 Web 頁面中。

清單 6. 使用 jQuery 處理 XML 文檔
success: function(XML){
$(XML).find(

’item’).each(function(){
var item_text = $(this).text();
$(’
‘)
.Html(item_text)
.appendTo(’ol’);
});
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved