WEB远程调用框架-DWR入门介绍

DWR介绍

DWR全称:Direct Web Remoting,直接Web远程调用。是JAVA EE领域中的一个ajax框架,通过使用该框架,可以更简单的开发出Ajax应用。相比于直接使用JS进行ajax开发而言,DWR框架的优点在于只需要对其进行一些配置,就可以在JS代码中调用远程的java方法,就像是java方法定义在客户端一样。

DWR组成

DWR框架主要包括以下两个部分:

1>客户端的JS:使客户端JS可以直接调用远程服务器的java方法,除此之外它还提供了一些方便的工具函数用来简化DOM操作
    2>服务器上运行的Servlet:用于处理用户请求,并将用户的请求委托到实际的java对象中进行处理,并负责将处理结果返回到客户端中

DWR原理

DWR会根据java类来动态生成对应的js代码,通过生成的js代码将服务器端的java方法直接暴露给客户端的js中(可以指定暴露的方法)。表面上看起来是借助DWR框架帮助直接远程调用java方法,其实实际上还是依赖XMLHttpRequest异步核心对象和服务器进行通信的。
DWR基本原理图:(比较粗陋别介)
WEB远程调用框架-DWR入门介绍_第1张图片

DWR入门小实例

1>相应jar包:dwr.jar和commons-logging.jar包,这里我还引入了jquery的js文件,用于简化dom操作

2>web.xml配置DWR框架核心Servlet:

<servlet>
    <servlet-name>dwr-invoketservlet-name>
    
    
    <servlet-class>org.directwebremoting.servlet.DwrServletservlet-class>
    
    <init-param>
        <param-name>debugparam-name>
        <param-value>trueparam-value>
    init-param>
servlet>
<servlet-mapping>
    <servlet-name>dwr-invokerservlet-name>
    <url-pattern>/dwr/*url-pattern>
servlet-mapping>

3>定义java类 com.dwr.Test.java

public class Test{
    public String send(){
        return "hello dwr";
    }
}

4>配置dwr.xml配置文件:

<dwr>
    <allow>
        
        <create creator="new" javascript="dwrtest">
            
            <param name="class" value="com.dwr.Test" />
        create>
    allow>
dwr>

5>编写客户端代码:index.jsp

<html>
    <head>
        <meta charset="utf-8" />
        <title>dwr testtitle>
        
        <script type="text/javascript" src="JS/jquery.min.js">script>
        
        
        
        <script type="text/javascript" src="dwr/engine.js">script>
        <script type="text/javascript" src="dwr/util.js">script>
    head>
    <body>
        <input type="button" id="btn" value="dwr测试" />
        
        <script>
            $(function(){
                $("#btn").click(function(){
                    //不管是调用哪个方法,在最后都要加上一个参数,表示回调函数,回调函数形如callback(data),data代表服务器返回的数据-->
                    dwrtest.send($.fn.callback);
                });
                /*回调函数*/
                $.fn.callback = funtion(data){
                    alert(data);
                }
            });
        script>
    body>

测试

配置tomcat -> 打开浏览器 -> 输入项目 http://localhost:8080/DWRWeb/index.jsp -> 结果:点击button弹出hello world -> 程序运行成功 -> dwr框架入门

你可能感兴趣的:(ajax,JS)