日期:2014-05-16 浏览次数:20573 次
上一篇用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