近来做了个小例子,前端使用YUI,后端使用struts2+spring,前后端完全通过AJAX技术完成数据交换,没有传统的页面提交,交换的数据格式采用JSON。为了处理 JSON,后端使用了json-lib。
不知道大家现在在项目中使用AJAX到什么程度,如果全面使用AJAX而弃用传统的提交的话,大家觉得是否可取?有什么地方是不适用的?欢迎大家讨论一下。
下面贴出我做的例子的部分代码。
示例程序演示的是前端接收用户输入的人员信息,然后以JSON格式传输到后端,后端接收后,转成java对象然后进行处理,处理结果再以JSON格式传回前端。
人员信息的类如下:
public class Person {
private String name;
private Date birthday;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public Date getBirthday() {
return birthday;
}
}
处理结果信息的类如下:
public class JSONResult {
static public final int RETCODE_OK = 0;
static public final int RETCODE_ERR = -1;
private int returnCode;
private String errMessage;
public JSONResult(int returnCode) {
this.returnCode = returnCode;
}
public JSONResult(int returnCode, String errMessage) {
this.returnCode = returnCode;
this.errMessage = errMessage;
}
public void setReturnCode(int returnCode) {
this.returnCode = returnCode;
}
public int getReturnCode() {
return returnCode;
}
public void setErrMessage(String errMessage) {
this.errMessage = errMessage;
}
public String getErrMessage() {
return errMessage;
}
}
前端页面如下图:人员信息实际程序中只用到了姓名和生日。
前端AJAX通讯使用的是YUI 的Connection Manager,JSON处理使用的是YUI 的 JSON。
【确定】按钮按下后,将用户输入的数据转换成JSON格式,然后调用struts中定义的RegisterPersonAction.action。【确定】按钮上绑定的处理函数如下:
function addButton_click() { //读取人员信息 var person = new Object(); person.name = document.getElementById("fullname").value; person.birthday = document.getElementById("birthday").value; //转换为JSON格式,并以"personData"做为属性名 var strPerson = YAHOO.lang.JSON.stringify(person); var postData = "personData=" + strPerson; //准备回调函数(相应处理函数见下文) var callback = { success :responseSuccess, failure :responseFailure, argument : null }; //AJAX异步调用 var request = YAHOO.util.Connect.asyncRequest('POST', 'RegisterPersonAction.action', callback, postData); }
回调函数中将返回的JSON数据转成对象,然后根据返回值进行提示。代码如下:
function responseSuccess(o) { /* o.tId * o.status * o.statusText * o.getResponseHeader[ ] * o.getAllResponseHeaders * o.responseText * o.responseXML * o.argument */ //将返回的JSON串转成对象 var ret = YAHOO.lang.JSON.parse(o.responseText); if (ret.returnCode == 0) { //successed alert("成功"); } else { //failed alert("失败 :" + ret.errMessage); } }; function responseFailure(o) { alert("服务器处理失败 : " + o.statusText); }
struts.xml中对ajax异步调用中的url这样定义:
<action method="register"> <result type="stream"> <param>text/html</param> <param>inputStream</param> </result> </action>
后台的PersonAction代码如下。其中属性personData用于接收来自前端的人员数据,属性inputStream用于向前端返回JSON格式的处理结果。
public class PersonAction extends ActionSupport { private InputStream inputStream; public void setInputStream(InputStream inputStream) { this.inputStream = inputStream; } public InputStream getInputStream() { return inputStream; } private PersonService personService; public void setPersonService(PersonService personService) { this.personService = personService; } public PersonService getPersonService() { return personService; } private String personData; public void setPersonData(String personData) { this.personData = personData; } public String getPersonData() { return personData; } public String register() { //将JSON字符串转成java的Person对象 JSONObject jsonPerson = JSONObject.fromObject(personData); String[] dateFormats = new String[] {"yyyy/MM/dd"}; JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(dateFormats)); Person person = (Person)JSONObject.toBean(jsonPerson, Person.class); //处理人员数据,并根据处理结果生成返回对象 JSONResult ret; try { personService.register(person); ret = new JSONResult(JSONResult.RETCODE_OK); } catch (BusinessException e) { ret = new JSONResult(JSONResult.RETCODE_ERR, e.getMessage()); } //将返回对象转成JSON字符串 JSONObject jsonRet = JSONObject.fromObject(ret); String strRet = jsonRet.toString(); //返回JSON数据 try { setInputStream(new ByteArrayInputStream(strRet.getBytes("utf-8"))); } catch (UnsupportedEncodingException e) { //略:错误处理 } return SUCCESS; } }
YUI + struts2实现基于JSON通讯的AJAX例子