DWR框架 (一)认识DWR

前端之家收集整理的这篇文章主要介绍了DWR框架 (一)认识DWR前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

>
> DWR是一个比较不错的实现js语言和java语言桥接的框架,它是一个利用java的反射机制和ajax请求整合的一个框架,操作起来也是十分的容易,而却可以自动的实现我们需要使用的数据的json或者其他的类型的转换,从而大大的减少了我们自己的写代码的负担,个人以为熟悉使用DWR之后可以减少以后的java中的转换一个json的操作,是一个很典型的代理模式的例子,下面进行的是一个基本的认识DWR的步骤

、我们需要进行的是一个基本的DWR的认识,可以到DWR的官网http://directwebremoting.org/dwr/进行信息的浏览的操作,下载相应的jar包:commons-logging-1.1.1.jar 和dwr.jar;

、在我们的myeclipse中新建一个web项目,其中我们需要进行的一个操作就是把我们刚刚下载的两个jar包,放置在我们的lib文件夹下面;

、需要自己新建一个web.xml,其中类型的就是一个进行的过滤的操作设置,学习过struts的可以看出来这里的操作就是一个简单的过滤设置,我们可以借助官网给出的实例进行我们的数据的建立如下:web.xml:

<!-- lang: xml -->
 <!-- lang: xml -->
<!-- lang: xml -->
           <?xml version="1.0" encoding="UTF-8"?>
<!-- lang: xml -->
<web-app version="2.5" 
<!-- lang: xml -->
	xmlns="http://java.sun.com/xml/ns/javaee" 
<!-- lang: xml -->
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
<!-- lang: xml -->
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
<!-- lang: xml -->
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<!-- lang: xml -->
	
<!-- lang: xml -->
	
<!-- lang: xml -->
<servlet>
<!-- lang: xml -->
  <display-name>DWR Servlet</display-name>
<!-- lang: xml -->
  <servlet-name>dwr-invoker</servlet-name>  
<!-- lang: xml -->
  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<!-- lang: xml -->
  <init-param>
<!-- lang: xml -->
     <param-name>debug</param-name>
<!-- lang: xml -->
     <param-value>true</param-value>
<!-- lang: xml -->
  </init-param>
<!-- lang: xml -->
</servlet>
<!-- lang: xml -->

<!-- lang: xml -->
<servlet-mapping>
<!-- lang: xml -->
  <servlet-name>dwr-invoker</servlet-name>
<!-- lang: xml -->
  <url-pattern>/dwr/*</url-pattern>
<!-- lang: xml -->
</servlet-mapping>
<!-- lang: xml -->
	
<!-- lang: xml -->
	
<!-- lang: xml -->
	
<!-- lang: xml -->
	
<!-- lang: xml -->
  <welcome-file-list>
<!-- lang: xml -->
    <welcome-file>index.jsp</welcome-file>
<!-- lang: xml -->
  </welcome-file-list>
<!-- lang: xml -->
</web-app>
<!-- lang: xml -->

<!-- lang: xml -->
    <!-- lang: xml -->

、上述的web.xml和接下来的dwr.xml都是放置在WEB-INF文件下面的 dwr.xml

<!-- lang: xml -->
  <!-- lang: xml -->
<!-- lang: xml -->
     <!DOCTYPE dwr PUBLIC
<!-- lang: xml -->
    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
<!-- lang: xml -->
    "http://getahead.org/dwr/dwr30.dtd">
<!-- lang: xml -->

<!-- lang: xml -->
<dwr>
<!-- lang: xml -->
  <allow>
<!-- lang: xml -->
    <create creator="new" javascript="test">
<!-- lang: xml -->
      <param name="class" value="com.fww.service.Test"/>
<!-- lang: xml -->
    </create>
<!-- lang: xml -->
   
<!-- lang: xml -->
  </allow>
<!-- lang: xml -->
</dwr>
<!-- lang: xml -->
    <!-- lang: xml -->


配置文中的意思就是说我的是一个新创建的一个test类,其中在js中使用的时候需要使用的test进行一个对象的创建和使用。

、测试类java的建立:

Test:

<!-- lang: xml -->
 <!-- lang: java -->
<!-- lang: xml -->
  package com.fww.service;
<!-- lang: xml -->

<!-- lang: xml -->
public class Test {
<!-- lang: xml -->
	
<!-- lang: xml -->
	public Test() {
<!-- lang: xml -->
		System.out.println("初始化的操作!");
<!-- lang: xml -->
	}
<!-- lang: xml -->

<!-- lang: xml -->
	public int add(int a,int b){
<!-- lang: xml -->
		System.out.println("使用了一次哦!");
<!-- lang: xml -->
		return a+b;
<!-- lang: xml -->
	}
<!-- lang: xml -->
}
<!-- lang: xml -->

<!-- lang: xml -->
    <!-- lang: java -->

,项目部署之后,我们需要把项目启动,然后再地址栏中输入的是项目名称下面的/dwr/*的操作,其中我们可以看到我们自己写的一个Test的js对应的test假对象了,点击这个test我们可以看到所有的暴漏在外面的,用户可以调用方法,我们需要注意其实几行的时候的两行js代码,读英语的说明,我们可以知道使用的时候,我们需要把这两个js导入到我们使用的页面中去,下面是我的引用的页面

index.jsp:

<!-- lang: html -->
 <!-- lang: html -->
<!-- lang: html -->
   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- lang: html -->
<%
<!-- lang: html -->
	String path = request.getContextPath();
<!-- lang: html -->
	String basePath = request.getScheme() + "://"
<!-- lang: html -->
			+ request.getServerName() + ":" + request.getServerPort()
<!-- lang: html -->
			+ path + "/";
<!-- lang: html -->
%>
<!-- lang: html -->

<!-- lang: html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- lang: html -->
<html>
<!-- lang: html -->
<head>
<!-- lang: html -->
<base href="<%=basePath%>">
<!-- lang: html -->

<!-- lang: html -->
<title>My JSP 'index.jsp' starting page</title>
<!-- lang: html -->
<Meta http-equiv="pragma" content="no-cache">
<!-- lang: html -->
<Meta http-equiv="cache-control" content="no-cache">
<!-- lang: html -->
<Meta http-equiv="expires" content="0">
<!-- lang: html -->
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!-- lang: html -->
<Meta http-equiv="description" content="This is my page">
<!-- lang: html -->
<script type='text/javascript' src='/dwr_001/dwr/interface/test.js'></script>
<!-- lang: html -->
<script type='text/javascript' src='/dwr_001/dwr/engine.js'></script>
<!-- lang: html -->
<script type="text/javascript">
<!-- lang: html -->
	function tt() {
<!-- lang: html -->
		test.add(1,2);
<!-- lang: html -->
		test.add(5,6,function(result){
<!-- lang: html -->
			document.getElementById("divid").innerHTML = result;
<!-- lang: html -->
		});
<!-- lang: html -->
	}
<!-- lang: html -->
</script>
<!-- lang: html -->
</head>
<!-- lang: html -->

<!-- lang: html -->
<body>
<!-- lang: html -->
	This is my JSP page.
<!-- lang: html -->
	<br>
<!-- lang: html -->
	<input type="button" onclick="tt();" value="点击我进行测试">
<!-- lang: html -->
	<div id="divid" ></div>
<!-- lang: html -->
</body>
<!-- lang: html -->
</html>
<!-- lang: html -->

<!-- lang: html -->
    <!-- lang: html -->


  如此的操作之后,我们可以发现自己的代码比起之前的ajax的请求时候,少了很多,而且我们同样的是可以实现ajax的操作。

猜你在找的Ajax相关文章