1. 加载内容到元素中

1.1 使用 jQuery 加载内容

load(url, parameters, callback)

url - 服务器端资源的URL

parameters - 作为请求参数传递的数据，可以是字符串(作为查询字符串)，也可以是对象(属性会被序列化为正确编码的参数)，或者对象组成的数组。如果是对象或数组，则使用POST请求，如果省略或者指定为字符串，则使用GET请求。

callback - 回调函数，传入的参数是响应文本、状态字符串(通常是 success)以及XHR实例，函数上下文是目标元素。

示例：

$('#someContainer').load('someResource');

$('.injectMe').load("/someResource div");

序列化表单数据：serialize() 返回格式化的查询字符串

serializeArray() 返回表单数据组成的数组

1.2 加载动态的 HTML 片段

$("#bootChooserControl").load("/jqia2/action/fetchBootStyleOptions");

$("#bootChooserControl").change(function(event){

$("#productDetailPane").load("/jqia2/action/fetchProductDetails",

{style: $(event.target).val()},

function(){$("[value='']", event.target).remove();}

);

});

2. 发起 GET  和 POST 请求

上面的示例，第2个load()实际上发送的是POST请求，这并不合理，可以改用另一个函数来发起 Ajax 请求。

2.1 使用 GET 获取数据

$.get(url, parameters, callback, type)

url - 服务器端资源的URL

parameters - (字符串|对象|数组)

callback - 可选的回调函数，在请求成功完成时调用。参数是响应主体和文本信息，以及XHR实例。

type - 指定如何解析响应主体，(可选)可以是：html、text、xml、json、script或jsonp。

示例：

$("#bootChooserControl").change(function(event){

$.get("/jqia2/action/fetchProductDetails",

{style: $(event.target).val()},

function(resposne){

$("#productDetailPane").html(response);

$("[value='']", event.target).remove();

} // fn

); // get

});

2.2 获取 JSON 数据

$.getJSON(url, parameters, callback)

2.3 发起 POST 请求

$.post(url, parameters, callback, type)

2.4 实现级联下拉列表

$('#bootChooserControl').load('/jqia2/action/fetchBootStyleOptions');

$('#bootChooserControl').change(function(event){

$('#productDetailPane').load('/jqia2/action/fetchProductDetails',

$(this).serialize()

);

$('#colorChooserControl').load('/jqia2/action/fetchColorOptions',

$(this).serialize(),

function(){

$(this).attr('disabled',false);

$('#sizeChooserControl').attr('disabled',true).html("");

}

);

});

$('#colorChooserControl').change(function(event){

$('#sizeChooserControl').load('/jqia2/action/fetchSizeOptions',

$('#bootChooserControl,#colorChooserControl').serialize(),

function(){

$(this).attr('disabled',false);

}

);

});

$('#selectionsPane').change(function(event){

$('[value=""]',event.target).remove();

});

3. 完全控制 Ajax 请求

3.1 发起带所有参数的Ajax请求

$.ajax(options)

3.2 设置请求默认值

$.ajaxSetup(options)

示例：

$.ajaxSetup({

type: 'POST',

timeout: 5000,

dataType: 'html'

});

3.3 处理 Ajax 事件

局部事件和全局事件。

局部事件由回调函数来处理，全局事件可以通过bind()创建事件处理器。全局事件会广播到DOM中的每个元素上。

事件名称

ajaxStart

beforeSend

ajaxSend

success

ajaxSuccess

error

ajaxError

complete

ajaxComplete

ajaxStop

除了使用bind()，还提供了快捷函数：

ajaxComplete(callback)

ajaxError(callback)

ajaxSend(callback)

ajaxStart(callback)

ajaxStop(callback)

ajaxSuccess(callback)

4. 整合所有知识