下載文件時遮罩層示例。

新需求是在原來的代碼上進行優化查詢。

優化完成之后導出功能還是需要1~3秒響應時間，畢竟數據量大，業務邏輯也較為復雜。

為了避免用戶重復點擊“導出”按鈕，故寫個遮罩層來示意用戶當前正在發送下載的請求。

點擊導出或下載按鈕彈出遮罩層,由於無法判斷文件什么時候在后台讀取完,遮罩層什么時候消失成了關鍵.

思路是這樣的:

　　在請求到后台下載的Servlet時,往Session中setAttribute一個值。

　　前台頁面寫個定時器,不斷請求另外一個Servlet獲取Session中set的值,當值為空字符串(當然你也可以自己把握)往頁面out.print(Json)發送Json對象。

　　頁面通過返回的json對象隱藏 遮罩層。

 

$('#submitBtn').on('click',function(){
        shadeLayer();  // 彈出遮罩層
			
	window.location.href = 'downServlet?filename=download.jpg&shadeKey=shadeLayer&shadeValue=' + new Date().getTime();
			
	var count = 0;
			
	var timer = setTimeout(function(){
		$.post('getShadeKey?shadeKey=shadeLayer', null, function(res){
			flag = res && res.shade;							
			count = res && res.flag === false ? count+1 : 0;
		});		
				
		if(flag && count < 3){  // 生產環境上集群了服務器,極端情況下讀取不到參數,容錯處理.
			timer = setTimeout(arguments.callee, 1000);
		} else {
			$('#layer').hide();
		}					
	}, 1000);			
						
});

 

// Servlet 關鍵代碼。
// session 鍵集合
Enumeration<String> enumeration = session.getAttributeNames();
        
boolean flag = false;
// 迭代 session 鍵
while(enumeration.hasMoreElements()){
  if(enumeration.nextElement().equalsIgnoreCase(shadeKey)){
        flag = true;
   }
}

String shade = (String)session.getAttribute(shadeKey);
Shade sd = null; 
        
if(flag && shade != null && shade.isEmpty()){
    sd = new Shade(flag, shade);
    out.print(GSONUtil.getGsonStr(sd));
    request.getSession().removeAttribute(shadeKey); //一輪下載完畢 刪除 shadeKey鍵。
}
else {
    sd = new Shade(flag, String.valueOf(new Date().getTime()));
    out.print(GSONUtil.getGsonStr(sd));
}        
        
out.close();