1. 使用load()方法異步請求數據
使用load()方法通過Ajax請求加載服務器中的數據，並把返回的數據放置到指定的元素中，它的調用格式爲：load(url,[data],[callback])
參數url爲加載服務器地址，可選項data參數爲請求時發送的數據，callback參數爲數據請求成功後，執行的回調函數
<input id="btnShow" type="button" value="加載" />
<ul></ul>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load("http://www.imooc.com/data/fruit_part.html", function() {
$this.attr("disabled", "true");
});
})
});
</script>
2. 使用getJSON()方法異步加載JSON格式數據
使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務器中的數組，並對獲取的數據進行解析，顯示在頁面中，它的調用格式爲：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url參數爲請求加載json格式文件的服務器地址，可選項data參數爲請求時發送的數據，callback參數爲數據請求成功後，執行的回調函數。
<input id="btnShow" type="button" value="加載" />
<ul></ul>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json", function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
});
});
</script>
3. 使用getScript()方法異步加載並執行js文件
使用getScript()方法異步請求並執行服務器中的JavaScript格式的文件，它的調用格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
參數url爲服務器請求地址，可選項callback參數爲請求成功後執行的回調函數。
<input id="btnShow" type="button" value="加載" />
<ul></ul>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript("http://www.imooc.com/data/sport_f.js", function() {
$this.attr("disabled", "true");
});
})
});
</script>
4. 使用get()方法以GET方式從服務器獲取數據
使用get()方法時，採用GET方式向服務器請求數據，並通過方法中回調函數的參數返回請求的數據，它的調用格式如下：$.get(url,[callback])
參數url爲服務器請求地址，可選項callback參數爲請求成功後執行的回調函數。
<input id="btnShow" type="button" value="加載" />
<ul></ul>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("http://www.imooc.com/data/info_f.php", function(data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友對我說：" + data.say + "</li>");
}, "json");
})
});
</script>
5. 使用post()方法以POST方式從服務器發送數據
與get()方法相比，post()方法多用於以POST方式向服務器發送數據，服務器接收到數據之後，進行處理，並將處理結果返回頁面，調用格式如下：
$.post(url,[data],[callback])
參數url爲服務器請求地址，可選項data爲向服務器請求時發送的數據，可選項callback參數爲請求成功後執行的回調函數。
<ul>
<input id="txtNumber" type="text" size="12" /></li>
</ul>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
var num = $("#txtNumber").val();
$.post("http://www.imooc.com/data/check_f.php", num, function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
});
</script>
6. 使用serialize()方法序列化表單元素值
使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用於ajax請求，它的調用格式如下：
$(selector).serialize()
其中selector參數是一個或多個表單中的元素或表單元素本身。
<form action="">
<ul>
<li>姓名：<input name="Text1" type="text" size="12" /></li>
<li>
<select name="Select1">
<option value="0">男</option>
<option value="1">女</option>
</select>
</li>
<li><input name="Checkbox1" type="checkbox" />資料是否可見 </li>
<li id="litest"></li>
</ul>
</form>
<script type="text/javascript">
$(function () {
$("#btnAction").bind("click", function () {
$("#litest").text($("form").serialize());
})
})
</script>
7. 使用ajax()方法加載服務器數據
使用ajax()方法是最底層、功能最強大的請求服務器數據的方法，它不僅可以獲取服務器返回的數據，還能向服務器發送請求並傳遞數值，它的調用格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中參數settings爲發送ajax請求時的配置對象，在該對象中，url表示服務器請求的路徑，data爲請求時傳遞的數據，dataType爲服務器返回的數據類型，success爲請求成功的執行的回調函數，type爲發送數據請求的方式，默認爲get。
<ul>
<li>請求輸入一個數字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url: "http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type: "post",
success: function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
8. 使用ajaxSetup()方法設置全局Ajax默認選項
使用ajaxSetup()方法可以設置Ajax請求的一些全局性選項值，設置完成後，後面的Ajax請求將不需要再添加這些選項值，它的調用格式爲：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可選項options參數爲一個對象，通過該對象設置Ajax請求時的全局選項值。
<ul>
<li>請求輸入一個數字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
type:"POST",
success: function(data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>9. 使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數，ajaxStop()方法用於在Ajax請求完成後觸發函數。它們的調用格式爲：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個方法中括號都是綁定的函數，當發送Ajax請求前執行ajaxStart()方法綁定的函數，請求成功後，執行ajaxStop ()方法綁定的函數。
<input id="btnShow" type="button" value="加載" />
<ul>
<li id="divload"></li>
</ul>
<script type="text/javascript">
$(function () {
$("#divload").ajaxStart(function() {
$(this).html("正在請求數據...");
});
$("#divload").ajaxStop(function(){
$(this).html("數據請求完成！");
});
$("#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>
10.通過$.each()工具函數，獲取數組中各元素的名稱與內容，顯示在頁面中。
<div>s</div>
<script>
$(function(){
var jsonStu = [{
name: "name1",
score: "score1"
},
{
name: "name2",
score: "score2"
},
{
name: "name3",
score: "score3"
}];
$.each(jsonStu, function(index, stu){
$("div").append("<span>" +index + stu.name + stu.score + "</span>");
});
});
</script>