servlet学习笔记3 使用Ajax获取数据并使用echarts绘制图表

客户端代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>eChart</title>

<!--Step:1 Import a module loader, such as esl.js or require.js-->
<!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
<script src="js/esl.js"></script>

<script>
    function $(obj){
        return document.getElementById(obj);
    }
    var a1 , a2;
    var req = AjaxCreateRequest();
    req.open("POST", "getSimulateData");
    req.onreadystatechange = function(){reqCallback(req);}
    req.send(null);
    function AjaxCreateRequest(){    //返回Ajax对象
        if(window.XMLHttpRequest){    
            return new XMLHttpRequest();
        }else{
            try{
                return new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
    return null;
    }
    function reqCallback(req){
        if(req.readyState == 4){//请求结束后
            if(req.status != 200){
                alter("请求错误");
            }else{
                var ss = req.responseText.split(";");
                a1 = ss[0].split(",");
                a2 = ss[1].split(",");
            }
        }
    }
    
</script>
</head>
<body>
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    
    <script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths:{ 
            echarts:'./js/echarts',
            'echarts/chart/bar' : './js/echarts-map',
            'echarts/chart/line': './js/echarts-map',
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
        ],
        function(ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['Co2浓度','时间']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category'
                        ,data : a1
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'co2',
                        type:'line'
                        ,data: a2
                    }
                ]
            });
        }
    );
    </script>
</body>

</html>

 

服务端代码：收到post请求后返回数据

package swun.phk.cavesimulation.webserver;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class getSimulateData
 */
@WebServlet("/getSimulateData")
public class getSimulateData extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public getSimulateData() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        System.out.println("收到请求，返回数据...");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String str1="2.6, 5.9, 9.0, '-', 28.7, 70.7, '-', 182.2, 48.7, 18.8, 6.0, 2.3, 5.9, 9.0, '-', 28.7, 70.7, '-', 182.2, 48.7, 18.8, 6.0, 2.3";
        String str2="2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3";
        out.append(str1+";"+str2);
        out.flush();
        out.close();
    }

}

 

posted @ 2014-04-17 22:11  phk52  阅读(889)  评论(1)    收藏  举报