用dwr技术显示页面数据加载状态

问题:
用dwr技术查询海量数据时,用户点击按钮,提交请求后,页面长时间没反应.问题反映到我这.当然除了要提高性能外,也得给用户一个提示,比如出现"正在加载数据.."的提示.
解决办法:
如果要实现这种效果,就得在客户端用js判断加载情况，请求前是一种状态,请求后(后台处理,返回数据给前台)又是一种状态.

dwr工具包提供了两个函数,专门处理这两种情况:
(1) 请求前处理
DWREngine.setPreHook(jsfun)
在DWR调用之前设置执行一个函数(但是这个函数无参数),例如显示"正在加载数据.."信息
(2)请求后处理
DWREngine.setPostHook(jsfun) 在DWR调用之后要执行的函数.例如隐藏"正在加载数据.."信息

DWREngine.setPreHook(jsfun)在调用DWR之前，运行jsfun函数。DWREngine.setPostHook(jsfun)在调用完DWR后，运行jsfun函数。
当然我们可以用它来显示程序运行时的动画效果.

//====================================================================

//显示文字提示消息
function useLoadingMessage(message) {
  var loadingMessage;
  if (message) loadingMessage = message;
  else loadingMessage = "Loading";

  DWREngine.setPreHook(function() {
    var disabledZone = $('disabledZone');
    if (!disabledZone) {
      disabledZone = document.createElement('div');
      disabledZone.setAttribute('id', 'disabledZone');
      disabledZone.style.position = "absolute";
      disabledZone.style.zIndex = "1000";
      disabledZone.style.left = "0px";
      disabledZone.style.top = "0px";
      disabledZone.style.width = "100%";
      disabledZone.style.height = "100%";
      document.body.appendChild(disabledZone);
      var messageZone = document.createElement('div');
      messageZone.setAttribute('id', 'messageZone');
      messageZone.style.position = "absolute";
      messageZone.style.top = "0px";
      messageZone.style.right = "0px";
      messageZone.style.background = "red";
      messageZone.style.color = "white";
      messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
      messageZone.style.padding = "4px";
      disabledZone.appendChild(messageZone);
      var text = document.createTextNode(loadingMessage);
      messageZone.appendChild(text);
    }
    else {
      $('messageZone').innerHTML = loadingMessage;
      disabledZone.style.visibility = 'visible';
    }
  });

  DWREngine.setPostHook(function() {
    $('disabledZone').style.visibility = 'hidden';
  });
}

//====================================================================
//用图片显示动态效果
function useLoadingImage(imageSrc) {
  var loadingImage;
  if (imageSrc) loadingImage = imageSrc;
  else loadingImage = "ajax-loader.gif";
  DWREngine.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';
    }
  });
  DWREngine.setPostHook(function() {
    $('disabledImageZone').style.visibility = 'hidden';
  });
}

评论

5 楼 shandian534 2008-11-14  

怎样改变它显示的位置啊？

4 楼 xuey210 2008-09-10  

为什么程序走到了
DWREngine.setPreHook()
这一步，
就不进行了，直接跳过了这个方法。

3 楼 zhangxi123 2008-06-03  

直接调用方法名就可以了。

2 楼 zhangxi123 2008-06-03  

直接调用方法名就可以了。

1 楼 fb97001 2008-05-14  

能否问下如何调用