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_x_x('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_x_x('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_x_x('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_x_x('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'; }); }