ajax/dwr/struts实例开发[转]

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1537309 

 

2005是Ajax最火爆的年份，以gmail为先驱的Ajax应用已经逐渐深入人心了。也许这就是所谓的轮回吧，计算机界面的设计从最初瘦到胖再到瘦，如今又要开始胖了。不过，在web界面的胖与之前的胖还是有很多区别的，web界面的胖主要依赖于DHML和Javascript来实现。这也是本文的来由了，相信很多OO的开发人员都不愿与页面层的效果打交道，尤其是Javascript的这样的开发语言，我也是其中之一了，非常不喜欢Javascript，语法松散，结构复杂。反正是不喜欢了，但是在web时代，既然流行胖子，想不用Javascript是不可能的了，那么怎么样来简化Ajax的开发呢？DWR由此延生了，他封装了XMLHttpRequest,直接调用服务端的方法，省了好多Javascript啊^_^
Struts虽然已经开始开下陡路，但底子厚，将DWR与Struts结合依然会是大多数开发者的选择。
本文分两部分：框架介绍和实例开发。先来：

第一部分 框架介绍

一、Ajax介绍
Ajax--Asynchronous JavaScript and XML，异步JavaScript和XML。
名字中已经包含Ajax的组成部分：异步处理XMLHttpRequest，JavaScript,XML。
其中：
1、XMLHttpRequest是Ajax的关键部分，正是由于他的存在，才使得胖子越来越吃香了。
2、JavaScript是Ajax的必备部分，没有他还玩个屁
3、XML是Ajax数据格式的推荐方式，但也可以不用
当然还少不了CSS，有了CSS使得在Ajax中更容易修改用户的界面
Ajax的细节和样例使用就不多说了，N多的资源，自己找吧。

二、DWR介绍
DWR-Direct Web Remote，翻译过来应该是直接远程网页访问。（这个Web一直找不到好的词语来表达，这里就用网页吧）
如名字所述，DWR的主要特点就是可以在Ajax中直接调用服务器上的方法，很奇妙吧。就是说，不需要通过URL来告诉服务来处理，而是直接在Javascript中调用类的方法，并返回数据。
DWR简化了Ajax的开发：
1、封装了Ajax中的使用，不再需要直接使用XMLHttpRequest了，这可是非常重要的，减少了好多Javascript呀
2、通过回调函数的方式，简化了错误处理及返回数据的处理。
3、直接调用服务器类的方法，不再需要通过URL方式，也省了不少的事。

DWR的主要部件有：dwr.xml/engine.js/util.js，前者是DWR的Servlet使用的配置文件，后两者DWR替我们封装的Ajax的代码，当然也提供了其他有用的功能。

三、Struts介绍
Struts还用介绍吗？没听说过？那就不用往下看，休息休息吧^_^
这里就说一下在DWR如何调用Struts中Action的方法吧，说白了，是不可能的。这不是白说吗#$@$@%@#
实际上是这样的，虽然DWR支持方法的调用，但ActionForward/ActionForm/ActionMap这些东西如何在DWR调用方法前生成呢？我也不知道，所以DWR对Struts的支持实际上就是要重构Action中的方法，去掉上面的东西，然后就可以了（这是DWR说的，可不是我说的^_^）。

看了上面的一小通介绍，不知道大家有没有什么感觉，我也觉得写得太少了，可能看了跟没看差不多。不过这里主要是想大家对这些概念有个了解。接下来的第二部分，将会以实例开发的方式来写，这样就更容易依样画葫芦了（我也比较喜欢这样的方式）。

摘要：先讲一下应用的结构页面端：    demo.jsp用来展示界面服务端：    DemoAction是Struts中的Action子类负责控制转换，    DemoFacade是业务类负责业务处理。    Goods是一个业务实体类Struts部分的配置就

先讲一下应用的结构
页面端：
    demo.jsp用来展示界面
服务端：
    DemoAction是Struts中的Action子类负责控制转换，
    DemoFacade是业务类负责业务处理。
    Goods是一个业务实体类

Struts部分的配置就忽略不说了，实际上这个应用并没有包含Struts的配置
主要讲一下dwr的配置，首先需要在web.xml增加下面的servelt映射：
  <servlet>
    <description>Direct Web Remoter Servlet</description>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
如上uk.ltd.getahead.dwr.DWRServlet是dwr的核心，用来处理javascript的对远程方法的调用，还有其他参数请参考相关文档。
然后，需要在dwr.xml配置相应的远程方法（与具体需要在客户端调用的方法相关），如下为演示应用的配置：
<dwr>
    <allow>
        <convert converter="bean" match="dwr.demo.Goods"/>
        <create creator="new" javascript="DemoAction" class="dwr.demo.DemoAction">
            <include method="query4dwr"/>
            <include method="copy4dwr"/>
            <include method="paste4dwr"/>
        </create>
        <create creator="new" javascript="DemoFacade" class="dwr.demo.DemoFacade">
            <include method="queryList"/>
            <include method="restore"/>
            <include method="del"/>
        </create>
      </allow>
</dwr>
如上有一个转换器(converter)是用来映射dwr.demo.Goods为bean类型，其他转换器类型请参考相关文档；还有两个创建器分别创建javascript中的DemoAction类和DemoFacade类，分别对应dwr.demo.DemoAction类和dwr.demo.DemoFacade，其中定义的方法就可以从javascript中直接调用了。
最后，我们需要在页面中包含相应的javascript：
  <script src='dwr/interface/DemoAction.js'></script>
  <script src='dwr/interface/DemoFacade.js'></script>
  <script src='dwr/engine.js'></script>
  <script src='dwr/util.js'></script>
如上，dwr/interface/DemoAction.js和dwr/interface/DemoFacade.js是dwr自动生成的javascript文件，包含相应的类及方法，dwr/engine.js是dwr的核心引擎脚本处理客户端调用的转换，dwr/util.js包含了工具函数简化页面处理。

下面以查询为例，看一下dwr的具体使用：
DemoAction:
    public List query4dwr(int type, boolean needClear, HttpServletRequest request) {
        if (needClear) request.getSession().removeAttribute("dwr.demo.goodsId");
        return demoFacade.queryList(type);
    }
demo.jsp:
  function updateResults() {
    DWRUtil.removeAllRows("goodsbody");
    var type = document.getElementById("type").value;
    DemoAction.query4dwr(type, true, fillTable);
  }
  function fillTable(goods) {
    document.forms[0].select.checked = false;
    document.getElementById("totalRecords").innerHTML = goods.length;
    DWRUtil.addRows("goodsbody", goods, [ addCheckbox, getName, getPrice, getCount]);
  }
如上，DemoAction.query4dwr(type, true, fillTable)就可以直接调用DemoAction的方法了，这里fillTable是函数，dwr通过回调函数的方式来进行后续处理。比较一下javascript和action中的方法参数，HttpServletRequest是可以不传的，dwr会自动加上，另一个就是回调参数放在最后，这是比较好的方式，其他方式请参考文档。

最后看一下，dwr如何与Struts集成，如下代码：
    public ActionForward query(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
        String type = request.getParameter("type");
        //或者从form中取值
        
        List goodsList = query4dwr(Integer.parseInt(type), true, request);
        request.setAttribute("goodsList", goodsList);
        
        return mapping.findForward("success");
    }

    public List query4dwr(int type, boolean needClear, HttpServletRequest request) {
        if (needClear) request.getSession().removeAttribute("dwr.demo.goodsId");
        return demoFacade.queryList(type);
    }
前一个方法是Struts的方式，但dwr不支持，因此要重构一下在下面的方法才可以被dwr调用。
实际上，只有在方法中需要使用到HttpServletRequest是才需要重构方法，如果不使用HttpServletRequest，我们就可以直接调用业务层的类的方法，这样即简单又方便，如下：
demo.jsp:
  function restore() {
    DemoFacade.restore(updateResults);
  }

DemoAction:
    public synchronized void restore() {
        goodsList.clear();    
        initGoods();
    }

小结

  dwr封装了ajax中与服务端交互的模块，通过直接调用服务端类的方法简化了客户端与服务端的交互。虽然说还缺省类似tag这样的组件，但已经很大程度简化了ajax的开发。

资源
  1、示例源程序：下载
  2、dwr主站:http://getahead.ltd.uk/dwr
  3、ajax主站:http://en.wikipedia.org/wiki/AJAX

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1537309