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