当前位置： 代码迷 >> JavaScript >> 应用YUI和JSON in Java简化Ajax开发
  详细解决方案

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

热度：339   发布时间：2012-11-08 08:48:11.0
使用YUI和JSON in Java简化Ajax开发

yueguangyuan 写道：
?一、背景

?????? 在新项目中客户明确要求更多的使用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层复杂的数据传递，降低开发人员的学习曲线，提高开发效率。上面的东西仍然需要在使用中反复验证和改进，同时希望大家能给出宝贵的意见。





1 楼 eonhy 2007-10-19  
现在的客户对交互界面越来越挑剔了～～～
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.