1。加载DWR的jar包。
2。配置web.xml
<!-- dwr -->
<servlet>
<servlet-name>dwr-invoke</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoke</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
3.在web.xml所在的目录下建立一个dwr.xml(这个xml的作用主要用于建立页面与java方法的对应法则)
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<!-- 上面的说明一定要有-->
<dwr>
<!-- allow段落里面定义的试DWR可以创建和转换的类。-->
<allow>
<!--create用于定义一个在页面调用的js对象-->
<!--creator用来指定使用那种创造器,new:用于java.spring:通过Spring框架访问Bean.jsf:使用JSF的Bean.Struts:struts的formBean。pageflow:访问Beehive或Weblongic的pageflow. javascript用来定义一个页面调用后台方法的对象名称-->
<create creator="new" javascript="Demo">
<!--param用于指向接受和处理的java类。在页面可以利用Demo来调用DwrTest这个java类里的方法-->
<param name="class" value="action.DwrTest"/>
<!--如果<include method=“”/>没有配置;那class内的所有方法都是被允许调用的-->
<include method=“getName“ />
</create>
</allow>
</dwr>
4.编写java类:DwrTest
public class DwrTest {
public int getName(String name){
System.out.println("my name is:"+name);
return 1;
}
}
5,在index.html里面我们嵌入
<script type='text/javascript' src='dwr/engine.js'> </script>
<script type='text/javascript' src='dwr/util.js'> </script>
<script type='text/javascript' src='dwr/interface/Demo.js'> </script>
首先引入DWR中的两个核心javascript库:engine.js和util.js,它们分别是dwr中的核心引擎库和辅助工具函数库!
第三个引入的dwr/interface/Demo.js,实际上这个文件并不存在,这是由dwr在运行的时候动态生成的!Demo这个名称,跟dwr.xml文件中配置的对应对象的javascript属性一致!
而且,我们在使用的时候,直接使用Dome这个名称,作为这个对象的引用。直接调用这个对象的方法:getName(),这个方法的名称必须与JavaBean中的方法名称一致!
getName()方法有一个参数,同时返回一个值。我们可以直接传递参数,同时指定一个javascript函数来处理这个返回值
index.html页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DWR - Test Home</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'> </script>
<script type='text/javascript' src='dwr/interface/Demo.js'></script>
<script>
/*ged()函数是用来取得页面的值,并将页面的值传递给服务器*/
function ged(){
var name = dwr.util.getValue("demoName");
Demo.getName(name,haolejiaowo);
}
/* 回调函数用来获取服务器传递过来的值,并将服务器响应的值动态展示到页面上*/
function haolejiaowo(data){
dwr.util.setValue("demoReply", data);
}
/**********原始的ajax传递方式*************/
//创建XmlHttpRequest对象,首先对浏览器进行判断
function createXmlHttpRequest(){
var xmlreq=false;
if(window.XMLHttpRequest){
xmlreq=new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
//创建较新版本的对象
xmlreq=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e1){
try{
xmlreq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e2){
}
}
}
return xmlreq;
}
var request;
function testUse(){
var useValue=document.getElementById("demoName").value;
request=createXmlHttpRequest();//创建xmlHttpRequest对性
/*url用到了Struts1.2中的Actionneirong.需要自动以一个继承自DispathAction的Action*/
var url="user.do?method=ajaxtest&useue="+useValue;
//建立到服务器的新请求
request.open("post",url);
//向服务器发送请求
request.send();
//指定readyState属性改变时的事件处理
request.onreadystatechange=haole;
}
function haole(){
//status的状态0:未初始化。1:open方法成功调用以后。2:服务器已经应答客户端的请求。3:交互中,Http头部信息已经接收,相应数据尚未接收。4:完成。
if(request.readyState==4&& request.status==200){ //responseText
var data=request.responseText;
dwr.util.setValue("demoReply", data); }
}
</script>
</head>
<body>
<p>
Name:
<input type="text" id="demoName"/>
<input value="Send" type="button" onclick="testUse()"/>
<br/>
Reply: <span id="demoReply"></span>
</p>
</body>
</html>