您的位置:首页 > 其它

dwr 实现页面数据加载等待状态

2011-06-14 11:13 375 查看
问题:

用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() {

vardisabledZone = $('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() {

vardisabledImageZone = $('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';

});

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: