非同步重新整理動態獲取資料
近期在開發過程中接到一個小任務,就是需要pc端需要動態獲取SIS系統傳過來的小指標引數,做到時時重新整理的效果。說到時時重新整理,第一時間大家都會想到ajax非同步重新整理,因為也確實沒有什麼比這實現起來更加簡單的了。
SIS系統本身就是指標多,資料抓取要求時時同步最新的資料庫資料,而且要求要動態的獲取指標名稱展示,按照機組的分組動態的建立展示的表格(也就是有幾個機組建立幾個展示的table)。
要求明確,根據前端設計好的html頁面,先轉換成jsp頁面。然後建立訪問的servlet。jsp頁面將動態表格的內容抽取出來拼接到servlet中,而jsp頁面中只是一個簡單的ajax請求,程式碼如下:function page_click(){
$.ajax({
type : "post",
url : "<%=request.getContextPath()%>/CdGetDtSisdatasServlet/?eventtype=sisDatas",
dataType:"html",
async: false,
data:{},
success : function(data,textStatus){
//alert("成功");
$("#menu").html(data);
},
error:function(data){
alert("出內部錯:"+data);
}
});
}
成功之後直接返回html程式碼,展示轉換過的資料。為做到自動的時時重新整理,js寫一個定時函式:<body onload="setInterval('page_click()',3000)">,前端jsp頁面基本完成。
看servlet的實現。
servlet中的實現也比較簡單了。首先根據需求,將資料庫中的欄位動態的拼裝,變成可以接收sis系統的合法欄位,然後動態獲取資料。接著根據機組號動態插敘資料,分別存放在一個hashmap集合中。然後動態封裝建立表格的方法,部分程式碼塊如下:
{.......
htmldata.append("<td><p><span class=\"sj\">"+v2+"</span></p></td>\r\n");
htmldata.append("<td><p><span class=\"sj\">"+v3+"</span></p></td>\r\n");
htmldata.append("<td><p><span class=\"sj\">"+v4+"</span></p></td>\r\n");
htmldata.append("<td><p><span class=\"sj\">"+v5+"</span></p></td>\r\n");
htmldata.append("<td><p><span class=\"sj\">"+v6+"</span></p></td>\r\n");
htmldata.append(" </tr>\r\n");
}
htmldata.append("</table>\r\n");
return htmldata.toString();
...........
這裡通過一個StrinBuffer 來講html程式碼進行了簡單的拼裝,這樣能最簡單的實現動態的建立表格,最後再主方法中呼叫動態建立表格的方法,最後
String htmltoString=htmldata.toString();
response.getWriter().write(htmltoString);
response.getWriter().flush();
return htmltoString;
這個小功能基本完成,最後附一張效果圖。
此案例是一個簡單的非同步重新整理案例,希望對初學者有所幫助。