DWR实战二 loading界面创建

    常见的一个需求是，当页面请求在服务器端需要较长处理时间时，在页面上最好给用户
一个提示消息框，这称为loading页面，如果你还没看到过这个东东，请参看一下gMail的界
面。
   DWR中要实现这个功能非常简单！简单得只需要一句话：
dwr.util.useLoadingMessage("正在处理，请秒候. . .");
以上节为例，只需要在updateResult()函数体中第一行加上这句话就是：
/**响应界面事件，调用java对象的方法*/
function updateResult() {
      //显示loading界面：
dwr.util.useLoadingMessage("正在处理，请秒候. . .")
      //使用dwr工具类得到userName组件内的值
    var name = dwr.util.getValue("userName");
    //调用服务器上的对象方法，并设定回调函数
    FirstDWR.sayHello(name,callBack);
}
OK，重测试，还看不到？那是因为太快了，它一闪而过---修改FirstDWR中的sayHello方
法如下：
public String sayHello(String userName){
//为了前台显示loading界面，模拟任务占用较长时间
try{
Thread.sleep(3000);
}catch(Exception ef){}
System.out.println("客户端发送的请求是: "+userName);
count++;
return count+" "+userName+" 您好!服务器时间是:"+System.currentTimeMil-
lis();
}

但这个loading可能还不会让你满意？其实它总是出现在屏的右上角；它的颜色总是红的，如果能将

一幅gif动画显示到loading中多好？
/**载入loading动画,imageSrc:动画图片地址*/
function useLoadingImage(imageSrc) {
  var loadingImage;
  if (imageSrc) loadingImage = imageSrc;
  else loadingImage = "ajax-loader.gif";
  dwr.engine.setPreHook(function() {
    var disabledImageZone = $('disabledImageZone');
    if (!disabledImageZone) {
      disabledImageZone = document.createElement('div');
      disabledImageZone.setAttribute('id', 'disabledImageZone');
      disabledImageZone.style.position = "absolute";
      disabledImageZone.style.zIndex = "1000";
      disabledImageZone.style.left = "0px";
      disabledImageZone.style.top = "0px";
      disabledImageZone.style.width = "100%";
      disabledImageZone.style.height = "100%";
      var imageZone = document.createElement('img');
      imageZone.setAttribute('id','imageZone');
      imageZone.setAttribute('src',imageSrc);
      imageZone.style.position = "absolute";
      imageZone.style.top = "0px";
      imageZone.style.right = "0px";
      disabledImageZone.appendChild(imageZone);
      document.body.appendChild(disabledImageZone);
     
    }
    else {
      $('imageZone').src = imageSrc;
      disabledImageZone.style.visibility = 'visible';
    }
  });
  dwr.engine.setPostHook(function() {
    $('disabledImageZone').style.visibility = 'hidden';
  });
}
————————————————————————
/**响应界面事件，调用java对象的方法*/
function updateResult() {
      //显示loading界面：
        //window.showModalDialog("index.jsp");
useLoadingImage("image/panda.gif")     
//不用这个了。
//dwr.util.useLoadingMessage("正在处理，请秒候. . .")
      //使用dwr工具类得到userName组件内的值
    var name = dwr.util.getValue("userName");
    //调用服务器上的对象方法，并设定回调函数
    FirstDWR.sayHello(name,callBack);
}

 

 

附件：csdn空间4/netjavaDWR(加载入效果).rar
参考手册：  ajax框架：dwr》实战(包括整合).pdf （非常好）
下载地址：http://d.download.csdn.net/down/784587/alihoo