Chinaunix首页 | 论坛 | 博客
  • 博客访问: 836629
  • 博文数量: 190
  • 博客积分: 2991
  • 博客等级: 少校
  • 技术积分: 2400
  • 用 户 组: 普通用户
  • 注册时间: 2012-09-24 18:11
文章分类

全部博文(190)

文章存档

2015年(3)

2014年(1)

2013年(65)

2012年(121)

我的朋友

分类: 系统运维

2012-10-28 11:34:54

上一篇用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页面代码如下:

复制代码
复制代码

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 = "
idnameageaddress
" + id + "" + name + "" + age + "" + address + "
"; $("#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 = ""; 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 += ""; } $("#body1 table:eq(0)").remove(); $("#body1").append(html); }) }) });
复制代码

怎么样,json数据格式获取还是非常方便吧,因为其就是javascript对象的形式。

好了,三种数据格式的ajax实现都写完了,肚子饿了,吃个饭去,O(∩_∩)O哈哈~

阅读(1005) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
idnamehomeAddresscompanyAddress
" + id + "" + name + "" + homeAddress + "" + companyAddress + "