Spring MVC异步刷新Web端代码

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="baseUrl" value="${pageContext.request.contextPath}"></c:set>
<html lang="en-US">
<head>
<head>
<title>ACDP Dashboard</title>

<script type="text/javascript" src="${baseUrl}/resources/js/jquery/jquery-1.9.0.js"></script>
<script type="text/javascript">
    var j = jQuery.noConflict(true);
</script>

<link rel="stylesheet" type="text/css" href="${baseUrl}/resources/css/focusStyles.css" />

<script type="text/javascript" src="${baseUrl}/resources/js/report.script.js"></script>
<script type="text/javascript" src="${baseUrl}/resources/js/focus.assist.js"></script>
<script type="text/javascript" src="${baseUrl}/resources/js/jquery.focus.js"></script>
<script type="text/javascript" src="${baseUrl}/resources/js/ichart.1.2.min.js"></script>

<script type="text/javascript">

    function readDashboard() {
        var stageWidth = screen.width * 25 / 28;
        var stageHeight = screen.height * 17 / 21;
        $(".b").width(screen.width * 25 / 84);
        $(".focusWrap").css({"width": stageWidth, "height": stageHeight});
        $(".focusCon").width(stageWidth);
        //vertical center
        $("#page").css({"width": stageWidth, "margin-top": -(stageHeight) / 2, "margin-left": -(stageWidth) / 2});
        $(".focusL").height(screen.height - 250);
        $(".focusM").css({"width": stageWidth, "height": stageHeight});
        $(".ulFCon li img").css({"width": stageWidth, "height": stageHeight});
        $(".ulFCon li").height(stageHeight);
        $("#j_Focus").Focus();
        $(".projectName").css({"height": screen.height * 17 / 126, "color": "#3e576f", "margin-top": screen.height * 17 / 252 - 5});
    }
    $(document).ready(function(){
        readDashboard();
        // Set the refresh time
        var interval = setInterval("getNewDashboardData()", 60000);
        initDashboard();
    });

function initDashboard() {
    var allReportData = ${allData};
    for(var proName in allReportData) {
        var testData;
        var testLabels;
        var analysisData;
        var deployData;
        var deployLabels;
        for(var paramData in allReportData[proName]) {
            if(paramData == "testReport") {
                testData = allReportData[proName][paramData];
            } else if (paramData == "testLabels") {
                testLabels = allReportData[proName][paramData];
            } else if (paramData == "analysisReport") {
                analysisData = allReportData[proName][paramData];
            } else if (paramData == "deployReport") {
                deployData = allReportData[proName][paramData];
            } else if (paramData == "deployLabels") {
                deployLabels = allReportData[proName][paramData];
            }
            //alert(allReportData[proName][paramData]);
        }

        showiChart2D(proName+"c1","Code Analysis","Ok",analysisData);
        showColumnStacked2D(proName+"c2","Test Result","Ok",testLabels,testData);
        showArea2D(proName+"c3","Job Status","subtitle","footText",deployLabels,deployData);
    }
}

function getNewDashboardData() {
    alert("start post");
    j.post("refreshTheDashboard.shtml",function(result) {
        if(result.code==1000){
            var proIdArray = new Array();
            var proNameArray = new Array();
            // Deal with the project names.
            var theProjectsObj = JSON.parse(result.data["projectNames"]);
            for (var proName in theProjectsObj) {
                proNameArray.push(theProjectsObj[proName]);
                proIdArray.push(theProjectsObj[proName].replace(/\s/g, "").replace(/-/g,""));
            }

            var projectHtml = "";
            projectHtml += "<ul class=\"ulFCon\" id=\"j_FocusCon\">";
            var proNameLength = proNameArray.length;
            for(var i = 0; i < proNameLength; i++){
                var tempItem = proIdArray[i];
                var tempItem1 = tempItem + "c1";
                var tempItem2 = tempItem + "c2";
                var tempItem3 = tempItem + "c3";
                projectHtml = projectHtml + "<li>" +
                        "<div class=\"projectName\">" + proNameArray[i] + "</div>" +
                        "<div class=\"b\">" + "<div id=\""+tempItem1+"\">" + "</div></div>" +
                        "<div class=\"b\">" + "<div id=\""+tempItem2+"\">" + "</div></div>" +
                        "<div class=\"b\">" + "<div id=\""+tempItem3+"\">" + "</div></div>" +
                        "</li>";
            }
            projectHtml = projectHtml + "</ul>";
            console.log("projectHtml:" + projectHtml);
            $(".focusM").html(projectHtml);
            readDashboard();
            // ==============================I am separator===============================
            /*var array = new Array();
            $(".ulFCon").find(".b").each(function(){
                array.push($(this).attr("id"));
            });
            var length = array.length;
            for(var i = 0; i < length; i++) {
                array[i] = array[i].replace(/\s/g, "").replace(/-/g,"");
            }*/
            // ===============================I am separator===============================

            // Deal with the report.
            var allReportDataObj = JSON.parse(result.data["allData"]);
            for(var proName in allReportDataObj) {
                var testData;
                var testLabels;
                var analysisData;
                var deployData;
                var deployLabels;
                for(var paramData in allReportDataObj[proName]) {
                    if(paramData == "testReport") {
                        testData = allReportDataObj[proName][paramData];
                    } else if (paramData == "testLabels") {
                        testLabels = allReportDataObj[proName][paramData];
                    } else if (paramData == "analysisReport") {
                        analysisData = allReportDataObj[proName][paramData];
                    } else if (paramData == "deployReport") {
                        deployData = allReportDataObj[proName][paramData];
                    } else if (paramData == "deployLabels") {
                        deployLabels = allReportDataObj[proName][paramData];
                    }
                    //alert(allReportData[proName][paramData]);
                }

                showiChart2D(proName+"c1","Code Analysis","Ok",analysisData);
                showColumnStacked2D(proName+"c2","Test Result","Ok",testLabels,testData);
                showArea2D(proName+"c3","Job Status","subtitle","footText",deployLabels,deployData);
            }
        }
    },"json");


}

</script>

<style type="text/css">
    .b{ margin:0; padding:0; height:500px; float:left;}
    .b div{ margin:0 2px; padding:0; height:500px;}
    .projectName {
        text-align: center;
        background-color: #FFFFFF;
        font-size: 28px;
        font-weight: 500;

        margin-bottom: 10px;
        /*border-bottom: 1px solid #e1e1eb; margin-top: 30px; margin-bottom: 15px;*/
    }
    /*.projectName h2 {font-size: 28px; font-weight: 500; height: 50px; line-height: 50px; margin-bottom: 10px;}*/
</style>
</head>
<body id="introduction">
<div id="page">
    <div id="container" class="content clearfix">
        <div class="focusCon" id="j_Focus">
            <!-- --------------middle begin------------ -->
            <div class="focusM">
                <ul class="ulFCon" id="j_FocusCon">
                    <c:forEach items="${projectNames}" var="projectName">
                        <li>
                            <div class="projectName">${projectName}</div>
                            <div class="b" id="${projectName.replaceAll(" ","").replaceAll("-", "")}c1"></div>
                            <div class="b" id="${projectName.replaceAll(" ","").replaceAll("-", "")}c2"></div>
                            <div class="b" id="${projectName.replaceAll(" ","").replaceAll("-", "")}c3"></div>
                        </li>
                    </c:forEach>
                </ul>
            </div>
            <!-- ---------------middle end-------------- -->
        </div>
    </div>
</div>
</body>
</html>