1、dwr入門

weixin_33670713發表於2016-08-20

這裡相關的框架介紹就不說了,下面是看了孔浩老師的視訊做的筆記,先看一個基本案例。

1、新建一個maven工程

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>dwr-hello</groupId>
    <artifactId>dwr-hello</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>dwr-hello</name>
    <description />
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <!-- Apache工具元件 -->
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.1.3</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.directwebremoting</groupId>
            <artifactId>dwr</artifactId>
            <version>3.0.1-RELEASE</version>
            <!-- <version>3.0.M1</version> -->
        </dependency>

        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.10</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <finalName>dwr-hello</finalName>
        <plugins>
            <!-- java編譯外掛 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.5.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
        </plugins>
        <pluginManagement>
            <plugins>
                <!-- 配置jetty外掛 -->
                <plugin>
                    <groupId>org.mortbay.jetty</groupId>
                    <artifactId>jetty-maven-plugin</artifactId>
                    <version>8.1.16.v20140903</version>
                    <configuration>
                        <scanIntervalSeconds>200</scanIntervalSeconds>
                        <webApp>
                            <contextPath>/dwr</contextPath>
                        </webApp>
                        <connectors>
                            <connector implementation="org.eclipse.jetty.server.nio.SelectChannelConnector">
                                <port>7777</port>
                                <maxIdleTime>60000</maxIdleTime>
                            </connector>
                        </connectors>
                    </configuration>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
</project>

說明:這裡和視訊中一樣是用的jetty,試了一下用tomcat,發現有點不太一樣,作為初學先按照視訊中的做吧。

2、配置

這裡我們可以下載dwr的例子(dwrdemo.war),在這個例子中我們將其中的兩個檔案web.xml、dwr.xml拷貝到本工程中的WEB-INF。然後做相應的修改:
web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>dwr-hello</display-name>
    <description>A Simple Demo DWR</description>

    <listener>
        <listener-class>org.directwebremoting.servlet.DwrListener</listener-class>
    </listener>
    
    <!-- <listener>
        <listener-class>
        org.directwebremoting.servlet.EfficientShutdownServletContextAttributeListener
        </listener-class>
    </listener>
    <listener>
        <listener-class>
        org.directwebremoting.servlet.EfficientShutdownServletContextListener
        </listener-class>
    </listener> -->

    <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>

        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>
</web-app>

說明:這裡需要注意的是我們使用的dwr的版本是3.0.1-RELEASE,如果使用3.0.M1版本,則監聽器是不能這樣配置的,因為沒有這個類(視訊中不知道為什麼可以),可以使用上面注視掉的監聽器。

dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
    <allow>
        <create creator="new">
            <param name="class" value="org.konghao.dwr.model.MyDwr" />
        </create>
    </allow>
</dwr>

說明:這裡我們需要將我們想測試的類配置進來。

3、相關的測試程式碼

MyDwr.class

package org.konghao.dwr.model;
public class MyDwr {
    public String hello(String world){
        System.out.println("hello " + world);
        return "hello" + world;
    }
}

然後在webapp目錄下新建一個jsp檔案:
dwr01.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dwr01.jsp</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/dwr/engine.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/dwr/interface/MyDwr.js"></script>

    <script type="text/javascript">
        MyDwr.hello("世界");
    </script>
  </head>
  <body>
  </body>
</html>

說明:這裡注意,我們需要新增dwr的引擎engine.js,而對於我們自己的jsp檔案則應該按照上面的路徑配置,路徑必須是dwr/interface。然後使用命令clean jetty:run啟動伺服器,然後使用地址http://localhost:7777/dwr/訪問,點選頁面中的dwr01.jsp,頁面變為空白,但是在後臺我們發現列印出了

hello 世界

當然如果我們將上面的程式碼稍作改動:

<script type="text/javascript">
        MyDwr.hello("世界", function(data){
            alert(data);
        });
</script>

此時訪問的時候會彈出hello 世界

說明:可以看到我們可以直接通過js程式碼呼叫java的方法。