dwr动态载入小结

dwr动态载入小结

笔记在实际开发中用到dwr框架，一直以来，常为加载中提示用户等待这问题困扰，经笔者研究，摸索出一个切实可行的方案，供大家参考。实例如下:<a style="cursor:hand"  onclick="changeStatus(this);Test.invoke('${parameters}','${pageId}',callBack);"><img src='/icon.gif'></a>函数说明:changeStatus我们将用来改变提示状态值Test类的invoke函数将触发从台数据库取出值然后通过回调函数callBack负责在页面显示出来

页面配置

<script type='text/javascript' src='/dwr/interface/Test.js'></script><script type='text/javascript' src='/dwr/engine.js'></script><script type='text/javascript' src='/dwr/util.js'></script><script type='text/javascript' src="/js/prototype-1.4.0.js"></script>

 

dwr.xml

<!DOCTYPE dwr PUBLIC        "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"        "http://www.getahead.ltd.uk/dwr/dwr10.dtd"><dwr>    <allow>   <create creator="new" javascript="Test">            <param name="class" value="pakage.Test"/>        </create>        <convert converter="bean" match="pakage.Test"/>    </allow></dwr>

回调函数

var callBack=function(data){        var pageId=data.pageId;        var list=data.listEntityBean;        if ($(pageId).style.display == "none") {            $(pageId).style.display="block";            var htmlStr = "";            for (var i = 0; i < list.length; i++) {                 htmlStr +=...//这里是将list中的值取出来给一个字符串            }            $(pageId).innerHTML = htmlStr;            return;        }        $(pageId).style.display="none";    }

pakage.Test类

public class Test  {    private String pageId;private List list;    public String getPageId() {        return pageId;    }    public void setPageId(String pageId) {        this.pageId = pageId;    }public String getList() {        return list;    }    public void setList(List list) {        this.list = list;    }   static Log log= LogFactory.getLog(Test.class);   public void invoke(String parameter,String pageId){      this.setPageId(pageId);  this.list=...//这里根据参数从数据库里取出值来  return this;   }

至些我们完成的dwr的编写。

function changeStatus(obj){    var htmlStr = "";    var oPopup = window.createPopup();    DWREngine.setPreHook(function() {     //这是正在加载的代码        htmlStr = "<img src=/"/loading.gif/">";        obj.innerHTML = htmlStr;//这里是改变传入对象的值，是dwr正在加载时的提示,如loading,我这里是用的是图片        var oPopupBody = oPopup.document.body;        oPopupBody.innerHTML = "<img src='/admin/images/spinner.gif'>";        oPopup.show((Math.abs(Math.round((document.body.clientWidth-50) / 2))), Math.abs(Math.round((document.body.clientHeight-50)/ 2)), 100, 100, document.body);    });    DWREngine.setPostHook(function() {    //这是加载完成的代码        htmlStr = "<img src=/"/loadok.gif/">";//这里是改变传入对象的值，是dwr加载时完成的提示,如load ok,我这里是用的是图片        obj.innerHTML = htmlStr;        oPopup.hide();    });}   

以上代码，是我在项目中抽取出来的一部份。小说明一下：var oPopup = window.createPopup();这个函数用于创建浮动页面的loading载入提示，加载完成后将对象进行oPopup隐藏处理oPopup.hide();如果不须要，changeStatus这个函数完全可以这样写

function changeStatus(obj){    DWREngine.setPreHook(function() {     //这是正在加载的代码        obj.innerHTML = "<img src=/"/loading.gif/">";//这里是改变传入对象的值，是dwr正在加载时的提示,如loading,我这里是用的是图片    });    DWREngine.setPostHook(function() {    //这是加载完成的代码        obj.innerHTML = "<img src=/"/loadok.gif/">";//这里是改变传入对象的值，是dwr加载时完成的提示,如load ok,我这里是用的是图片    });} 
至此我们完美的完成了dwr加载时的提示问题，这样也使用户体更强，更具人性化.