论坛首页 → Web前端技术论坛 →

使用YUI和JSON in Java简化Ajax开发

浏览 10858 次
锁定老帖子 主题：使用YUI和JSON in Java简化Ajax开发
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • yueguangyuan
  • 等级: 三星会员
  • 性别:
  • 文章: 113
  • 积分: 279
  • 来自: 新加坡
   发表时间：2007-06-16  
 一、背景

       在新项目中客户明确要求更多的使用Ajax提高用户体验，而Ajax的好处也远不止提高用户体验，也给以往沉闷的服务器端开发带来了更多的选择，但是开发人员对于Ajax的熟悉程度都不大一样，更多的Java程序员对JavaScript、Ajax都是知之甚少，所以简化Ajax开发是必须要做的，同时也能简化Ajax开发维护的难度。

     二、关于RIA和Ajax

        在Ajax概念刚刚出现的时候，大家第一时间就是构建XMLHttpRequest对象，麻烦而且还得处理跨浏览器，而且乱七八糟的代码也会让人感到迷迷糊糊，所以业界牛人早就预测用不了多久Ajax的使用就会像曾经的DW之于HTML开发，的确，这两年RIA框架雨后春笋般的出现并被开发人员接受、学习，大大简化了Ajax的开发，更丰富了富客户端的开发组件包，目前名气比较大的框架如Prototype、YUI、DWR等。选择一个适合项目开发的RIA框架也成了项目开发准备期的一个新的工作，就好像Web Layer选型把Struts WebWork TapeStry等拿出来比较一边一样，也非常重要。

     三、框架选择

     由于之前的项目使用Rails开发，自然而然的选择Prototype做为首选，但是在设计阶段有一个需求，就是域控制，经过反复的尝试，最终选用拥有丰富组件的YUI框架，所以Ajax请求部分也换成了YUI的connetion组件，在对Ajax的支持上prototype和YUI很相似。访问http://developer.yahoo.com/yui/获得更多有关YUI信息

     四、采用JSON替代XML传递数据 Ajax without XML

     Ajax中的X就是XML，在Ajax的实现中以往都是采用字符串或者XML来传递，基本上简单的数据就是采用字符串，而复杂的数据结构或者复杂的页面效果就直接用xhtml传输，但是使用XML的问题就是需要双向解析，服务器端要将对象构造XML，页面又要解析XML，两边都挺麻烦。在一些朋友的介绍下，找到JSON这个东西，并第一次听说Ajax without JSON这个概念，JSON是JavaScript的内置对象，是一种特殊结构的字符串，具体信息可以参考：http://www.json.org/json-zh.html。在服务器端如果将Java的POJO对象构造成JSON，就可以在页面上任意的使用这些POJO中的信息，使得Browser Server之间的数据传递变得异常简单，也成为简化Ajax开发的一个方法。

     五、实例 YUI+JSON构造域的树结构

     实现效果请参考我的另一篇帖子：http://www.iteye.com/topic/89920，其中的模拟数据就是在服务器的一个List数组转化成的JSON对象。

    A.使用JSON in Java将POJO转化为JSON对象

    有多种方法将Java的对象转化为JSON，最牛的莫过于自己手写转化，那就要求对JSON的结构非常熟练，如果像我这样的新手，那请使用组件包，选择也很多，JSON-RPC、JSON in Java等，这里使用JSON in Java这个开源项目，具体信息：http://www.json.org/java/。

    使用方法很简单：

  1. List domainList = //获得domainList的操作省略   
  2. JSONArray resultArray = new JSONArray();   
  3.         JSONObject jsonObject = new JSONObject();   
  4.         for (int i = 0; i < domainList.size(); i++) {   
  5.             Domain d = (Domain) domainList.get(i);   
  6.             jsonObject = this.getDomainJSON(d);   
  7.             resultArray.put(jsonObject);   
  8.         }   
  9.   
  10. Tools.printMsgToClient(resultArray.toString(), response);   
  11.   
  12. /**  
  13.      * 将一个Domain对象转化为JSONObject  
  14.      *   
  15.      * @param domain  
  16.      * @return  
  17.      * @throws JSONException  
  18.      */  
  19.     private JSONObject getDomainJSON(Domain domain) throws JSONException {   
  20.         JSONObject jsonObject = new JSONObject();   
  21.   
  22.         jsonObject.put("domainId", domain.getDomainId());   
  23.         if (domain.getDomain() != null) {   
  24.             jsonObject.put("domDomainId", domain.getDomain().getDomainId());   
  25.         } else {   
  26.             jsonObject.put("domDomainId", "root");   
  27.         }   
  28.         jsonObject.put("coldId", domain.getCodeId());   
  29.         jsonObject.put("name", domain.getName());   
  30.         jsonObject.put("levelId", domain.getLevelId());   
  31.   
  32.         return jsonObject;   
  33.     }   
  34.   
  35. /**  
  36.      * 将结果返回给xmlRequest  
  37.      *   
  38.      * @param s  
  39.      * @param dictList  
  40.      * @return  
  41.      * @throws Exception  
  42.      */  
  43.     public static void printMsgToClient(String result,   
  44.             HttpServletResponse response) throws Exception {   
  45.         response.setCharacterEncoding("UTF-8");   
  46.         PrintWriter out = response.getWriter();   
  47.         try {   
  48.             out.print(result);   
  49.         } finally {   
  50.             out.close();   
  51.         }   
  52.     }  

通过以上的操作，就可以将一个常见的包含POJO对象的List数组转化为一个JSONArray对象，并通过response.getWriter()传到页面JavaScript可以很容易解析。    

B.使用YUI简化Ajax，YUI的connection使用非常的便捷，而且也很灵活

  1. /**  
  2.  * 使用Yahoo Get Ajax方法  
  3.  * @sUrl 请求地址  
  4.  **/  
  5. function callGetAjax(sUrl){   
  6.   
  7.     var call =   
  8.         {   
  9.         //正常返回处理函数   
  10.         success: handleSuccess,   
  11.          //出错返回处理函数    
  12.         failure: handleFailure,   
  13.         argument: {} //可以在success函数和failure函数中访问的变量   
  14.         }   
  15.        
  16.     //AJAX GET请求   
  17.     var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, call);   
  18. }   
  19.   
  20. /**  
  21.  * 默认的正常返回处理  
  22.  **/  
  23. var handleSuccess = function(o){   
  24.     alert(o.responseText);   
  25. }   
  26.   
  27. /**  
  28.  * 默认的错误返回处理  
  29.  **/  
  30. var handleFailure = function(o){   
  31.     alert("访问发生错误");   
  32. }  

  这是一个get方式的Ajax实现，调用非常简单：callGetAjax("AjaxAction.do")，然后定义一个var handleSuccess = function(o)覆盖默认的方法处理返回值就可以。其中Ajax的常用参量都可以在o中找到，具体参数查看访问：http://blog.csdn.net/AndyDevelope/archive/2006/07/28/993924.aspx，可以看到我们所关心的status,responseText等参数都可以方便的得到。可以看到这个回调的实现就是用一个JSON对象的实现，在YUI源码中这种结构的代码随处可见，组件JSON的强大和易用性。那么使用o.responseText就可以得到服务器响应的结果，由于采用的JSON对象，采用var list = eval(o.responseText)就可以得到相应的对象，然后想干什么就随你咯。如果想在回调函数中添加参数也很简单：

js 代码
  1. var call =   
  2.         {   
  3.         //正常返回处理函数   
  4.         success: buildSuccess,   
  5.          //出错返回处理函数    
  6.         failure: handleFailure,   
  7.         //可以在success函数和failure函数中访问的变量   
  8.         argument: {treeDiv: "divName"}   
  9.         }  

 这样定义以后，在buildSuccess(o)函数中就可以通过o.argument.treeDiv来访问这个变量，十分的灵活易用。 

      C.做一个Post Ajax也同样简单：

  1. /**  
  2.  * 使用Yahoo Post Ajax方法  
  3.  * @sUrl 请求地址  
  4.  * @formId POST Form的Id  
  5.  **/  
  6. function callPostAjax(sUrl,formId){   
  7.   
  8.     var postCall =   
  9.         {   
  10.         //正常返回处理函数   
  11.         success: postSuccess,   
  12.          //出错返回处理函数    
  13.         failure: handleFailure,   
  14.         argument: {} //可以在success函数和failure函数中访问的变量   
  15.         }   
  16.        
  17.     //AJAX POST请求   
  18.     YAHOO.util.Connect.setForm("domainForm");   
  19.     var cObj = YAHOO.util.Connect.asyncRequest('POST', sUrl, postCall);   
  20. }  

 使用方法和get Ajax基本相同，只是需要另外提供一个formId。

       六、结论

       上面这些东西都是刚刚接触不久，但是都是业界知名、成熟的开源产品，使用起来的确可以大大提升开发效率，特别是一旦将流程确定，Ajax的使用将与普通的Web开发没有多大区别，开发人员不必实现理解XMLHttpRequest的原理、JSON的概念就可以实现Java和Web层复杂的数据传递，降低开发人员的学习曲线，提高开发效率。上面的东西仍然需要在使用中反复验证和改进，同时希望大家能给出宝贵的意见。
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics