这两天要架构一个JSON服务端,用于RGraph实时动态画图。
这数据是实时动态的,所以不可以写死(.txt/.json神马的都不行),于是要选择一种服务端语言。
首先我选择jsp,例如service.jsp
导入类
<%@pagelanguage="java"import="net.sf.json.JSONObject"%>
注意导入以下jar包,不然会报错<%
//json
JSONObject obj = new JSONObject();
String[] monthNames = new String[]{"Jan","Feb","Mar", "Apr","May","June", "July","Aug","Sep", "Oct","Nov","Dec"};
for(int i=0; i<monthNames.length; i++)
{
int num = (int) (Math.random()*100);
obj.put(monthNames[i], num);
}
out.print(obj.toString());
out.flush();
System.out.println(obj.toString());
%>
控制台输出:
{"Jan":2,"Feb":59,"Mar":19,"Apr":78,"May":28,"June":47,"July":2,"Aug":87,"Sep":15,"Oct":79,"Nov":53,"Dec":63}
在前端html里
JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。
采用jQuery与Ajax来获取service.jsp页面的内容:
$.getJSON("service.jsp",function(result){
alert(result);
});
以上代码运行时没有弹出警告
$.get("service.jsp",function(result){
alert(result);
});
这次弹出警告,可以看到内容中含有html标签。我们可以了解到getJSON方法是获取JOSN格式的内容,若不符合,则不运行方法里的内容,
但是它依然请求了service.jsp页面。
再看
$.get("service.jsp",function(result){
var jsonObj = ("(" +result+ ")");
alert(jsonObj.Jan);//获取一月的值
});
浏览器报异常Uncaught SyntaxError,这是由于页面中含有html标签引起的
此路不通,我们换一种方式,采用Servlet
在前端html里import net.sf.json.JSONObject;
@WebServlet("/JsonServlet") //这是新发现,在eclipse里,采用此标记可以不在web.xml里配置servlet
public class JsonServlet extends HttpServlet{
privatestatic final longserialVersionUID = 1L;
public JsonServlet() {
super();
}
protectedvoid doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
//response.setContentType("application/json");
PrintWriter out = response.getWriter();
JSONObject obj =new JSONObject();
String[] monthNames =new String[]{"Jan","Feb", "Mar", "Apr","May", "June", "July","Aug", "Sep", "Oct","Nov", "Dec"};
for(int i=0; i<monthNames.length; i++)
{
int num = (int) (Math.random()*100);
obj.put(monthNames[i], num);
}
out.print(obj.toString());
out.close();
}
protectedvoid doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
this.doGet(request, response);
}
}
在此,JSON服务架构与解析完成var data = new Array();
var labels = new Array();
$.getJSON('./JsonServlet', function(response) {
var index = 0;
$.each(response, function(key, val) {
//alert(key+":"+val);
labels[index] = key;
data[index] = val;
index++;
});
});