使用JQuery的Ajax操作html，xml，json数据

博主在上一篇文章使用原生Ajax处理HTML,XML,JSON数据中介绍了原生的Ajax处理三种数据格式的方法，一眼便知是很麻烦的，而且很多的步骤是可以封装起来减少开发人员的痛苦的。比如js的比较优秀的库JQuery就对Ajax有很好的支持。本文会介绍几个常用的方法，至于其它众多的操作方法不是本文介绍的重点，大家可以移步W3Cschool去查询。

首先介绍一个方法load，load方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。最简单的永远都是最强大的，可以很简单的使用它将html数据插入到指定元素中。

load(url,data,function(response,status,xhr))

url是必须参数，后面两个参数可选。data是连同请求发送到服务器的数据。function是规定当请求完成时运行的函数，它的三个额外参数的意思是response - 包含来自请求的结果数据 ;status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"） ;xhr - 包含 XMLHttpRequest 对象 。

代码如下：

<script type="text/javascript">
	$(function(){
		$("a").click(function(){
			// 可以在URL的尾部添加元素选择器，URL和选择器要以空格分开,多个选择器要以逗号分开
			var url = this.href + " h3";
			// load方法是最简单也是最强大的Ajax方法，经常用来加载html文件
			$("#details").load(url);
			return false;
		});
	});
</script>

接下来介绍get方法和post方法

语法格式如下

jQuery.get(url,data,success(response,status,xhr),dataType)

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数解释如下：

url 必需。规定把请求发送到哪个 URL。 
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。 
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。 
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script 或 html）。
操作xml数据的js代码改写如下：

<script type="text/javascript">
	$(function(){
		$("a").click(function(){
			var url = this.href;
			$.get(url,function(data){
				// 将data转为JQuery对象才可以使用JQuery的方法
				var name = $(data).find("name").text();
				var studentId = $(data).find("studentId").text();
				var param = $(data).find("param").text();
				// 先清空当前内容，再添加新的内容
				$("#details").empty().append("<h2>"+name+"</h2><h3>"+studentId+"</h3><h3>"+param+"</h3>");
			});
			return false;
		});
	});
</script>

最后一个方法getJSON，语法格式如下：

jQuery.getJSON(url,data,success(data,status,xhr))

这个函数通过 HTTP GET 请求载入 JSON 数据。我觉得就是对上面的get方法的再一次封装，直接指定了dataType

所以它可以使用的地方就可以使用get方法

对json数据的操作改写如下：

<script type="text/javascript">
	$(function(){
		$("a").click(function(){
			// 可以使用JQuery的attr方法来获取a标签的href属性值
			var url = $(this).attr("href");
			$.getJSON(url,function(data){
				var name = data.person.name;
				var studentId = data.person.studentId;
				var param = data.person.param;
				$("#details").empty().append("<h2>"+name+"</h2><h3>"+studentId+"</h3><h3>"+param+"</h3>");
			});
			return false;
		});
	});
</script>