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();}
);
});
示例見：http://www.bibeault.org/jqia2/chapter8/bootcloset/phase.1.html
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
});
見：http://www.bibeault.org/jqia2/chapter8/bootcloset/phase.2.html
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)
示例見 :http://www.bibeault.org/jqia2/chapter8/ajax.events.html
4. 整合所有知識
見：http://www.bibeault.org/jqia2/chapter8/bootcloset/phase.4a.html
和：http://www.bibeault.org/jqia2/chapter8/bootcloset/phase.4b.html