将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">
<select id="op">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="text" id="numB" size="4">
<input type="button" value="=" οnclick="doMath();">
</body>
</html>