现在的位置: 首页 > 综合 > 正文

jQuery应用(二)–jQuery让Ajax变得异常简单

2013年02月11日 ⁄ 综合 ⁄ 共 1471字 ⁄ 字号 评论关闭

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

 

百思特网络 www.bestwl.com

抱歉!评论已关闭.