Echarts实时获取后台数据之三：Ajax实时获取数据

使用Ajax之后，效果就是图会根据后台数据实时变化，不会有加载动画。
首先，本人没用使用任何前端框架，用的是原始的Ajax，不需要导入任何文件。
代码如下：

function userAjax() {
	var dom = document.getElementById("userContainer");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	var xmlhttp = getXMLHttpRequest();
	// 绑定回调函数
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var Ajaxdata = [];
			var Ajaxcats = [];
			var i = 0;
			var jsonObj = eval("(" + xmlhttp.responseText + ")");
			for ( var key in jsonObj[0]) {
				// alert(key + \':\' + jsonObj[0][key]);
				Ajaxcats[i] = key;
				Ajaxdata[i] = jsonObj[0][key];
				i++;
			}
			var series = [];
			series.push({
				data : Ajaxdata,
				type : \'bar\',
				label : {
					show : true,
					position : \'top\'
				},
			});
			option = {
				title : {
					text : \'近12月注册用户统计\',
					subtext : \'纯属虚构\',
					x : \'center\'
				},
				xAxis : {
					type : \'category\',
					data : Ajaxcats,
					axisLabel : {
						rotate : \'30\',
					}
				},
				yAxis : {
					type : \'value\'
				},
				grid : {
					right : \'0px\',
				},
				
				series : series
			};
			;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		}
	};
	// 3.open
	xmlhttp.open("GET", "/shixi/userAjax");
	// 4.send
	xmlhttp.send(null);
}

然后在用过setInterval函数设置定时调用这个函数即可实现功能，后台的话将数据存储到map中，然后转换为json数据，通过

response.getWriter().write(json.toString());

将数据传到前台。
其实很多框架中都封装了Ajax，如jQuery中，使Ajax的使用更加简洁方便，以后有写的话在来更新。