jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。第2层的方法使用频率最高。
1. load()方法
1.1 载入HTML文档
load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。它的结构为：
load(url[,data][,callback])
| 参数名称 | 类型 | 说明 |
| url | string类型 | 请求html页面的url地址 |
| data(可选) | object类型 | 发送至服务器的key/value数据 |
| callback(可选) | function类型 | 请求完成时的回调函数，无论请求成功或失败 |
1.2 筛选载入的HTML文档
load()方法的URL参数的语法结构为："url selector"。注意，URL和选择器之间有一个空格。
$("#msg").load("ajax.html .para");//只需要加载ajax.html页面中class为"para"的内容
1.3 传递方式
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则会自动转换为POST方式。
$("#resText").load("test.php",{name:"rain",age:"22"},function(){
//...
});
1.4 回调函数
对于必须在加载完成后才能继续的操作，load()方法提供了回调函数，该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象。
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
// responseText: 请求返回的内容
// textStatus: 请求状态：success、error、notmodified、timeout 4种
// XMLHttpRequest: XMLHttpRequest对象
});
在load()方法中，无论Ajax请求是否成功，只要当请求完成后，回调函数就被触发。
2. $.get()方法和$.post()方法
2.1 $.get()方法
$.get()方法使用GET方式来进行异步请求。它的结构为：
$.get(url[,data][,callback][,type])
$.get()方法的回调函数只有两个参数：返回内容data和请求状态status。
|
参数名称 |
类型 |
说明 |
|
url |
String |
请求的HTML页的URL地址 |
|
data（可选） |
Object |
发送至服务器的key/value数据回作为QueryString附加到请求URL中 |
|
callback（可选） |
Function |
载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法 |
|
type（可选） |
String |
服务器端返回内容的格式，包括xml、html、script、json、text和_default |
返回内容data的格式有：
(1)HTML片段
(2)XML文档
由于期待服务器返回的数据格式是XML文档，因此需要在服务端设置Content-Type类型，代码如下：
header("content-type:text/xml;charset=utf-8"); //PHP
(3)JSON文件
2.2 $.post()方法
与$.get()的区别:
(1) get请求会将参数跟在URL后进行传递，而post请求则是作为HTTP消息的实体内容发送给web服务器。
(2) get方式对传输的数据有大小限制(<=2kb)，而使用POST方式传递的数据量不受限制
(3) get方式请求的数据会被浏览器缓存起来，引起安全性问题
(4) get方式和post方式传递的数据在服务器端的获取也不相同。php中，get方式的数据可以用$_GET[]获取，而post方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。
由于post和get方式提交的所有数据都可以通过$_REQUEST[]来获取，因此只需要改变jQuery函数，就可以在get请求和post请求之间切换。
另外，当load()方法带有参数传递时，会使用post方式发送请求。因此也可以使用load()方法来完成同样的功能。如：
$(function(){ $("#send").click(function(){ $("#resText").load("post1.php",{ username:$("username").val(), content:$("#content").val() }); }); });
3. $.getScript()方法和$.getJson()方法
3.1 $.getScript()
有时，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时，动态创建<script>标签。jQuery代码如下：
$(document.createElement("script")).attr("src","test.js").appendTo("head");
或者
$("<script type='text/javascript' src='test.js'></script>").appendTo("head");
但是，这种方式并不理想,jQuery提供了$.getScript()方法来直接加载.js文件:
$(function(){ $("#send").click(function(){ $.getScript("test.js"); }); });
3.2 $.getJSON()
$.getJSON()方法用于加载JSON文件，与$.getScript()方法的用法相同。
$(function(){ $("#send").click(function(){ $.getJSON("test.json",function(data){ //data:返回的数据 }); }); });
4. $.ajax()方法
它是jQuery最底层的Ajax实现。它的结构为：
$.ajax(options)
该方法只有1个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的。
前面用到的$.load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构建的，$.ajax()方法是jQuery最底层的Ajax实现，因此可以用它来代替前面的所有方法。
例如，采用如下代码代替$.getScript()方法：
$(function(){ $("#send").click(function(){ $.ajax({ type:"GET", url:"test.js", dataType:"script" }); }); });
再如使用$.ajax()方法代替$.getJSON()方法：
$(function(){ $("#send").click(function(){ $.ajax({ type:"GET", url:"test.json", dataType:"json", success:function(data){ $("#resText").empty(); var html = ""; $.each(data,function(commentIndex,comment){ html += "<div class='comment'><h6>" + comment["username"] + ":</h6><p class='para'>" + comment["comment"] + "</p></div>"; }); $("#resText").html(html); } }); }); });
5. 序列化元素
5.1 serialize()方法
与jQuery中其他方法一样，serialize()方法也是作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax请求。
$("#send").click(function()
{
$.get("get1.php", $("#form1").serialize(), function(data, status)
{
$("#msg").html(data);
});
});
因为serialize()方法作用于jQuery对象，所以不光只有表单能使用它，其他选择器的元素也都能使用它。
5.2 serializeArray()方法
该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。
5.3 $.param()方法
它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。
var obj = {a:1,b:2,c:3}; var k = $.param(obj); alert(k); //输出a=1&b=2&c=3
7. jQuery中的Ajax全局事件
通过jQuery提供了一些自定义全局函数，能够为各种上与Ajax相关的事件注册回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回调函数；当Ajax请求结束时，会触发ajaxStop()方法的回调函数。
例如：某个网站图片过多，在Ajax请求过程中，只要图片还未加载完毕，就会一直显示“加载中...”的提示信息。可以极大地改善用户的体验。
<div id="loading">加载中...</div>
$("#loading").ajaxStart(function()
{
$(this).show();
});
$("#loading").ajaxStop(function()
{
$(this).hide();
});
如果想使某个Ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数中的global设置为false，jQuery代码如下：
$.ajax() { url: "test.html", global: false //不触发全局Ajax事件 }
完毕！