一、DWR是什么   DWR(Direct Web Remoting)是一个用于改善web页面与java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。 介绍   它包含两个主要的部分:允许JavaScript从WEB服务器上一个遵循了AJAX原则的Servlet中获取数据.另外一方面一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内容.   DWR采取了一个类似AJAX的新方法来动态生成基于java类的JavaScript代码.这样WEB开发人员就可以在JavaScript里使用Java代码就像它们是浏览器的本地代码(客户端代码)一样;但是Java代码运行在WEB服务器端而且可以自由访问WEB 服务器的资源.出于安全的理由,WEB开发者必须适当地配置哪些java类可以安全的被外部使用.   这个从JAVA到JavaScript的远程功能方法给DWR的用户带来非常像传统的RPC机制,就像RMI或者SOAP一样,而且拥有运行在WEB上但是不需要浏览器插件的好处.   DWR不认为浏览器/WEB服务器协议是重要的,而更乐于保证编程界面的简单自然.对此最大的挑战就是把AJAX的异步特性和正常JAVA方法调用的同步特性相结合.在异步模式下,结果数据在开始调用之后的一段时间之后才可以被异步访问获取到.DWR允许WEB开发人员传递一个回调函数,来异步处理Java函数调用过程.   另处 .dwr还是文件的一种格式: 比如以Dreamweaver软件里有查找和替换,经常用的查找和替换内容可以保存,保存的文件就是以 .dwr结尾的文件。这种文件用记事本打开后可以看到它的内容。 二、DWR与Ajax的区别 1. Ajax可以说是一种创建交互式网页应用的网页开发技术,实现局部刷新等功能,采用客户端脚本与Web服务器交换数据 2.Dwr是一种框架,并且它是基于Ajax的基础之上,所以Ajax的功能Dwr也具有了,能够在javaScript直接调用java方法,实现局部刷新,也可以说Dwr是对Ajax的java封装。 三、DWR的部署 3.1 dwr.xml的配置    -------------------------------------------------------------------- <dwr>    <allow>    <create creator="new" javascript="testClass" >    <include method="testMethod1"/> <include method="testMethod2"/> <include method="testMethod3"/> </create>    </allow>    </dwr> --------------------------------------------------------------------   <allow>标签中包括可以暴露给javascript访问的东西。    <create>标签中指定javascript中可以访问的java类,并定义DWR应当如何获得要进行远程的类的实例。creator="new"属性指定java类实例的生成方式,new意味着DWR应当调用类的默认构造函数来获得实例,其他的还有spring方式,通过与IOC容器Spring进行集成来获得实例等等。javascript=" testClass "属性指定javascript代码访问对象时使用的名称。标签指定要公开给javascript的java类名。    <include>标签指定要公开给javascript的方法。不指定的话就公开所有方法。    <exclude>标签指定要防止被访问的方法。 3.2 javascript中调用 首先,引入javascript脚本 <script src='/[WEB-APP]/dwr/interface/ testClass.js'></script> <script src='/[WEB-APP]/dwr/engine.js'></script> <script src='/[WEB-APP]/dwr/util.js'></script> 其中TestClass.js是dwr根据配置文件自动生成的,engine.js和util.js是dwr自带的脚本文件。 其次,编写调用java方法的javascript函数 Function callTestMethod1(){ testClass.testMethod1(); } 3.3有返回值的调用 首先,引入javascript脚本 其次,编写调用java方法的javascript函数和接收返回值的回调函数 Function callTestMethod2(){ testClass.testMethod2(callBackFortestMethod2); } Function callBackFortestMethod2(data){ //其中data接收方法的返回值 //可以在这里对返回值进行处理和显示等等 alert("the return value is " + data); } 其中callBackFortestMethod2是接收返回值的回调函数 3.4调用有简单参数的java方法 首先,引入javascript脚本 其次,编写调用java方法的javascript函数 Function callTestMethod3(){ //定义要传到java方法中的参数 var data; //构造参数 data = “test String”; testClass.testMethod3(data); } 四、DWR的使用 五、Ajax之Dwr同步与异步 设置dwr的javas cript:dwr.engine.setAsync(false);将dwr的通信方式改成同步的.(既dwr会等待服务器.将数据接受完毕后.再继续进行.) javascript:dwr.engine.setAsync(false);的作用域.是当前的整个页面.既是javascript:dwr.engine.setAsync(false)在同一张页面上有用.既设置了以后这张页面上的所有dwr方法都是同步的.但是其他的页面如果用到了dwr调用远程方法还是异步的. 具体测试: 在dwr中,由于请求都被封装起来了,就没有办法通过上面方法设置同步执行了。 解压dwr.jar,可以发现里面有engine.js,在它的里面有一个方法 DWrengine.setAsync = function(async){ DWrengine._async = async; }; 这个async默认值为true. 如果需要同步执行的话,就可以在执行的方法加上上面这个设置例如: DWrengine.setAsync(false); var _data = false; Messages.getConfrimMessage(function(data){ _data= data ; }); alert(_data); //再设置成异步执行 DWrengine.setAsync(true); 由此可以看到,如果不设置同步就会出现alert出来的数据总会是false,所以有同步一下就没问题了。 项目中的应用 // 通过监测类型id和区域名称 获取对应的取样点 functiongetQydAndJcxm(){ var jclxid =document.getElementByIdx_x("value(jclxmc)").value; var jcqymc =document.getElementByIdx_x("value(jcqymc)").value; // Dwr同步通信方式 DWrengine.setAsync(false); hjhbDwrService.getQyd(jclxid,jcqymc,{ callback:function(data){ for(var i=0;i<data.length;i++){ var xh=jcxx.rows.length; var qyid = data[i].id;// 取样点id var qydname = data[i].tymc;//取样点 hjhbDwrService.getAllJcxm(data[i].id,{ callback:function(data2){ var td = 0; var oTR = jcxx.insertRow(jcxx.rows.length); oTD=oTR.insertCell(td); oTD.innerHTML = qydname; for(var j=0;j<data2.length;j++){ oTD=oTR.insertCell(++td); oTD.width = "30px"; oTD.innerHTML= data2[j].tymc+":<inputid='jcz"+xh+"' type='text'name='ass1Value(jcz"+xh+")'> <inputid='qyd"+xh+"' type='hidden' name='ass1Value(qyd"+xh+")'value='"+qydname+"'> <inputid='jcxm"+xh+"' type='hidden' name='ass1Value(jcxm"+xh+")'value='"+data2[j].tymc+"'><inputid='jcqymc"+xh+"' type='hidden' name='ass1Value(jcqymc"+xh+")'value='"+jcqymc+"'><inputid='jclxmc"+xh+"' type='hidden' name='ass1Value(jclxmc"+xh+")'value='"+jclxid+"'><inputid='xmzb"+xh+"' type='hidden' name='ass1Value(xmzb"+xh+")'value='"+data2[j].xmzb+"'><inputid='xmjldw"+xh+"' type='hidden' name='ass1Value(xmjldw"+xh+")'value='"+data2[j].xmjldw+"'><inputid='ysf"+xh+"' type='hidden' name='ass1Value(ysf"+xh+")'value='"+data2[j].ysf+"'>"; } } }); } } }); // Dwr异步通信方式 DWrengine.setAsync(true); }

DWR使用详解的更多相关文章

  1. canvas中普通动效与粒子动效的实现代码示例

    canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。本文详细的介绍了粒子特效,和普通动效进行对比,非常具有实用价值,需要的朋友可以参考下

  2. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  3. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. canvas学习和滤镜实现代码

    这篇文章主要介绍了canvas学习和滤镜实现代码,利用 canvas,前端人员可以很轻松地、进行图像处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  7. localStorage的过期时间设置的方法详解

    这篇文章主要介绍了localStorage的过期时间设置的方法详解的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. 详解HTML5 data-* 自定义属性

    这篇文章主要介绍了详解HTML5 data-* 自定义属性的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. HTML5的postMessage的使用手册

    HTML5提出了一个新的用来跨域传值的方法,即postMessage,这篇文章主要介绍了HTML5的postMessage的使用手册的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. 教你使用Canvas处理图片的方法

    本篇文章主要介绍了教你使用Canvas处理图片的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部