DWR的运用和spring的整合.

这里讲述dwr的两种运用，一种是dwr单个运用、一种是与spring整合运用

一、Dwr单个运用

第一步(在WEB-INF下面没有dwr文件夹也可以实现)

在web.xml文件中增加如下代码：

  <!-- dwr配置开始 -->

  <servlet>

        <servlet-name>dwr</servlet-name>

        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

        <init-param>

            <param-name>debug</param-name>

            <param-value>true</param-value>

        </init-param>

    </servlet>

    <servlet-mapping>

        <servlet-name>dwr</servlet-name>

        <url-pattern>/dwr/*</url-pattern>

    </servlet-mapping>

    <!-- dwr配置结束 -->

第二步

在WEB-INF文件夹下面新建一个xml文件、名称为：dwr.xml ，代码如下

<?xml version="1.0" encoding="UTF-8"?>

<!-- START SNIPPET: dwr -->

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>

    <allow>

   <create creator="new" javascript="dwrService">

    <!-- 

   javascript="dwrService"中dwrService是前台JS的名称，这个js在dwr文件夹的 interface文件夹中。dwr文件夹是放在项目WebRoot目录下的。在dwr文件夹中。除了interface文件夹外还有两个js文件。分别是：engine.js，util.js。这两个文件夹不是自己写的。是dwr自带的。

    -->

    <!-- param中的name属性为class时，单纯指的是一个类，要给具体的路径 ，此时create标签中creator="new"-->

         <param name="class" value="com.shebao.action.AjaxAction"/> 

<!--<include method="ajaxDemo"/>这个的作用是说，在类com.shebao.action.AjaxAction中，有 ajaxDemo()方法可以供 dwrService.js访问。访问的方法见下面的ajax.js就明白了 。ajax.js是自己写的。-->

           <include method="ajaxDemo"/>

           <include method="xxx"/>

       </create>

    </allow>

<!-- 下面的signatures要不要不影响。具体没研究过-->

    <signatures>

        <![CDATA[

        import java.util.Map;

        import org.apache.struts2.validators.DWRValidator;

        DWRValidator.doPost(String, String, Map<String, String>);

        ]]>

    </signatures>

</dwr>

<!-- END SNIPPET: dwr -->

第三步

把dwr文件夹放在WebRoot文件夹下

第四步

在WebRoot文件夹下新建一个js文件夹，在这个文件夹下新建一个ajax.js文件，代码如下：

function ajax() {

//dwrService就是dwr.xml中javascript="dwrService"中的dwrService,ajaxDemo()就是AjaxAction中的方法,callBack是回调函数

     dwrService.ajaxDemo(callBack);

}

var callBack = function(data) {

//data是从后台返回的结果集，可能是基本类型，也可能是引用类型，或者是集合类型

//下面的代码是从后台返回一个map集合，在给select标签动态创建option

     var option= document.all["son"];

     for ( var key in data) {

          option.options[key] = null;

          option.options.add(new Option(data[key],key));

     }

}

第五步

Jsp页面要增加js文件一共四个，三个是dwr自带的，一个是我们刚才自己新建的ajax.js

<script type="text/javascript" src="dwr/engine.js"></script>

<script type="text/javascript" src="dwr/util.js"></script>

< script   type = "text/javascript"   src = "dwr/interface/dwrService.js" ></ script >

< script   type = "text/javascript"   src = "js/ajax.js" ></ script >

 

 

---

二、Dwr与spring整合运用

1.在web.xml文件内加入dwr配置项

     <!-- dwr begin -->

     <servlet>

         <servlet-name> dwr </servlet-name>

         <servlet-class> uk.ltd.getahead.dwr.DWRServlet </servlet-class>

         <init-param>

             <param-name> debug </param-name>

             <param-value> true </param-value>

         </init-param>

     </servlet>

     <servlet-mapping>

         <servlet-name> dwr </servlet-name>

         <url-pattern> /dwr/* </url-pattern>

     </servlet-mapping>

     <!-- dwr end-->

   

     <!-- dwr invoker     

    <servlet>  

          <servlet-name>dwr-invoker</servlet-name>  

          <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>  

          <init-param>  

               <param-name>debug</param-name>  

               <param-value>true</param-value>  

          </init-param>  

    </servlet>  

    <servlet-mapping>  

          <servlet-name>dwr-invoker</servlet-name>  

          <url-pattern>/dwr/*</url-pattern>  

    </servlet-mapping>

     -->

2./WEB-INF下增加dwr.xml文件、内容如下：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC

    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"

    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>

        <allow>

              <create creator= "spring"  javascript=  "manageService" >

                    <param name= "beanName"  value=  "manageService"  />

                    <include method= "queryCompanyById"  />

                    <include method= "queryUsertypePaystandard"  />

                    <include method= "recodeManagerCost" />

              </create>

              <create creator= "spring"  javascript=  "systemService" >

                    <param name= "beanName"  value=  "systemService"  />

                    <include method= "userPower" />

                    <include method= "validateUserName" />

              </create>

        <convert converter= "bean"  match=  "com.sishu.shebao"  />

        </allow>

</dwr>

说明： creator=  "spring" 这个是让 manageService由spring创建也可以说是交给spring管理

javascript=  "manageService" 这个 manageService是与页面上那个js文件名对应

name=  "beanName" 这个beanName是固定的不能变动,

value=  "manageService" 这个 manageService对应spring配置文件中bean的id，如： <bean id=" manageService " class="....."></bean>

<include method=  "queryCompanyById"  />

<include method=  "queryUsertypePaystandard"  />

<include method=  "recodeManagerCost" />

这三个是 <bean id=" manageService " class="....."></bean>这个 manageService中的方法，在调用的时候里面一定要有这三个方法，参数根据页面js调用来决定

<convert converter= "bean"  match=  "com.sishu.shebao"  />这个是你在dwr中用到的model、也就是具体的对象. convert  可以帮你转换.

3.页面上要加入三个js,这三个js前后顺序不要乱,它们所放目录在WebRoot/dwr下面,前面两个js如果没有可以到网上去下载，第三个js里面是空的、所以自己建一个就好了

< script  language  = "Javascript"  src = '  < c:url  value = "/dwr/engine.js"  /> ' ></  script >

< script  language  = "Javascript"  src = '  < c:url  value = "/dwr/util.js"  /> ' ></  script >

< script  language  = "Javascript"  src = '  < c:url  value = "/dwr/interface/manageService.js"  /> ' ></  script >

到此、我们dwr和spring的整合完成，下面就是调用的问题了、如何调用呢？

首先我们新建一个js来实现dwr调用（不想新建js直接在页面上写也是可以的、不强求）

1)新建一个js名字为ajax.js,在页面上应用这个ajax.js

2)在ajax.js里面写如下代码：

function  run(entrustId) {

      document.getElementById(  "companyId" ).options.length = 0;

        var  companyid = document.all[ "companyId"  ];

        if  (entrustId !=  ""  ) {

        //这里 manageService是bean的id， queryCompanyById是 manageService 里面的方法， entrustId为参数，如果很多参数已逗号隔开

            manageService.queryCompanyById(entrustId,  function (data) {

                  callBack(data)

            });

      }  else  {

            companyid. options.add( new  Option(  "-请选择企业"  ,  ""  ));

      }

}

var  callBack =  function (data) {//data就是后台返回的信息、可能是字符串、也可能是对象、也可能是集合（list，map）这些都是可以处理的

        var  companyid = document.all[ "companyId"  ];

        for  (  var  key  in  data) {

            companyid. options.add( new  Option(data[key], key));

      }

}

run方法你只要在页面上触发就可以了、如果是做级联下拉框可以直接用上面的代码，其他根据情况自己修改

到此讲解结束，下面提供一些对返回data的简单处理

function  usertype(typenumber) {

      manageService.queryUsertypePaystandard(typenumber,  function (data) {

            callBack1(data)

      });

}

var  callBack1 =  function (data) {

        for  (  var  key  in  data) {

            document.getElementById(  "socialBasiccost" ).value = data[key];

      }

}

function  run(entrustId) {

      document.getElementById(  "companyId" ).options.length = 0;

        var  companyid = document.all[ "companyId"  ];

        if  (entrustId !=  ""  ) {

            manageService.queryCompanyById(entrustId,  function (data) {

                  callBack(data)

            });

      }  else  {

            companyid. options.add( new  Option(  "-请选择企业"  ,  ""  ));

      }

}

var  callBack =  function (data) {

        var  companyid = document.all[ "companyId"  ];

        for  (  var  key  in  data) {

            companyid. options.add( new  Option(data[key], key));

      }

}

function  ajaxqueryUserType(id) {

      document.getElementById(  "userTypeid" ).options.length = 0;

      systemService.userPower(id,  function (data) {

            call(data)

      });

}

var  call =  function (data) {

        var  userTypeid = document.all[ "userTypeid"  ];

        for  (  var  key  in  data) {

            userTypeid. options.add( new  Option(data[key], key));

      }

}

function  validateUserName(id){

      systemService.validateUserName(id,  function (data) {

            userCall(data)

      });

}

var  userCall= function (data){

        if ( null  !=data){

            document.getElementById(  "spanId" ).innerHTML= "<font color='red'>用户名" +  "[" +data+ "]"  + "已存在！</font>"  ;         

      }  else {

            document.getElementById(  "spanId" ).innerHTML= ""  ;       

      }

}

function  recodeManagerCost(id){

        var  managerCompanyId=document.getElementById( "managerCompanyId"  ).value;

      manageService.recodeManagerCost(id,managerCompanyId,  function (data) {

            recodeCallBack(data)

      });

}

var  recodeCallBack= function (data){

        var  managerCompanyId=document.getElementById( "managerCompanyId"  ).value;

        if ( ""  !=data){

            document.getElementById(  "spanId" ).innerHTML=data;           

      }  else {

            document.getElementById(  "spanId" ).innerHTML=data;           

      }

}