使用 load() 方法異步請求數(shù)據(jù)
使用load()方法通過 Ajax 請求加載服務(wù)器中的數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中，它的調(diào)用格式為：
load(url,[data],[callback])
參數(shù) url 為加載服務(wù)器地址，可選項 data 參數(shù)為請求時發(fā)送的數(shù)據(jù)，callback 參數(shù)為數(shù)據(jù)請求成功后，執(zhí)行的回調(diào)函數(shù)。
例如，點擊“加載”按鈕時，向服務(wù)器請求加載一個指定頁面的內(nèi)容，加載成功后，將數(shù)據(jù)內(nèi)容顯示在<div>元素中，并將加載按鈕變?yōu)椴豢捎?。如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點擊“加載”按鈕時，通過調(diào)用load()方法向服務(wù)器請求加載 fruit.html 文件中的內(nèi)容，當(dāng)加載成功后，先顯示數(shù)據(jù)，并將按鈕變?yōu)椴豢捎谩?/p>
使用 getJSON() 方法異步加載 JSON 格式數(shù)據(jù)
使用getJSON()方法可以通過 Ajax 異步請求的方式，獲取服務(wù)器中的數(shù)據(jù)，并對獲取的數(shù)據(jù)進行解析，顯示在頁面中，它的調(diào)用格式為：
jQuery.getJSON(url,[data],[callback]) 或 $.getJSON(url,[data],[callback])
其中，url 參數(shù)為請求加載 json 格式文件的服務(wù)器地址，可選項 data 參數(shù)為請求時發(fā)送的數(shù)據(jù)，callback 參數(shù)為數(shù)據(jù)請求成功后，執(zhí)行的回調(diào)函數(shù)。
例如，點擊頁面中的“加載”按鈕，調(diào)用getJSON()方法獲取服務(wù)器中 JSON 格式文件中的數(shù)據(jù)，并遍歷數(shù)據(jù)，將指定的字段名內(nèi)容顯示在頁面中。如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點擊“加載”按鈕時，通過getJSON()方法調(diào)用服務(wù)器中的 sport.json 文件，獲取返回的 data 文件數(shù)據(jù)，并遍歷該數(shù)據(jù)對象，以data[“name”]取出數(shù)據(jù)中指定的內(nèi)容，顯示在頁面中。
使用 getScript() 方法異步加載并執(zhí)行js文件
使用getScript()方法異步請求并執(zhí)行服務(wù)器中的 JavaScript 格式的文件，它的調(diào)用格式如下所示：
jQuery.getScript(url,[callback]) 或 $.getScript(url,[callback])
參數(shù) url 為服務(wù)器請求地址，可選項 callback 參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)。
例如，點擊“加載”按鈕，調(diào)用getScript()加載并執(zhí)行服務(wù)器中指定名稱的 JavaScript 格式的文件，并在頁面中顯示加載后的數(shù)據(jù)內(nèi)容，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點擊“加載”按鈕調(diào)用getScript()方法加載服務(wù)器中的 JavaScript 格式文件后，自動執(zhí)行文件代碼，將數(shù)據(jù)內(nèi)容顯示在<ul>元素中。
使用 get() 方法以 GET 方式從服務(wù)器獲取數(shù)據(jù)
使用get()方法時，采用 GET 方式向服務(wù)器請求數(shù)據(jù)，并通過方法中回調(diào)函數(shù)的參數(shù)返回請求的數(shù)據(jù)，它的調(diào)用格式如下：
$.get(url,[callback])
參數(shù) url 為服務(wù)器請求地址，可選項 callback 參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)。
例如，當(dāng)點擊“加載”按鈕時，調(diào)用get()方法向服務(wù)器中的一個 .php 文件以 GET 方式請求數(shù)據(jù)，并將返回的數(shù)據(jù)內(nèi)容顯示在頁面中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，通過$.get()方法向服務(wù)器成功請求數(shù)據(jù)后，在回調(diào)函數(shù)中通過 data 參數(shù)傳回請求的數(shù)據(jù)，并以 data.name 格式訪問數(shù)據(jù)中各項的內(nèi)容。
使用 post() 方法以 POST 方式從服務(wù)器發(fā)送數(shù)據(jù)
與get()方法相比，post()方法多用于以 POST 方式向服務(wù)器發(fā)送數(shù)據(jù)，服務(wù)器接收到數(shù)據(jù)之后，進行處理，并將處理結(jié)果返回頁面，調(diào)用格式如下：
$.post(url,[data],[callback])
參數(shù) url 為服務(wù)器請求地址，可選項 data 為向服務(wù)器請求時發(fā)送的數(shù)據(jù)，可選項 callback 參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)。
例如，在輸入框中錄入一個數(shù)字，點擊“檢測”按鈕，調(diào)用post()方法向服務(wù)器以 POST 方式發(fā)送請求，檢測輸入值的奇偶性，并顯示在頁面中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點擊“檢測”按鈕時，獲取輸入框中的值，并將該值使用$.post()方法一起發(fā)送給服務(wù)器，服務(wù)器接收該值后并進行處理，最后返回處理結(jié)果。
使用 serialize() 方法序列化表單元素值
使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標(biāo)準(zhǔn)URL編碼文本字符串，直接可用于ajax請求，它的調(diào)用格式如下：
$(selector).serialize()
其中 selector 參數(shù)是一個或多個表單中的元素或表單元素本身。
例如，在表單中添加多個元素，點擊“序列化”按鈕后，調(diào)用serialize()方法，將表單元素序列化后的標(biāo)準(zhǔn) URL 編碼文本字符串顯示在頁面中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點擊“序列化”按鈕后，調(diào)用表單元素本身的serialize()方法，將表單中元素全部序列化，生成標(biāo)準(zhǔn) URL 編碼，各元素間通過&號相聯(lián)。
使用 ajax() 方法加載服務(wù)器數(shù)據(jù)
使用ajax()方法是最底層、功能最強大的請求服務(wù)器數(shù)據(jù)的方法，它不僅可以獲取服務(wù)器返回的數(shù)據(jù)，還能向服務(wù)器發(fā)送請求并傳遞數(shù)值，它的調(diào)用格式如下：
jQuery.ajax([settings]) 或 $.ajax([settings])
其中參數(shù) settings 為發(fā)送 ajax 請求時的配置對象，在該對象中，url表示服務(wù)器請求的路徑，data為請求時傳遞的數(shù)據(jù)，dataType為服務(wù)器返回的數(shù)據(jù)類型，success為請求成功的執(zhí)行的回調(diào)函數(shù)，type為發(fā)送數(shù)據(jù)請求的方式，默認(rèn)為get。
例如，點擊頁面中的“加載”按鈕，調(diào)用ajax()方法向服務(wù)器請求加載一個 txt 文件，并將返回的文件中的內(nèi)容顯示在頁面，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點擊“加載”按鈕時，調(diào)用$.ajax()方法請求服務(wù)器中 txt 文件，當(dāng)請求成功時調(diào)用 success 回調(diào)函數(shù)，獲取傳回的數(shù)據(jù)，并顯示在頁面中。
<body>
<div id="divtest">
<div class="title">
<span class="fl">檢測數(shù)字的奇偶性</span>
<span class="fr">
<input id="btnCheck" type="button" value="檢測" />
</span>
</div>
<ul>
<li>請求輸入一個數(shù)字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url: "http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
dataType: "text",
success: function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
},
type: "get"
});
})
});
</script>
</body>
使用 ajaxSetup() 方法設(shè)置全局 Ajax 默認(rèn)選項
使用ajaxSetup()方法可以設(shè)置 Ajax 請求的一些全局性選項值，設(shè)置完成后，后面的 Ajax 請求將不需要再添加這些選項值，它的調(diào)用格式為：
jQuery.ajaxSetup([options]) 或 $.ajaxSetup([options])
可選項 options 參數(shù)為一個對象，通過該對象設(shè)置 Ajax 請求時的全局選項值。
例如，先調(diào)用ajaxSetup()方法設(shè)置全局的 Ajax 選項值，再點擊兩個按鈕，分別使用ajax()方法請求不同的服務(wù)器數(shù)據(jù)，并將數(shù)據(jù)內(nèi)容顯示在頁面，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用ajaxSetup()方法設(shè)置了 Ajax 請求時的一些全局性的配置選項后，在兩次調(diào)用 ajax 請求服務(wù)器txt文件時，只需要設(shè)置 url 地址即可。
使用 ajaxStart() 和 ajaxStop() 方法
ajaxStart()和ajaxStop()方法是綁定 Ajax 事件。ajaxStart()方法用于在 Ajax 請求發(fā)出前觸發(fā)函數(shù)，ajaxStop()方法用于在 Ajax 請求完成后觸發(fā)函數(shù)。它們的調(diào)用格式為：
$(selector).ajaxStart(function()) 和 $(selector).ajaxStop(function())
其中，兩個方法中括號都是綁定的函數(shù)，當(dāng)發(fā)送 Ajax 請求前執(zhí)行ajaxStart()方法綁定的函數(shù)，請求成功后，執(zhí)行ajaxStop ()方法綁定的函數(shù)。
例如，在調(diào)用ajax()方法請求服務(wù)器數(shù)據(jù)前，使用動畫顯示正在加載中，當(dāng)請求成功后，該動畫自動隱藏，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于使用ajaxStart()和ajaxStop()方法綁定了動畫元素，因此，在開始發(fā)送 Ajax 請求時，元素顯示，請求完成時，動畫元素自動隱藏。
注意：該方法在 1.8.2 下使用是正常的
<body>
<div id="divtest">
<div class="title">
<span class="fl">加載一段文字</span>
<span class="fr">
<input id="btnShow" type="button" value="加載" />
</span>
</div>
<ul>
<li id="divload"></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#divload").ajaxStart(function(){
$(this).html("正在請求數(shù)據(jù)...");
});
$("#divload").ajaxStop(function(){
$(this).html("數(shù)據(jù)請求完成！");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友對我說：" + data.say + "</li>");
}
});
})
});
</script>
</body>
編程練習(xí)
定義一個 json 對象，用于保存學(xué)生的相關(guān)資料
任務(wù)
通過$.each()工具函數(shù)，獲取數(shù)組中各元素的名稱與內(nèi)容，顯示在頁面中。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑戰(zhàn)題</title>
<style>
.ui-table {margin: 20px auto; border-collapse: collapse; font-size: 12px; text-align: center; color: #666;}
.ui-table th, .ui-table td {padding: 4px 8px; border: 1px solid #ccc;}
.ui-table th {background-color: #f0f0f0;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<table class="ui-table" width="800" id="studentInfo">
<caption><h2>XX中學(xué)學(xué)生資料</h2></caption>
<thead>
<tr>
<th style="width:45px">序號</th>
<th>姓名</th>
<th>學(xué)號</th>
<th>性別</th>
<th>年齡</th>
<th>所在班級</th>
<th>富二代</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<input type="button" value="加載資料" onclick="DisplayInfo()">
</td>
</tr>
</tbody>
</table>
<script>
var students = [
{"name": "張三", "id": "00145", "sex": "男", "age": "15", "class": "初一(3)班", "vip": "否"},
{"name": "李四", "id": "00110", "sex": "女", "age": "15", "class": "初二(2)班", "vip": "否"},
{"name": "王五", "id": "00251", "sex": "男", "age": "17", "class": "初一(4)班", "vip": "是"},
{"name": "趙六", "id": "00031", "sex": "女", "age": "16", "class": "初二(3)班", "vip": "否"},
{"name": "吳七", "id": "00009", "sex": "女", "age": "19", "class": "初三(6)班", "vip": "否"},
{"name": "候八", "id": "00352", "sex": "男", "age": "14", "class": "初一(2)班", "vip": "是"},
];
function DisplayInfo() {
var tbody = $("#studentInfo").find("tbody");
tbody.empty();
$.each(students,function(index, student) {
tbody.append(
"<tr><td>" + parseInt(index+1) + "</td><td>" +
student.name + "</td><td>" +
student.id + "</td><td>" +
student.sex + "</td><td>" +
student.age + "</td><td>" +
student.class + "</td><td>" +
student.vip + "</td></tr>");
});
}
</script>
</body>
</html>
