Ajax框架之DWR学习(简单入门案例)-yellowcong

2017-12-01 08:51:56来源:CSDN作者:yelllowcong人点击

分享

DWR是一个AJAX的框架,可以实现通过js来调用java代码 的操作,这个东西我以前接触过,但是没有用来做过项目

项目结构

这里写图片描述

Service

建立了一个简单的Service,我们的目的,就是通过 js调用UserService的sayHello方法

package com.yellowcong.service;import org.directwebremoting.Browser;public class UserService {    public String sayHello(String name){        System.out.println(name);        Browser.withPage("", new Runnable() {            public void run() {                // TODO Auto-generated method stub            }        });        return  "你好"+name;    }}

环境搭建

  1. 导入jar包 dwr.jar(注意是dwr3.jar的包,2.0版本的不能用,没有DwrListener 这个类)和 common-loggin.jar

  2. 配置web.xml文件
    a)配置DwrListener
    b)配置DwrServlet

  3. 配置dwr.xml文件(在WEB-INF目录下面创建xml文件,命名为dwr.xml
    a)配置我们设定的jave类

  4. 调用我们的JAVA 类
    a)导入 engine.js
    b)导入 /interface/javaName.js 我们在xml中定义的Java类

POM.xml

依赖包中,必须导入common的包,不然就会 报错了

<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/maven-v4_0_0.xsd">    <modelVersion>4.0.0</modelVersion>    <groupId>yellowcong</groupId>    <artifactId>day11_29</artifactId>    <packaging>war</packaging>    <version>0.0.1-SNAPSHOT</version>    <name>day11_29 Maven Webapp</name>    <url>http://maven.apache.org</url>    <dependencies>        <dependency>            <groupId>junit</groupId>            <artifactId>junit</artifactId>            <version>4.10</version>            <scope>test</scope>        </dependency>        <!-- Dwr框架 -->        <dependency>            <groupId>org.directwebremoting</groupId>            <artifactId>dwr</artifactId>            <version>3.0.2-RELEASE</version>        </dependency>        <!-- 必须也连带加上这个日志包,不然报错 -->        <dependency>            <groupId>commons-logging</groupId>            <artifactId>commons-logging</artifactId>            <version>1.0.4</version>        </dependency>    </dependencies>    <build>        <finalName>day11_29</finalName>    </build></project>

web.xml

需要配置DwrListener 监听器和配置DwrServlet(这个DwrServlet可以用来测试用)

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xmlns="http://java.sun.com/xml/ns/javaee"    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"    id="WebApp_ID" version="2.5">    <display-name>day1_27_dwr</display-name>    <!-- a)配置DwrListener 监听器-->    <listener>        <listener-class>org.directwebremoting.servlet.DwrListener</listener-class>    </listener>    <!-- b)配置DwrServlet  -->    <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>    <welcome-file-list>        <welcome-file>index.jsp</welcome-file>    </welcome-file-list></web-app>

dwr.xml

这个里面配置需要调用的Java的service

<?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">        <!-- 公布我们的 Java 文件 -->        <param name="class" value="com.yellowcong.service.UserService" />    </create>  </allow></dwr>

前端调用

1.引入两个js文件,一个是Dwr系统的engine.js,UserService.js这个js是,而是dwr框架生成的。

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/UserService.js"></script><!-- 调用我们的JAVA代码 --><script type="text/javascript">    //调用Service,不需要创建对象,直接使用方法就可以了    UserService.sayHello("yellowcong");    //调用的时候,会有返回数据,在返回的数据后面添加一个回调函数    UserService.sayHello("老衲爱编程",function(data){            alert("返回数据:"+data);    });</script></head><body><h2>Hello World!</h2></body></html>

运行结果

这里写图片描述

Debug模式

我们需要确认web.xml配置DwrServlet的时候,开启了debug模式

//后面的UserService 是变化的,看你需要调试的servicehttp://127.0.0.1/day11_29/dwr/test/UserService

这里写图片描述

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台