springMVC入门（六）------json交互与RESTFul风格支持
简介
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。由于其简单易用，目前常用来通过AJAX与后台进行交互。springMVC对于接收、发送JSON数据也提供了支持，并能方便的将JSON数据与对象进行相互转换。
环境准备
由于springMVC对JSON的支持是基于jackson的，因此需引入jar包
配置pom.xml
<!-- Jackson -->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.4</version>
</dependency>
对springMVC的处理器适配器注入JSON转换器
<!-- 处理器适配器配置 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<list>
<!-- 配置jackson转换器 -->
<bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>
</list>
</property>
</bean>
若使用的是MVC注解驱动，则无需再单独配置
<mvc:annotation-driven></mvc:annotation-driven>
测试代码
@RequestBody注解可将请求的JSON数据自动转换为Controller方法的形参
@ResponseBody注解可将返回的对象转换成JSON数据输出
@RequestMapping("/queryAccount.action")
@ResponseBody
//@RequestBody 前提：请求ContentType必须是application/json，不能是application/x-www-form-urlencoded或其它
public Account queryAccount(@RequestBody User user) throws Exception {
System.out.println(user.getUsername());
System.out.println(user.getPassword());
Account account = new Account();
account.setId("123");
account.setName("nlskyfree");
account.setMoney("3423.43");
return account;
}
JSP页面，使用原生AJAX发出请求
需引入json2.js进行js上的JSON数据与对象的转换
<html>
<script type="text/javascript" src="/springMVC/json2.js"></script>
<script type="text/javascript">
var xmlHttp;
function updateData() {
//4：响应已完成；您可以获取并使用服务器的响应了。
if(xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
alert(response);
var obj = JSON.parse(response);
document.getElementById(3).value = obj.id;
document.getElementById(4).value = obj.name;
document.getElementById(5).value = obj.money;
}
}
//AJAX提交数据
function submit() {
//获得提交数据
var username = document.getElementById(1).value;
var password = document.getElementById(2).value;
//发出AJAX请求
xmlHttp = getXMLHttpRequest();
var url = "/springMVC/queryAccount.action";
//开启连接
xmlHttp.open("POST", url, true);
//返回函数
xmlHttp.onreadystatechange = updateData;
//设置数据为JSON格式
xmlHttp.setRequestHeader("Content-Type", "application/json");
var data = {"username": username, "password" : password};
//发送请求
xmlHttp.send(JSON.stringify(data));
}
//兼容各浏览器获取XMLHttpRequest
function getXMLHttpRequest() {
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
</script>
<body>
<h2>Hello World!</h2>
用户名：<input id="1" name="username" type="text"/>
密码：<input id="2" name="password" type="password"/><br/>
<br/>
<input type="button" value="查 询" onclick="submit();"/><br/>
<br/>
账户编号<input id="3" type="text"/><br/>
账户名称<input id="4" type="text"/><br/>
账户金额<input id="5" type="text"/>
</body>
</html>
结果：
