Ajax implementation-jQuery

In the previous article, javascript was used to implement simple Ajax technology. We can see that it is complicated to use javascript to implement ajax, because different browsers need to implement xmlHttpRequest in different ways. Since jQuery greatly reinforces javascript, is there any simplification of ajax implementation? The answer is required, and jQuery provides very powerful support for ajax. Below I will separate three types of data (Common html, xml, json) response in the format. Let's take a look at jquery's ajax implementation (Here I only paste the code for implementing ajax, and leave the rest of the server code and jsp page code unpasted. If necessary, leave a mailbox and I can send the source code to you.):

1.Common html data formatI use jquery's$. Ajax ()(Jquery provides three functions,$. Ajax (), $. get (), $. post (),We can see the implementation method from the name)

The ajax. jsp page code is as follows:

<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", // request url: "AjaxServlet", // request url dataType: "html", // response data format data: {'param1': $ ("# param1 "). val (), 'param2': $ ("# param2 "). val ()}, // The parameters carried when the request is sent, write success: function (returnedData) in the form of a javascript Object {// callback function for successful response, returnedDate will return the data, whatever the format is returnedDate $ ("# value "). val (returnedData) ;}}) ;};}); </script>

2.Xml data format,Jquery is used here.$. Post ()Method

Here, the server should pay attention to this. Because the response is in xml format, the server must modify the response format:

// This Code sets the response data format resp. setContentType ("text/xml charset = UTF-8"); // you can specify whether resp is cached. 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 );

The front-end xml. jsp code is as follows:

            $("#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);                })            })

Is the code comparable?$. Ajax() This method is simplified because the response returnedDate is in xml format, and jquery providesFind() Method, you can find the child element corresponding to xml, and then callText() Method to obtain the value in the child element.

3.JSON Data Format, Which is$. Get ()In jquery, we strongly recommend that you use this format to transmit data, because it fully matches javascript.

Similarly, the server code needs to be modified. (here, the json data format is generated. I use the one provided by google.Gson. jar):

// If xml is returned, it is written as "text/xml". If json is returned, it is written as "application/json" resp. setContentType ("application/json; charset = UTF-8"); // you can specify whether resp is cached. 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 ();

The same front-end json. jsp code is as follows:

        $(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);                })            })        });

The json data format is very convenient, because it is the form of javascript objects.

All right, the ajax Implementation of the three data formats is complete. If you are hungry, you can have a meal ~