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

jQuery让Ajax变得异常简单

使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能
的简单.

Ajax的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.
下面是个例子,用来更新一些统计信息.

$('#stats').load('stats.html');通常,你可能需要向服务器端的页面传递一些参数. 你可能猜到了, 使用jQuery来实现的话会十分简单.你可以选择使用$.post()或者$.get(), 当然要根据你的具体需要. 如果需要, 你可以传递一个可选的数据对象和一个回调函数.Listing4是一个发送数据以及使用回调函数的简单例子:

Listing 4. Sending data to a page with Ajax




$.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文档并使用我上面提到的一些参数的简单例子:

Listing 5. Complex Ajax made simple with $.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


    }


});

当你成功的获得xml反馈的时候, 你可以使用jQuery来遍历xml文档,就像你操作html的方式一样.这使操作一个xml文件以及整合内容到页面上变得十分的简单. Listing6 扩展了success函数,根据xml文档里的每个<item>在页面上增加一个了list(列表)条目.

Listing 6. Working with XML using jQuery




success: function(xml)...{




    $(xml).find('item').each(function()...{


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




        $('<li></li>')


            .html(item_text)


            .appendTo('ol');


    });


}