DWR实例（基于Servlet实现：加、减、乘、除）

wei_peng_84

浏览: 63249 次
性别:
来自: 苏州

最近访客更多访客>>

Cwind

wenxiang0508

levenew

我叫锄头

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

DWR Servlet JavaScript JSP Ajax

将dwr分类中的《Servlet实现：加、减、乘、除》，基于DWR框架，进行修改。使用异步Ajax实现，

具有更好的用户体验。

修改步骤：(MathDelegate类不要作任何修改)

1、web.xml

使用uk.ltd.getahead.dwr.DWRServlet拦截，所有的以/dwr 开头的URI

2、dwr.xml

配置需要在javaScript中的调用的MathDelegate类

3、index.jsp

引入MathDelegate代理<script type="text/javascript" src="dwr/interface/MathDelegate.js" />

web.xml

<!-- The DWR servlet uk.ltd.getahead.dwr.DWRServlet -->
<servlet>
	<servlet-name>dwr-invoker</servlet-name>   
	<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>   
</servlet>
<servlet-mapping>
	<servlet-name>dwr-invoker</servlet-name>   
	<url-pattern>/dwr/*</url-pattern>  
</servlet-mapping>
  
<!-- Default page to load in context -->  
<welcome-file-list>  
		<welcome-file>index.jsp</welcome-file>  
</welcome-file-list>

dwr.xml

<create creator="new" javascript="MathDelegate" scope="application">
			<param name="class" value="vivi.test.dwr.MathDelegate" />
</create>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>第一个简单的DWR实例</title>
		<script type="text/javascript" src="dwr/interface/MathDelegate.js"></script>
		<script type="text/javascript" src="dwr/engine.js"></script>
		<script type='text/javascript' src='dwr/util.js'></script>  
		<script language="javascript">
			var a = 0; 
			var b = 0;
			var op = "";
			//do method
			function doMath(){
				a = document.getElementById("numA").value;
				b = document.getElementById("numB").value;
				op = document.getElementById("op").value;
				if(op == "add"){
					MathDelegate.add(a, b, doMathCallBack);
					op = "+";
				}else if(op == "subtract"){
					MathDelegate.subtract(a, b, doMathCallBack);
					op = "-";
				}else if(op == "multiply"){
					MathDelegate.multiply(a, b, doMathCallBack);
					op = "*";
				}else if(op == "divide"){
					MathDelegate.divide(a, b, doMathCallBack);
					op = "/";
				}
			}			
			//call back method
			var doMathCallBack = function(answer){
				document.getElementById("resultDiv").innerHTML = "<h1><font color='red'>" + 
					"RESULT: " + a + " " + op + " " + b + " = " + answer + "</font></h1>";
			}

		</script>
	</head>
	<body>	
		
		<span id="resultDiv"></span><br>
		
		Please enter two numbers, select an operation , and click the equals button:
		<br></br>
	
		<input type="text" id="numA" size="4">
		&nbsp;
		<select id="op">
			<option value="add">+</option>
			<option value="subtract">-</option>
			<option value="multiply">*</option>
			<option value="divide">/</option>
		</select>
		&nbsp;
		<input type="text" id="numB" size="4">
		&nbsp;
		<input type="button" value="=" onclick="doMath();">
		
	</body>
</html>

分享到：