js异步请求返回json格式数据填充

最近公司类似SNS的社区项目，开始接触WEB前端技术，在已经切好的页面基础上套页面。

首先要做的，是根据后台提供的接口写前端接口(写成Action,Servlet,JSP都行)，在前端接口进行数据提取与数据拼接，拼成json格式的数据再写回页面中。

然后就是写js函数对返回的json格式数据进行处理，写入HTML元素里面，以达到需求要求。

下面是一个简单的例子
如后台提供了一个获取用户等级的接口

public int getUserLevel(long userId){...}

前端接口(Action函数)

public void getUL()
{
	String json = "";
	json += "{userLevel:" + getUserLevel(userId) + "}";	//拼接成JSON格式
	HttpServletResponse response = org.apache.struts2.ServletActionContext.getResponse();
	response.setContentType("text/html");
	response.getOutputStream().write(json.getBytes());	//写回页面
}

前端JS处理
如页面中有这样一个标签

<span>等级:<dd id="ul"></dd></span>
<script type="text/javascript">
	var ul= $("ul");

	function getUserLevel()
	{
		var ajax = new Haley.Ajax({url:"http://localhost:8080/user/getUL.at?t=" + new Date().getTime(), method:"get",parameters:{"userId":${userId}}}); /* 请求了Action中的getUL方法，用的是自己写的AJAX的类 */
		ajax.onComplete = function(responseObject)
		{
			var response = eval('(' + responseObject.textString + ')');/* 返回的json数据 */

			ul.innerHTML = response.userLevel;/* 将ul标签内的HTML内容设置为返回的用户等级值 */

		};
		ajax.start();
	}
	getUserLevel();/* 这里是为了页面打开或刷新里执行一次此函数 */
</script>

当然，你也可以一次请求多组数据，加入更多更复杂的逻辑。
这不是一篇高深的文章，只是写下当作学习笔记，方便自己和其他初学者 :D 。