內容提綱：
1.Ajax 概述
2.load()方法
3.$.get()和$.post()
4.$.getScript()和$.getJSON()
5.$.ajax()方法
6.表單序列化
發文不易，轉載請注明出處~
一．Ajax 概述
Ajax 這個概念是由 Jesse James Garrett 在 2005 年發明的。 它本身不是單一技術， 是一串技術的集合，主要有：
1.JavaScript，通過用戶或其他與瀏覽器相關事件捕獲交互行為；
2.XMLHttpRequest 對象，通過這個對象可以在不中斷其它瀏覽器任務的情況下向服務器發送請求；
3.服務器上的文件，以 XML、HTML 或 JSON 格式保存文本數據；
4.其它 JavaScript，解釋來自服務器的數據（比如 PHP 從 MySQL 獲取的數據）並將其呈現到頁面上。
由於 Ajax 包含眾多特性，優勢與不足也非常明顯。
Ajax優勢主要有以下幾點：
1.不需要插件支持（一般瀏覽器且默認開啟 JavaScript 即可） ；
2.用戶體驗極佳（不刷新頁面即可獲取可更新的數據） ；
3.提升 Web 程序的性能（在傳遞數據方面做到按需放松，不必整體提交） ；
4.減輕服務器和帶寬的負擔（將服務器的一些操作轉移到客戶端） ；
Ajax 的不足有以下幾點：
1.不同版本的瀏覽器度 XMLHttpRequest 對象支持度不足(比如 IE5 之前)；
2.前進、后退的功能被破壞（因為 Ajax 永遠在當前頁，不會幾率前后頁面） ；
3.搜索引擎的支持度不夠（因為搜索引擎爬蟲還不能理解 JS 引起變化數據的內容） ；
4.開發調試工具缺乏（相對於其他語言的工具集來說，JS 或 Ajax 調試開發少的可憐） 。
使用 Ajax 最關鍵的地方，就是實現異步請求、接受響應及執行回調。那么異步與同步有什么區別呢？
我們普通的 Web 程序開發基本都是同步的，意為執行一段程序才能執行下一段， 類似電話中的通話， 一個電話接完才能接聽下個電話； 而異步可以同時執行多條任務，感覺有多條線路，類似於短信，不會因為看一條短信而停止接受另一條短信。Ajax 也可以使用同步模式執行， 但同步的模式屬於阻塞模式， 這樣會導致多條線路執行時又必須一條一條執行，會讓 Web 頁面出現假死狀態，所以，一般 Ajax 大部分采用異步模式。
二．load()方法
jQuery 對 Ajax 做了大量的封裝，我們使用起來也較為方便，不需要去考慮瀏覽器兼容性。
對於封裝的方式，jQuery 采用了三層封裝：
最底層的封裝方法為：$.ajax()；
第二層封裝了三種方法：.load()、$.get()和$.post()；
最高層是$.getScript()和$.getJSON()方法。
.load()方法有三個參數：
url(必須， 請求 html 文件的 url 地址， 參數類型為 String)；
data(可選，發送的 key/value 數據，參數類型為 Object)；
callback(可選，成功或失敗的回調函數，參數類型為函數 Function)。
如果想讓 Ajax 異步載入一段 HTML 內容，我們只需要一個 HTML 請求的 url 即可。
//HTML
<input type="button" value="異步獲取數據" />
<div id="box"></div>
//jQuery
$('input').click(function () {
$('#box').load('test.html');
});
如果想對載入的 HTML 進行篩選，那么只要在 url 參數后面跟着一個選擇器即可。
//帶選擇器的 url
$('input').click(function () {
$('#box').load('test.html .my');
});
如果是服務器文件，比如.php。一般不僅需要載入數據，還需要向服務器提交數據，那么我們就可以使用第二個可選參數 data。
向服務器提交數據有兩種方式：get 和 post。
//不傳遞 data，則默認采用get 方式
$('input').click(function () {
$('#box').load('test.php?url=googleXXX');
});
//get 方式接受的PHP代碼
<?php
if ($_GET['url'] == 'googleXXX') {
echo '谷歌';
} else {
echo '其他網站';
}
?>
//傳遞 data，則為 post 方式
$('input').click(function () {
$('#box').load('test.php', {
url : ‘google’
});
});
//post 方式接受的 PHP代碼
<?php
if ($_POST['url'] == 'google') {
echo '谷歌';
} else {
echo '其他網站';
}
?>
在 Ajax 數據載入完畢之后，就能執行回調函數 callback，也就是第三個參數。
回調函數也可以傳遞三個可選參數： responseText （請求返回），textStatus （請求狀態)，XMLHttpRequest（XMLHttpRequest 對象）。
1 $('input').click(function () { 2 3 $('#box').load('test.php', { 4 5 url : 'google' 6 7 }, function (response, status, xhr) { 8 9 alert('返回的值為：' + response + '，狀態為：' + status + '，狀態是：' + xhr.statusText); 10 11 }); 12 13 });
注意： status 得到的值， 如果成功返回數據則為：success， 否則為：error。 XMLHttpRequest對象屬於 JavaScript 范疇，可以調用一些屬性如下：
如果成功返回數據， 那么 xhr 對象的 statusText 屬性則返回'OK'字符串。 除了'OK'的狀態字符串，statusText 屬性還提供了一系列其他的狀態說明的值，如下：
三．$.get()和$.post()
.load()方法是局部方法，因為他需要一個包含元素的 jQuery 對象作為前綴。而$.get()和$.post()是全局方法， 無須指定某個元素。 對於用途而言， .load()適合做靜態文件的異步獲取，而對於需要傳遞參數到服務器頁面的，$.get()和$.post()更加合適。
$.get()方法有四個參數，前面三個參數和.load()一樣，多了一個第四參數 type，即服務器返回的內容格式：包括 xml、html、script、json、jsonp 和 text。第一個參數為必選參數，后面三個為可選參數。
//使用$.get()異步返回 html 類型有3種方法：
//1. 通過第二個參數data，字符串鍵值對傳參
1 $('input').click(function () { 2 3 $.get('test.php', 'url=googleXXX',function (response, status, xhr) { 4 5 $('#box').html(response); 6 7 }); 8 9 });
//2. 通過第二個參數data，對象鍵值對傳參，然后自動轉換為問號緊跟傳參
1 $('input').click(function () { 2 3 $.get('test.php', { 4 5 url : 'googleXXX' 6 7 },function (response, status, xhr) { 8 9 $('#box').html(response); 10 11 }); 12 13 });
//3. 通過url問號后面緊跟傳參
1 $('input').click(function () { 2 3 $.post('test.php?url=googleXXX', function (response, status, xhr) { 4 5 $('#box').html(response); 6 7 }); 8 9 });
PS：第四參數 type 是指定異步返回的類型。一般情況下 type 參數是智能判斷，並不需要我們主動設置，如果主動設置，則會強行按照指定類型格式返回。
//使用$.get()異步返回 xml
$('input').click(function () {
$.get('test.xml', function (response, status, xhr) {
$('#box').html($(response).find('root').find('url').text());
}); //type 自動轉為 xml
});
PS：如果載入的是 xml 文件，type 會智能判斷。如果強行設置 html 類型返回，則會把 xml 文件當成普通數據全部返回，而不會按照 xml 格式解析數據。
//使用$.get()異步返回 json
$.get('test.json', function (response, status, xhr) {
alert(response[0].url);
});
//使用$.post()異步返回 html
//1. post提交不能使用問號傳參，可以使用字符串形式的鍵值對傳參
1 $('input').click(function () { 2 3 $.post('test.php', 'url=googleXXX',function (response, status, xhr) { 4 5 $('#box').html(response); 6 7 }); 8 9 });
//2. post提交可以使用對象鍵值對
1 $('input').click(function () { 2 3 $.post('test.php', { 4 5 url : 'ycku' 6 7 },function (response, status, xhr) { 8 9 $('#box').html(response); 10 11 }, 'html'); //PHP文件返回的數據是純文本，默認是html或text 12 13 });
$.post()方法的使用和$.get()基本上一致，他們之間的區別也比較隱晦，基本都是背后的不同，在用戶使用上體現不出。具體區別如下：
1.GET 請求是通過 URL 提交的，而 POST 請求則是 HTTP 消息實體提交的；
2.GET 提交有大小限制（2KB） ，而 POST 方式不受限制；
3.GET 方式會被緩存下來，可能有安全性問題，而 POST 沒有這個問題；
4.GET 方式通過$_GET[]獲取，POST 方式通過$_POST[]獲取。
四．$.getScript()和$.getJSON()
jQuery 提供了一組用於特定異步加載的方法：
$.getScript()，用於加載特定的 JS 文件；
$.getJSON()，用於專門加載 JSON 文件。
PS：這樣，就不需要前面第四個參數type了！
有時我們希望能夠特定的情況再加載 JS 文件，而不是一開始把所有 JS 文件都加載了，這時可以使用$.getScript()方法。
//點擊按鈕后再加載 JS 文件
$('input').click(function () {
$.getScript('test.js');
});
$.getJSON()方法是專門用於加載 JSON 文件的，使用方法和之前的類似。
$('input').click(function () {
$.getJSON('test.json', function (response, status, xhr) {
alert(response[0].url);
});
});
五．$.ajax()
$.ajax()是所有 ajax 方法中最底層的方法，所有其他方法都是基於$.ajax()方法的封裝。這個方法只有一個參數，傳遞一個各個功能鍵值對的對象。
//$.ajax 使用
1 $('input').click(function () { 2 3 $.ajax({ 4 5 type : 'POST', //這里可以換成 GET 6 7 url : 'test.php', 8 9 data : { 10 11 url : 'googleXXX' 12 13 }, 14 15 success : function (response, stutas, xhr) { 16 17 $('#box').html(response); 18 19 } 20 21 }); 22 23 });
PS：對於 data 屬性，如果是 GET 模式，可以使用三種之前說所的三種形式。如果是POST 模式可以使用之前的兩種形式。
六．表單序列化
Ajax 用的最多的地方莫過於表單操作，而傳統的表單操作是通過 submit 提交將數據傳輸到服務器端。如果使用 Ajax 異步處理的話，我們需要將每個表單元素逐個獲取才方能提交。這樣工作效率就大大降低。
//常規形式的表單提交
1 $('form input[type=button]').click(function () { 2 3 $.ajax({ 4 5 type : 'POST', 6 7 url : 'test.php', 8 9 data : { 10 11 user : $('form input[name=user]').val(), 12 13 email : $('form input[name=email]').val() 14 15 }, 16 17 success : function (response, status, xhr) { 18 19 alert(response); 20 21 } 22 23 }); 24 25 });
PS：表單元素特別多的情況下，寫起來非常麻煩，容易出錯。復制提交的JS內容時，data屬性需要修改的非常多。
使用表單序列化方法.serialize()，會智能的獲取指定表單內的所有元素。這樣，在面對大量表單元素時，會把表單元素內容序列化為字符串，然后再使用 Ajax 請求。
//使用.serialize()序列化表單內容
1 $('form input[type=button]').click(function () { 2 3 $.ajax({ 4 5 type : 'POST', 6 7 url : 'test.php', 8 9 data : $('form').serialize(), 10 11 success : function (response, status, xhr) { 12 13 alert(response); 14 15 } 16 17 }); 18 19 }); 20 21
serialize()方法不但可以序列化表單內的元素，還可以直接獲取單選框、復選框和下拉列表框等內容。
//使用序列化得到選中的元素內容
$(':radio').click(function () {
$('#box').html(decodeURIComponent($(this).serialize()));
});
除了.serialize()方法，還有一個可以用於返回 JSON 數據的方法：.serializeArray()。這個方法可以直接把數據整合成鍵值對的 JSON 對象。
$(':radio').click(function () {
console.log($(this).serializeArray());
var json = $(this).serializeArray();
$('#box').html(json[0].value);
});
有時，我們可能會在同一個程序中多次調用$.ajax()方法。而它們很多參數都相同，這個時候我們可以使用 jQuery 提供的$.ajaxSetup()請求默認值來初始化參數。
1 $('form input[type=button]').click(function () { 2 3 $.ajaxSetup({ 4 5 type : 'POST', 6 7 url : 'test.php', 8 9 data : $('form').serialize() 10 11 }); 12 13 $.ajax({ 14 15 success : function (response, status, xhr) { 16 17 alert(response); 18 19 } 20 21 }); 22 23 });
在使用 data 屬性傳遞的時候，如果是以對象形式傳遞鍵值對，可以使用$.param()方法將對象轉換為字符串鍵值對格式。
var obj = {a : 1, b : 2, c : 3};
var form = $.param(obj);
alert(form);
注意：使用$.param()將對象形式的鍵值對轉為 URL 地址的字符串鍵值對，可以更加穩定准確的傳遞表單內容。因為有時程序對於復雜的序列化解析能力有限，所以直接傳遞 obj對象要謹慎。
For my Lover, C!
Thank you ,MR.LEE!