日期:2014-05-16  浏览次数:20563 次

Ajax实现--jQuery

上一篇用javascript实现了简单的Ajax技术,我们可以看到用单纯的javascript来实现ajax还是比较复杂的,因为要针对不同的浏览器对其xmlHttpRequest要以不同的实现方式来实现,既然jQuery大大强化了javascript,那么有没有对ajax实现做一定的简化呢?答案是必须的,而且jQuery对ajax提供了非常强大的支持,下面我就分别以三种数据(普通html,xml,json)格式的响应来看一下jquery的ajax实现(这里我只是贴出实现ajax部分的代码,其余服务端代码以及jsp页面代码就不贴啦,如有需要可以留下邮箱,我可以发送源码给你们):

1.普通的html数据格式,这个我用jquery的$.ajax()函数来实现,(jquery提供了三种函数,$.ajax(), $.get(), $.post(),从名字我们就能看出来实现方式)

ajax.jsp页面代码如下:

复制代码
    <script type="text/javascript" src="scripts/jquery-1.8.1.js"></script>
    <script type="text/javascript">
    /*
        $(function()
        {
            $("#button1").click(function()
            {
                $.ajax(
                {
                    type: "GET",
                    url: "AjaxServlet",
                    success: function(returnedData)
                    {
                            $("#value").val(returnedData);
                    },
                    data: {"param1": $("#param1").val(), "param2": $("#param2").val()}
                    
                });
            });        
        })
    */
    
    $(function()
    {
        $("#button1").click(function()
        {
            $.ajax({  
                type: "POST",    //请求方式
                url: "AjaxServlet",  //请求的url
                dataType: "html",  //响应数据格式
                data: {'param1': $("#param1").val(), 'param2': $("#param2").val()},   //发送请求时携带的参数,以javascript对象形式写
                success: function(returnedData){  //响应成功回调函数,returnedDate会响应过来的数据,不管是什么格式都是returnedDate
                    $("#value").val(returnedData);
                }
                
            });
        });
    });
    
    </script>
复制代码

2.xml数据格式,这里使用的是jquery的$.post()方式

这里服务器端要注意一下,因为响应过来的是xml格式,所以服务端响应格式需要修改一下:

复制代码
        //这段代码设置响应的数据格式
                resp.setContentType("text/xml charset=utf-8");
        //设置没有缓存
        resp.setHeader("pragma", "no-cache");
        resp.setHeader("cache-control", "no-cache");
        
        PrintWriter out = resp.getWriter();
        
        OutputFormat format = new OutputFormat();
        XMLWriter xmlWriter = new