使用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>