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');
});
}
