快速掌握DWR开发图解-2简单异步调…

接“快速掌握DWR开发图解-1环境搭建”

    1、工程构建

      为了进行简单的异步调用，需要在服务器端编写java代码作为测试，常用的调用可能会有3类返回值，1-String类型文本，2-单个对象，3-对象集合，因此建立如下目录结构，如图：

     

      为测试返回对象建立User类，代码如下：

     public class User {

       private String uname;

       private String upass;

//省略getter，setter

     }

     创建服务端的DwrService类，用于测试dwr前台调用的三种情况，分别返回String，User，List

     public class DwrService {

       public String sayHello(String name){

         return name+" 您好!服务器时间是:"+new Date().toString();

       }

       public User findUser(){

         return new User("admin","123");

       }

       public List findUsers(){

         List list=new ArrayList();

         list.add(new User("admin","123"));

         list.add(new User("abc","456"));

         list.add(new User("user","user"));

         return list;

       }

     }

      2、dwr配置

      打开dwr.xml，编写如下配置节点，将DwrService类转换成javascript调用，同时配置User类让dwr返回User对象对应的JSON对象。

      <dwr>

       <allow>

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

          <param name="class" value="service.DwrService"/>

         </create>

         <convert match="model.User" javascript="User" converter="bean"/>

        </allow>

      </dwr>

       
      3、发布

      将工程发布到tomcat中访问以下地址进行发布检查， http://localhost:8080/dwrtest/dwr

系统显示如下页面：

       

      打开Service链接，可以看到在dwr.xml中配置的Service已经发布好了，可以通过这个页面进行测试，直接输入参数，分别点击findUser，sayHello，findUsers后面的Execute按钮，可以看到执行效果。

测试效果如下：

    3、页面调用

     （1）新建test.html页面，在head部分导入3个js文件，可以直接从刚才看到的测试页面中复制

      <script type='text/javascript' src='/dwrtest/dwr/interface/Service.js'></script>

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

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

    （2）编写调用函数如下：

        <script type="text/javascript">

      function hello() {    

       Service.sayHello('tom',callback);

       function callback(v){

         $(' testDiv ').innerText=v;

       }

      }

     </script>

      通过Service直接调用服务器端DwrService类中的sayHello方法，传入姓名参数‘tom’和一个回调函数名callback，并且实现callback，callback的参数v表示调用sayHello的返回值，可以直接将v显示在 testDiv中。

      $('id')这种用法是dwr中util.js的新用法，等同于document.getElementByIdx_x_x_x_x('id')，可以直接获得对象。

    （3）添加一个按钮和一个div

       <input type="button" value="test" οnclick="hello();">

     <div id="testDiv"></div>

    4、运行效果

    访问 http://localhost:8080/dwrtest/test.html,点击按钮，显示如下效果：

     

    5、返回对象的情况

    修改hello函数如下，调用findUser方法：

    <script type="text/javascript">

    function hello() {    

      Service.findUser(callback);

      function callback(v){

        $('testDiv').innerText=v.uname;

      }

    }

    </script>

    调用后testDiv上显示User对象的用户名"admin"，此时的v代表的是一个User对象

    修改hello函数如下，调用findUsers方法：

    <script type="text/javascript">

    function hello() {     

      Service.findUsers(callback);

      function callback(v){

        $('testDiv').innerText=v[0].uname;

      }

    }

    </script>

    调用后testDiv上仍显示User对象的用户名"admin"，但此时的v代表的是一个User对象数组。

我的更多文章：

• 快速掌握DWR开发图解-1环境搭建(2011-05-09 13:49:45)
• Struts2.1、Spring3.0、Hibernate3.3框架整合详细图解-7搭建项目结构（分包）(2011-04-22 13:02:20)
• Struts2.1、Spring3.0、Hibernate3.3框架整合详细图解-6添加hibernate(2011-04-22 12:58:52)
• Struts2.1、Spring3.0、Hibernate3.3框架整合详细图解-5添加Spring(2011-04-22 12:27:26)
• Struts2.1、Spring3.0、Hibernate3.3框架整合详细图解-4添加Struts(2011-04-22 12:22:07)
• Struts2.1、Spring3.0、Hibernate3.3框架整合详细图解-3创建数据库连接(2011-04-21 13:09:54)
• Struts2.1、Spring3.0、Hibernate3.3框架整合详细图解-2创建项目(2011-04-21 12:12:12)
• Struts2.1、Spring3.0、Hibernate3.3框架整合详细图解-1数据库(2011-04-21 12:03:57)
• FCK Editor for java快速配置-优化篇(2011-02-19 09:43:07)
• FCK Editor for java快速配置-使用篇(2010-12-08 09:37:13)