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哈哈~