YUI + struts2实现基于JSON通讯的AJAX例子

 近来做了个小例子，前端使用YUI，后端使用struts2+spring，前后端完全通过AJAX技术完成数据交换，没有传统的页面提交，交换的数据格式采用JSON。为了处理 JSON，后端使用了json-lib。

不知道大家现在在项目中使用AJAX到什么程度，如果全面使用AJAX而弃用传统的提交的话，大家觉得是否可取？有什么地方是不适用的？欢迎大家讨论一下。

 

下面贴出我做的例子的部分代码。
示例程序演示的是前端接收用户输入的人员信息，然后以JSON格式传输到后端，后端接收后，转成java对象然后进行处理，处理结果再以JSON格式传回前端。
人员信息的类如下：

1. public class Person {
2.     private String name;
3.     private Date birthday;
5.     public void setName(String name) {
6.         this.name = name;
7.     }
9.     public String getName() {
10.         return name;
11.     }
13.     public void setBirthday(Date birthday) {
14.         this.birthday = birthday;
15.     }
17.     public Date getBirthday() {
18.         return birthday;
19.     }
20. }

处理结果信息的类如下：

1. public class JSONResult {
2.     static public final int RETCODE_OK = 0;
3.     static public final int RETCODE_ERR = -1;
4.     
5.     private int returnCode;
6.     private String errMessage;
8.     public JSONResult(int returnCode) {
9.         this.returnCode = returnCode;
10.     }
11.     
12.     public JSONResult(int returnCode, String errMessage) {
13.         this.returnCode = returnCode;
14.         this.errMessage = errMessage;
15.     }
16.     
17.     public void setReturnCode(int returnCode) {
18.         this.returnCode = returnCode;
19.     }
21.     public int getReturnCode() {
22.         return returnCode;
23.     }
24.     
25.     public void setErrMessage(String errMessage) {
26.         this.errMessage = errMessage;
27.     }
29.     public String getErrMessage() {
30.         return errMessage;
31.     }
32. }

前端页面如下图：人员信息实际程序中只用到了姓名和生日。

 

前端AJAX通讯使用的是YUI 的Connection Manager，JSON处理使用的是YUI 的 JSON。
【确定】按钮按下后，将用户输入的数据转换成JSON格式，然后调用struts中定义的RegisterPersonAction.action。【确定】按钮上绑定的处理函数如下：

1. function addButton_click() {
2.     //读取人员信息
3.     var person = new Object();
4.     person.name = document.getElementById("fullname").value;
5.     person.birthday = document.getElementById("birthday").value;
6.     
7.     //转换为JSON格式，并以"personData"做为属性名
8.     var strPerson = YAHOO.lang.JSON.stringify(person);
9.     var postData = "personData=" + strPerson;
10.     
11.     //准备回调函数（相应处理函数见下文）
12.     var callback = {
13.         success :responseSuccess,
14.         failure :responseFailure,
15.         argument : null
16.     };
18.     //AJAX异步调用
19.     var request = YAHOO.util.Connect.asyncRequest('POST', 'RegisterPersonAction.action', callback, postData);
20. }

回调函数中将返回的JSON数据转成对象，然后根据返回值进行提示。代码如下：

1. function responseSuccess(o) {
2.     /* o.tId
3.      * o.status
4.      * o.statusText
5.      * o.getResponseHeader[ ]
6.      * o.getAllResponseHeaders
7.      * o.responseText
8.      * o.responseXML
9.      * o.argument
10.      */
11.     
12.     //将返回的JSON串转成对象
13.     var ret = YAHOO.lang.JSON.parse(o.responseText);
14.     
15.     if (ret.returnCode == 0) { //successed
16.         alert("成功");
17.     } else { //failed
18.         alert("失败 ：" + ret.errMessage);
19.     }
20. };
22. function responseFailure(o) {
23.     alert("服务器处理失败 : " + o.statusText);
24. }

struts.xml中对ajax异步调用中的url这样定义：

1. <action name="RegisterPersonAction" method="register" class="personAction">
2.     <result type="stream">
3.         <param name="contentType">text/html</param>
4.         <param name="inputName">inputStream</param>
5.     </result>
6. </action>

后台的PersonAction代码如下。其中属性personData用于接收来自前端的人员数据，属性inputStream用于向前端返回JSON格式的处理结果。

1. public class PersonAction extends ActionSupport {
2.     private InputStream inputStream;
3.     
4.     public void setInputStream(InputStream inputStream) {
5.         this.inputStream = inputStream;
6.     }
8.     public InputStream getInputStream() {
9.         return inputStream;
10.     }
12.     private PersonService personService;
13.     
14.     public void setPersonService(PersonService personService) {
15.         this.personService = personService;
16.     }
18.     public PersonService getPersonService() {
19.         return personService;
20.     }
22.     private String personData;
23.     
24.     public void setPersonData(String personData) {
25.         this.personData = personData;
26.     }
28.     public String getPersonData() {
29.         return personData;
30.     }
32.     public String register() {
33.         //将JSON字符串转成java的Person对象
34.         JSONObject jsonPerson = JSONObject.fromObject(personData);
35.         String[] dateFormats = new String[] {"yyyy/MM/dd"};
36.         JSONUtils.getMorpherRegistry().registerMorpher(new DateMorpher(dateFormats));
37.         Person person = (Person)JSONObject.toBean(jsonPerson, Person.class);
38.         
39.         //处理人员数据，并根据处理结果生成返回对象
40.         JSONResult ret;
41.         try {
42.             personService.register(person);
43.             ret = new JSONResult(JSONResult.RETCODE_OK);
44.         } catch (BusinessException e) {
45.             ret = new JSONResult(JSONResult.RETCODE_ERR, e.getMessage());
46.         }
47.         
48.         //将返回对象转成JSON字符串
49.         JSONObject jsonRet = JSONObject.fromObject(ret);
50.         String strRet = jsonRet.toString();
51.         
52.         //返回JSON数据
53.         try {
54.             setInputStream(new ByteArrayInputStream(strRet.getBytes("utf-8")));
55.         } catch (UnsupportedEncodingException e) {
56.             //略：错误处理
57.         }
58.         
59.         return SUCCESS;
60.     }
61. }