ajax请求和解析json数据

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建快速动态网页的技术一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。

1、jQuery ajax()方法用于执行 AJAX（异步 HTTP）请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

jQuery ajax()常用格式：

$.ajax({
	url:'${ctx}/servlet/ReceUserInfoServlet?type=SelectUserDetail', /* url:请求地址 */
	type:'post', /* type:请求类型：post/get */
	data:{ /* data:发送给服务器的数据 */
		ReceUserInfoID:receUserInfoID /* 自己声明的对象 */
	},
	dataType:'json', /* dataType:服务器返回的数据类型 text/xml/script/html/json/jsonp */
	success:function(data){ /* 回调函数 */
		console.log(data);
	}
});

服务器servlet传json数据到jsp：

public void SelectUserDetail(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	response.setContentType("text/json");
//response.setContentType("application/json;charset=UTF-8");
	String ReceUserInfoID = request.getParameter("ReceUserInfoID");
	SYS_ReceUserInfo info = infoService.selectUserDetail(Integer.parseInt(ReceUserInfoID));
	PrintWriter writer = response.getWriter();
	writer.write(ToJsonUtil.toJson(info));
}

jsp用ajax()方法请求，通过回调函数处理服务器返回的json数据：

success:function(data){ /* 回调函数 */
	console.log(data);
}

获取返回值是Object的json数据内容：

object下有个data数组，该数组里有相对应的值，就是一个以键值对形式存储属性的一个集合，每一个属性有一个特定的名称，并与名称相对应的值，其实就是映射。然后获取数组里相对应的值：

success:function(data){ /* 回调函数 */
	console.log(data);
	d = data.data;
	d[0].IDNum; /* 获取json传过来的数据 */
}

2、手动写ajax实现

var xmlhttp;
if (window.XMLHttpRequest)
{
	//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	xmlhttp=new XMLHttpRequest();
}
else
{
	// IE6, IE5 浏览器执行代码
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("get","${ctx}/servlet/ReceUserInfoServlet?type=SelectUserDetail&ReceUserInfoID=" + receUserInfoID,true);//get请求
xmlhttp.send();

xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		var jsonObj=eval("(" + xmlhttp.responseText + ")");
		console.log(jsonObj);
	}
}

该请求使用get请求，当然还可以用post请求：

xmlhttp.open("post","${ctx}/servlet/ReceUserInfoServlet?type=SelectUserDetail",true);//post请求
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("type=SelectUserDetail&ReceUserInfoID=" + receUserInfoID);

通过判断响应服务器返回的json数据：

xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		var jsonObj=eval("(" + xmlhttp.responseText + ")");
		console.log(jsonObj);
	}
}

当然，返回值也是Object的json数据内容，获取其中的值也一样：

var jsonObj=eval("(" + xmlhttp.responseText + ")");
d = jsonObj.data;
d[0].IDNum;

补充：

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

onreadystatechange事件：