在新项目中客户明确要求更多的使用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/。
使用方法很简单:
- List domainList =
- JSONArray resultArray = new JSONArray();
- JSONObject jsonObject = new JSONObject();
- for (int i = 0; i < domainList.size(); i++) {
- Domain d = (Domain) domainList.get(i);
- jsonObject = this.getDomainJSON(d);
- resultArray.put(jsonObject);
- }
-
- Tools.printMsgToClient(resultArray.toString(), response);
-
-
-
-
-
-
-
-
- private JSONObject getDomainJSON(Domain domain) throws JSONException {
- JSONObject jsonObject = new JSONObject();
-
- jsonObject.put("domainId", domain.getDomainId());
- if (domain.getDomain() != null) {
- jsonObject.put("domDomainId", domain.getDomain().getDomainId());
- } else {
- jsonObject.put("domDomainId", "root");
- }
- jsonObject.put("coldId", domain.getCodeId());
- jsonObject.put("name", domain.getName());
- jsonObject.put("levelId", domain.getLevelId());
-
- return jsonObject;
- }
-
-
-
-
-
-
-
-
-
- public static void printMsgToClient(String result,
- HttpServletResponse response) throws Exception {
- response.setCharacterEncoding("UTF-8");
- PrintWriter out = response.getWriter();
- try {
- out.print(result);
- } finally {
- out.close();
- }
- }
通过以上的操作,就可以将一个常见的包含POJO对象的List数组转化为一个JSONArray对象,并通过response.getWriter()传到页面JavaScript可以很容易解析。
B.使用YUI简化Ajax,YUI的connection使用非常的便捷,而且也很灵活
-
-
-
-
- function callGetAjax(sUrl){
-
- var call =
- {
-
- success: handleSuccess,
-
- failure: handleFailure,
- argument: {}
- }
-
-
- var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, call);
- }
-
-
-
-
- var handleSuccess = function(o){
- alert(o.responseText);
- }
-
-
-
-
- var handleFailure = function(o){
- alert("访问发生错误");
- }
这是一个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 代码
- var call =
- {
-
- success: buildSuccess,
-
- failure: handleFailure,
-
- argument: {treeDiv: "divName"}
- }
这样定义以后,在buildSuccess(o)函数中就可以通过o.argument.treeDiv来访问这个变量,十分的灵活易用。
C.做一个Post Ajax也同样简单:
-
-
-
-
-
- function callPostAjax(sUrl,formId){
-
- var postCall =
- {
-
- success: postSuccess,
-
- failure: handleFailure,
- argument: {}
- }
-
-
- YAHOO.util.Connect.setForm("domainForm");
- var cObj = YAHOO.util.Connect.asyncRequest('POST', sUrl, postCall);
- }
使用方法和get Ajax基本相同,只是需要另外提供一个formId。
六、结论
上面这些东西都是刚刚接触不久,但是都是业界知名、成熟的开源产品,使用起来的确可以大大提升开发效率,特别是一旦将流程确定,Ajax的使用将与普通的Web开发没有多大区别,开发人员不必实现理解XMLHttpRequest的原理、JSON的概念就可以实现Java和Web层复杂的数据传递,降低开发人员的学习曲线,提高开发效率。上面的东西仍然需要在使用中反复验证和改进,同时希望大家能给出宝贵的意见。
分享到:
相关推荐
2. **YUI作为前端展示**:利用YUI的组件和API,可以创建丰富的用户界面,如使用YUI的DataTable展示从服务器获取的JSON数据,或者使用YUI的Form组件进行表单验证,并通过AJAX发送到Struts2 Action进行处理。...
- **Java Servlets** 和 **JSP**:Java服务器端技术,常与Ajax结合,处理请求并生成动态内容。 - **PHP** 和 **ASP.NET**:其他常见的服务器端技术,同样支持Ajax开发。 7. **跨域问题** - **同源策略**:限制了...
YUI 是由 Yahoo 开发的一套 AJAX 库,包含了丰富的 UI 控件和 JavaScript 功能。YUI 的设计注重性能和兼容性,支持各种现代浏览器。作为 Yahoo 官方支持的产品,YUI 的稳定性得到了保证,并且拥有庞大的社区支持,为...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
Struts作为Java中最流行的Web框架之一,在Web开发领域占据着举足轻重的地位。而Ajax技术,则以其异步交互特性成为了提升用户体验的重要手段。本文将深入探讨如何将这两种技术融合起来,特别是通过Ajax Taglibs来增强...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
1. **dynafaces-usage-patterns.pdf**:可能涵盖了Dynafaces框架的使用模式,这是一个基于JavaServer Faces (JSF)的库,用于简化和增强AJAX功能的实现,提供更丰富的用户界面组件和交互性。 2. **GWT_speakernoted....
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
**基于J2EE的Ajax宝典** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分...这本书中的实例将帮助读者将理论知识转化为实际操作,进一步巩固和提升Ajax开发技能。
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...
最大限度地减少时间和费用开发自定义的DSL(领域特定语言在Java)要求。 日志服务器 Apache Flume.tar Flume 是一个分布式、可靠和高可用的服务,用于收集、聚合以及移动大量日志数据,使用一个简单灵活的架构,就...