Ajax實現–jQuery

來源:互聯網
上載者:User

上一篇用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哈哈~

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.