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 XMLWriter(out, format.createPrettyPrint());
        xmlWriter.write(document);        

前端xml.jsp代碼如下：

            $("#button").click(function()
            {
                $.post("XMLServlet",
                {
                    "name": $("select").val()
                },
                function(returnedData, status)
                {
                    var id = $(returnedData).find("id").text();
                    var name = $(returnedData).find("name").text();
                    var age = $(returnedData).find("age").text();
                    var address = $(returnedData).find("address").text();
                    
                    var html = "<table border='1' align='center' width='50%'><tr><th>id</th><th>name</th><th>age</th><th>address</th></tr><tr><th>" + id + "</th><th>" + name + "</th><th>" + age + "</th><th>" + address + "</th></tr></table>";
                    
                    $("#theBody table:eq(0)").remove();
                    $("#theBody").append(html);
                })
            })

呵呵，代碼是不是比$.ajax()這種方式簡化了些呢，因為響應過來的returnedDate是xml格式，jquery提供了find()方法直接可以找到xml對應的子元素，然后調用text()方法得到子元素中的value值。

3.JSON數據格式，使用的是$.get()方式，在jquery里面強烈建議使用這種格式來傳輸數據，因為其格式完全匹配javascript。

同樣，服務器端代碼需要坐下修改(這里產生json數據格式我用的是google提供的gson.jar):

        //如果返回的是xml就寫成 "text/xml"， 如果返回的是json則要寫成 "application/json"
        resp.setContentType("application/json; charset=utf-8");
        //設置沒有緩存
        resp.setHeader("pragma", "no-cache");
        resp.setHeader("cache-control", "no-cache");
        
        PrintWriter out = resp.getWriter();
        
        Gson gson = new Gson();
        
        String result = gson.toJson(list);
        
//        System.out.println(result);
        
        out.println(result);
        
        out.flush();

同樣前端的json.jsp代碼如下：

        $(function()
        {
            $("#button1").click(function()
            {
                $.get("GsonServlet", {}, function(returnedData, status)
                {
                    var html = "<table border='1' align='center' width='50%'><tr><th>id</th><th>name</th><th>homeAddress</th><th>companyAddress</th></tr>";
                    
                    for(var i = 0; i < returnedData.length; i++)
                    {
                        var id = returnedData[i].id;
                        var name = returnedData[i].name;
                        var homeAddress = returnedData[i].address.homeAddress;
                        var companyAddress = returnedData[i].address.companyAddress;
                        
                        html += "<tr><th>" + id + "</th><th>" + name + "</th><th>" + homeAddress + "</th><th>" + companyAddress + "</th></tr>";
                    }
                    $("#body1 table:eq(0)").remove();
                    $("#body1").append(html);
                })
            })
        });

怎么樣，json數據格式獲取還是非常方便吧，因為其就是javascript對象的形式。

好了，三種數據格式的ajax實現都寫完了，肚子餓了，吃個飯去，O(∩_∩)O哈哈~