频道导航

DWR之DWR实例(1)

2020-05-24 Ajax 前端之家

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

原文出处：http://www.jb51.cc/article/p-dnhaebgx-pp.html

DWR之DWR实例(1)

----------

1.首先向项目中加入dwr.jar文件,这里我们使用maven构建，同时dwr还要依赖commons-logging.jar包，如例（pom.xml）:

[html]view plaincopy 
   
 <projectxmlns="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.0http://maven.apache.org/maven-v4_0_0.xsd">
modelVersion>4.0.0</>
 groupId>aaaartifactId>bbbpackaging>warversion>0.0.1-SNAPSHOTname>bbbMavenWebappurl>http://maven.apache.orgdependenciesdependency>junit>3.8.1scope>test <!--必需的依赖-->
>org.directwebremoting>dwr>3.0.M1>commons-logging>1.1.1buildfinalNameproject>

2.在web.xml文件中增加DWRSevlet的配置，DWR指定映射路径的js(如：带有/dwr)都由这个servlet处理，就像这些路径的js(带有/dwr的路径)：

copy 
    
   

src

'/[YOUR-WEBAPP-CONTEXT]/dwr/interface/[YOUR-SCRIPT].js'

script

src

'/[YOUR-WEBAPP-CONTEXT]/dwr/engine.js'

这两个件都是虚拟文件，并不是真实的文件。

web.xml的配置如下：

copy 
    
   

xml

version

"1.0"

encoding

"UTF-8"

web-appxmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2eehttp://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4"
display-name>firstDWRwelcome-file-listwelcome-file>index.jsp
servlet>DWRServletservlet-name>dwr-invokerservlet-class>org.directwebremoting.servlet.DwrServlet
init-paramparam-name>debugparam-value>true
>crossDomainSessionSecurity>falseservlet-mappingurl-pattern>/dwr/*
web-app>

3.创建dwr.xml文件(与web.xml在同一个目录):

copy 
    
   

<!DOCTYPEdwrPUBLIC

"-//GetAheadLimited//DTDDirectWebRemoting3.0//EN""http://getahead.org/dwr/dwr30.dtd"dwrallowcreatecreator="new"javascript="MathDelegate"paramname="class"value="app.MathDelegate"/>
create>

4.创建java文件，如：MathDelegate.java文件：

 
   [java] 
   copy 
   @H_605_502@ 
   

packageapp;

/**
*数值计算
*@authorfuhd
*/
publicclassMathDelegate{
/**加法*/
intadd(inta,intb){
returna+b;
}
/**减法*/
intsubtract(returna-b;
/**乘法*/
intmultiply(returna*b;
/**除法*/
intdivide(returna/b;
}

5.创建jsp文件(可以是html或其它模板的文件)，如：index.jsp ：

copy 
    
   

head

title

firstdwr

script

type

"text/javascript"

src

"dwr/interface/MathDelegate.js"

script

type

"text/javascript"

src

"dwr/engine.js"

vara=0;

varb=0;

varop="";

functiondoMath(){

a=document.getElementById("numA").value;

b=document.getElementById("numB").value;

op=document.getElementById("op").value;

if(op=="add"){

MathDelegate.add(a,b,doMathCallback);

op="+";

}elseif(op=="subtract"){

MathDelegate.subtract(a,doMathCallback);

op="-";

}elseif(op=="multiply"){

MathDelegate.multiply(a,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> op="*";

}elseif(op=="divide"){

MathDelegate.divide(a,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> op="/";

}

vardoMathCallback=function(answer){

document.getElementById("resultDiv").innerHTML="<h1>"+

"Result:"+a+""+op+""+b+"="+answer+"h1>";

};

bodyspanid="resultDiv"span Pleaseentertwonumbers,selectanoperation,andclicktheequalsbutton:

brinputtype="text"id="numA"size="4"/>

selectid="op"optionvalue="add">+optionoptionvalue="subtract">-optionvalue="multiply">*optionvalue="divide">/selectinputtype="text"id="numB"size="4"inputtype="button"value="="onclick="doMath();">

原文出处：http://www.jb51.cc/article/p-dnhaebgx-pp.html

原文链接：https://www.f2er.com/ajax/165870.html