web应用Ajax之dwr

1. 添加支持jar包(dwr.jar)到编译路径.

2. 配置核心的servlet

3. 在WEB-INF/目录下添加dwr.xml核心配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
     "http://getahead.org/dwr/dwr20.dtd">
<dwr>
   <allow>
       <create javascript="UserService" creator="new">
           <param name="class" value="com.accp.dwr.UserService"></param>
       </create>
   </allow>
</dwr>

4. 新建具体的使用页面.

(1)引入dwr提供的两个js文件.engine.js和util.js
           这两个js文件是系统在运行过程中，DWRServlet自动写到客户端缓存中的,
           在开发的时候我们是看不到这两个文件的。

   (2)创建要调用的具体的JavaBean,并完成需要客户端采用ajax调用的方法.

   (3)在dwr.xml中配置后台的java类与客户端的js类间的映射关系

   (4)
   <script type="text/javascript"
   src="<%=basePath%>dwr/interface/UserService.js"></script>
            后台的UserService.js是你在dwr中配置的js类的名字

   (5)通过自己的js代码调用UserService. (你可以将其看作是服务器端UserService
              这个java bean的副本，所以方法什么的完全一样)
5、(1)Java代码：
package com.pro.dwr;
public class UserService {
public boolean existsUserName(String name){
  if("abc".equals(name)){
   System.out.println("========UserService========");
   return true;
  }
  return false;
}

}

(2)JSP示例代码：


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



<script type="text/javascript" src="<%=basePath%>dwr/interface/UserService.js"></script>

<script type="text/javascript">
  function chkName(uname){
   if(uname.length==0){
    alert("用户名必须输入!");
    return ;
   }

   UserService.existsUserName(uname,function(exists){
    if(exists){
     //$("uinfo").innerHTML = "用户名已经被占用!";
     dwr.util.setValue("uinfo","用户名已经被占用!");
    }else{
        $("uinfo").innerHTML = "";
    }
   });
  }


</script>
<script type="text/javascript">
  function init(){
   dwr.util.addOptions("sel01",["A","B","C"]);
   dwr.util.addOptions("sel02",[
    {name:'a',id:'A'},
    {name:'b',id:'B'}],"id","name");
  }

  function getv(selname){
   alert(dwr.util.getValue(selname));
  }
</script>
</head>

<body onload="init()">
    This is my JSP page. <br>
    <center>
    <form action="" method="post">
      <table width="80%" border="1">
       <tr>
        <td align="right">用户名:</td>
        <td>
         <input type="text" name="uname" id="uname" onblur="chkName(this.value)">
        </td>
        <td>
         <div style="font-size:12px;color:red;" id="uinfo"></div>
        </td>
       </tr>
       <tr>
        <td align="right">密码:</td>
        <td colspan="2">
         <input type="password" name="upwd" id="upwd">
        </td>
       </tr>

      </table>

    </form>
         <select id="sel01"></select><input type="button" value="01value" onclick="getv('sel01')" /><br />
         <select id="sel02"></select><input type="button" value="02value" onclick="getv('sel02')" /><br />

    </center>
</body>

posted @ 2011-09-06 14:51 boonya 阅读(365) 评论(0) 收藏举报

刷新页面返回顶部

web应用Ajax之dwr

公告