Dwr 框架简单实例

前端之家收集整理的这篇文章主要介绍了Dwr 框架简单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Dwr 是一个 Java 开源库,帮助你实现Ajax网站。

它可以让你在浏览器中的Javascript代码调用Web服务器上的Java,就像在Java代码就在浏览器中一样。

Dwr 主要包括两部分:

在服务器上运行的 Servlet 来处理请求并把结果返回浏览器。

运行在浏览器上的 Javascript,可以发送请求,并动态改变页面

Dwr 会根据你的 Java 类动态的生成Javascript代码

这些代码的魔力是让你感觉整个Ajax调用都是在浏览器上发生的,但事实上是服务器执行了这些代码,DWR负责数据的传递和转换。

从DWR官网下载最新版本的jar包,地址:http://directwebremoting.org/dwr/downloads/index.html

将jar包放入WEB-INF的lib文件夹下。同时,dwr依赖于commons-logging.jar这个包

配置 web.xml 文件如下

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param></servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern></servlet-mapping>

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

配置 dwr 如下

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting2.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr20.dtd"><!--关键配置--><dwr>
<allow>
<createcreator="new"javascript="Chat">
<paramname="class"value="com.epri.xts.wxqyh.app.chatroom.module.Chat"/>
</create>
<convertconverter="bean"match="com.epri.xts.wxqyh.app.chatroom.bean.Message"/>
</allow></dwr><!--
<!DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN""http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<!DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting2.0//EN""http://www.getahead.ltd.uk/dwr/dwr20.dtd">-->

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

dwr.xml 是 dwr 的核心配置文件,主要的标签有:<converter>、<convert>、<create>这三个标签

<create> 标签是 dwr 中重要的标签,用来描述 java(服务器端) 与 javascript (客户端)的交互方式。其基本格式如下:

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

<allow>
<createcreator="..."javascript="..."scope="...">
<paramname="..."value="..."/>
<authmethod="..."role="..."/>
<excludemethod="..."/>
<includemethod="..."/>
</create>
...</allow>

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

其中,creator 和 javascript 是必须属性,其他可以忽略。creator 包含有以下几个值:

  new:Java用“new”关键字创造对象

  none:它不创建对象 (v1.1+)

  scripted:通过BSF使用脚本语言创建对象,例如BeanShell或Groovy

  spring:通过Spring框架访问Bean

  struts:使用Struts的FormBean (v1.1+)

  jsf:使用JSF的Bean (v1.1+)

  pageflow:访问Weblogic或Beehive的PageFlow (v1.1+)

  ejb3:使用EJB3 session bean (v2.0+)

这里初学,实用java new创建对象。

4、页面配置

页面需要引入3个JS

<scriptsrc=\'#\'" /dwr/interface/Chat.js"type="text/javascript"></script><scriptsrc=\'#\'" /dwr/engine.js"type="text/javascript"></script><scriptsrc=\'#\'" /dwr/util.js"type="text/javascript"></script>

其中 engine.js 必须要,如果需要用到dwr提供的一些方便的工具要引用util.js,然后是dwr自动生成的js文件

名字和 dwr.xml 中 create 标签的 javascript 属性值一样,且必须是 dwr/interface 开头的目录

5、javascript代码

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

//发送消息functionsendMessage(){vartext=DWRUtil.getValue("message");if(""!=text){
DWRUtil.setValue("message","");
Chat.addMessage(text,name,taskId,gotMessages);
}
}functiongotMessages(messages){varchatlog="";for(vardatainmessages){
chatlog="<div><liclass='even'>"+messages[data].text+"</li></div
}
DWRUtil.setValue("chatlog",chatlog);
setTimeout("queryMessage()",2000);
}

functionqueryMessage(){
Chat.getMessages(taskId,gotMessages);
}

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

HTML代码

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPEhtml><%
StringctxPath=request.getContextPath();%><html><head><title>聊天组</title><Metacharset="utf-8"><Metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="../css/jquery.mobile-1.4.5.min.css"><linkrel="stylesheet"type="text/css"href="../css/bootstrap.min.css"><linkrel="stylesheet"href="../css/add.css"><scriptsrc="../js/jquery-1.8.3.min.js"></script><scriptsrc="../js/jquery.mobile-1.4.5.min.js"></script></head><bodyclass="bgc"onload="queryMessage()">

<divdata-role="page"id="pageone">

<!--聊天内容显示区域-->
<divdata-role="content"class="container"role="main">
<ulclass="content-reply-Boxmg10"id="chatlog">

</ul>
</div>

<!--下方输入框-->
<divdata-position="fixed"data-role="footer">
<ulclass="footer">
<liclass="col-xs-3">
<spanclass="b_pic">
<formaction="<%=request.getContextPath()%>/chat"method="post"
enctype="multipart/form-data"data-ajax="false"name="form"
id="form"target="relnews">
<inputtype="hidden"name="name"id="name"value=""/>
<inputtype="hidden"name="taskId"id="taskId"value=""/>
<inputtype="file"name="image"id="image"class="photo"onchange="sendImage(this)"/>
</form>
</span>
</li>
<liclass="col-xs-6"><inputtype="text"name="fname"id="message"></li>
<liclass="col-xs-4"><ahref=""data-role="button"
class="b_submit"id="submitInfo"onclick='sendMessage();'>发送</a></li>
</ul>
</div>

</div>
<!--隐藏域作为表单提交后页面跳转使用-->
<iframealign="center"frameborder="0"marginheight="0"marginwidth="0"
name="relnews"id="hiddenIframe"scrolling="no"
style="width:100%;height:100%;display:none"></iframe>
</body><scriptsrc=\'#\'" /dwr/interface/Chat.js"type="text/javascript"></script><scriptsrc=\'#\'" /dwr/engine.js"type="text/javascript"></script><scriptsrc=\'#\'" /dwr/util.js"type="text/javascript"></script><scripttype="text/javascript"src="../js/chat.js"></script></html>

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

6、其他

dwr可以设置是否采用异步方式访问java代码

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

dwr.engine.setAsync(false);//false为同步,true(默认)为异步以及dwr对于异常的处理,这里标注一个简单的全局异常,细分的后续学习补充:

dwr.engine.setErrorHandler(errh);
functionerrh(errorString,exception){
errorFlag=true;
alert("操作失败!");
}

复制<a href=代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

猜你在找的Ajax相关文章