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

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

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

下面贴出我做的例子的部分代码。
示例程序演示的是前端接收用户输入的人员信息，然后以JSON格式传输到后端，后端接收后，转成java对象然后进行处理，处理结果再以JSON格式传回前端。
人员信息的类如下：
Java代码 复制代码
  1. public class Person {   
  2.     private String name;   
  3.     private Date birthday;   
  4.   
  5.     public void setName(String name) {   
  6.         this.name = name;   
  7.     }   
  8.   
  9.     public String getName() {   
  10.         return name;   
  11.     }   
  12.   
  13.     public void setBirthday(Date birthday) {   
  14.         this.birthday = birthday;   
  15.     }   
  16.   
  17.     public Date getBirthday() {   
  18.         return birthday;   
  19.     }   
  20. }  


处理结果信息的类如下：
Java代码 复制代码
  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;   
  7.   
  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.     }   
  20.   
  21.     public int getReturnCode() {   
  22.         return returnCode;   
  23.     }   
  24.        
  25.     public void setErrMessage(String errMessage) {   
  26.         this.errMessage = errMessage;   
  27.     }   
  28.   
  29.     public String getErrMessage() {   
  30.         return errMessage;   
  31.     }   
  32. }  


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


前端AJAX通讯使用的是YUI 的Connection Manager，JSON处理使用的是YUI 的 JSON。
【确定】按钮按下后，将用户输入的数据转换成JSON格式，然后调用struts中定义的RegisterPersonAction.action。【确定】按钮上绑定的处理函数如下：
Js代码 复制代码
  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.     };   
  17.   
  18.     //AJAX异步调用   
  19.     var request = YAHOO.util.Connect.asyncRequest('POST', 'RegisterPersonAction.action', callback, postData);   
  20. }  


回调函数中将返回的JSON数据转成对象，然后根据返回值进行提示。代码如下：
Js代码 复制代码
  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. };   
  21.   
  22. function responseFailure(o) {   
  23.     alert("服务器处理失败 : " + o.statusText);   
  24. }  


struts.xml中对ajax异步调用中的url这样定义：
Xml代码 复制代码
  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格式的处理结果。
Java代码 复制代码
  1. public class PersonAction extends ActionSupport {   
  2.     private InputStream inputStream;   
  3.        
  4.     public void setInputStream(InputStream inputStream) {   
  5.         this.inputStream = inputStream;   
  6.     }   
  7.   
  8.     public InputStream getInputStream() {   
  9.         return inputStream;   
  10.     }   
  11.   
  12.     private PersonService personService;   
  13.        
  14.     public void setPersonService(PersonService personService) {   
  15.         this.personService = personService;   
  16.     }   
  17.   
  18.     public PersonService getPersonService() {   
  19.         return personService;   
  20.     }   
  21.   
  22.     private String personData;   
  23.        
  24.     public void setPersonData(String personData) {   
  25.         this.personData = personData;   
  26.     }   
  27.   
  28.     public String getPersonData() {   
  29.         return personData;   
  30.     }   
  31.   
  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. }  
posted @ 2009-01-08 15:41  猪鼻驴耳  阅读(2495)  评论(0)    收藏  举报