zoukankan      html  css  js  c++  java
  • 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)<!-- 导入我们配置的JS类的js文件 -->
       <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示例代码:
      <!-- 导入dwr的两个核心js -->
     
     <script type="text/javascript" src="<%=basePath%>dwr/engine.js"></script>
     <script type="text/javascript" src="<%=basePath%>dwr/util.js"></script>
     
     <!-- 导入我们配置的JS类的js文件 -->
     
     <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>

  • 相关阅读:
    C,LINUX,数据结构部分
    LINUX应用开发工程师职位(含答案)
    INT32 System_UserKeyFilter(NVTEVT evt, UINT32 paramNum, UINT32 *paramArray)
    屏幕调试
    1.ARM嵌入式体系结构与接口技术(Cortex-A8版)
    NT9666X调试log
    DemoKit编译过程错误
    selenium 代理设置
    pandas 轮询dataframe
    Spring 定时任务
  • 原文地址:https://www.cnblogs.com/boonya/p/2168750.html
Copyright © 2011-2022 走看看