jQuery對(duì)ajax操作進(jìn)行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第二層是load()、$.get()、$.post()方法，第3層是$.getScript()和$.getJSON()方法。
$.ajax()
$.ajax()方法是jQuery最底層的Ajax實(shí)現(xiàn)。
結(jié)構(gòu)為：
$.ajax(options);
該方法只有一個(gè)參數(shù)，但在這個(gè)對(duì)象里包含了所需要的請(qǐng)求設(shè)置以及回調(diào)函數(shù)等信息，參數(shù)以key/value存在，所有參數(shù)是可選的。
待更：
load()
- 載入HTML文檔
load方法是jQuery中最為簡單和常用的Ajax方法，能載入遠(yuǎn)程HTML代碼并插入DOM中。
load( url [,data] [,callback]);
- url：String類型，請(qǐng)求HTML頁面的URL地址
- data：Object類型，發(fā)送至服務(wù)器的key/value數(shù)據(jù)
- callback：Function類型，請(qǐng)求完成時(shí)的回調(diào)函數(shù)，無論請(qǐng)求成功或失敗。
首先構(gòu)建一個(gè)被load()方法加載并追加到頁面中的HTML文件。
test.html：
<div class="comment">
<h6>張三:</h6>
<p class="para">沙發(fā)</p>
</div>
<div class="comment">
<h6>李四:</h6>
<p class="para">板凳</p>
</div>
<div class="comment">
<h6>王五:</h6>
<p class="para">地板</p>
</div>
<input type="button" value="Ajax獲取" id="send">
<div class="comment">已有評(píng)論:</div>
<div id="resText"></div>
另一個(gè)HTML：
$(function() {
$("#send").click(function() {
$("#resText").load("./test.html");
});
});
使用http-server運(yùn)行，點(diǎn)擊按鈕后：
- 篩選載入的HTML文檔
上面的例子是將test.html頁面中的內(nèi)容都加載到id為"resText"的元素里，如果只需要加載test.html頁面內(nèi)的某些元素，那么可以使用load()方法的URL參數(shù)來達(dá)到目的。通過URL參數(shù)指定選擇符，就可以很方便的從加載過來的HTML文檔里篩選出所需要的內(nèi)容。
例如只需要加載test.html頁面中的class為para的內(nèi)容，可以：
$("#resText").load("./test.html .para");
- 傳遞方式
load()方法的傳遞方式根據(jù)參數(shù)data來自動(dòng)指定。如果沒有參數(shù)傳遞，則采用GET的方式傳遞；反之，則會(huì)自動(dòng)轉(zhuǎn)換為post方式。
// 無參數(shù)傳遞，則是GET方式
$("#resText").load("test.php",function() {
// ...
})
// 有參數(shù)傳遞，則是post方式
$("#resText").load("test.php",{name:"rain",age:"22"},function() {
// ...
})
- 回調(diào)函數(shù)
對(duì)于必須在加載之后才能繼續(xù)的操作，load()方法提供了回調(diào)函數(shù)。
$("#resText").load("test.html",function(response,textStatus,XMLHttpRequest) {
// responseText：請(qǐng)求返回的內(nèi)容
// textStatus：請(qǐng)求狀態(tài)：success,error,notmodified,timeout4種
// XMLHttpRequest：XMLHttpRequest對(duì)象
})
在load方法中，無論ajax請(qǐng)求是否成功，只要當(dāng)請(qǐng)求完成后（complete），回調(diào)函數(shù)就被觸發(fā)。
$.get()和$.post()
load()方法通常用來從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件，然而這并不能體現(xiàn)Ajax的全部價(jià)值。項(xiàng)目中，如果需要傳遞一些參數(shù)給服務(wù)器中的頁面，那么可以使用$.get()或者$.post()方法。
$.get()和$.post()是jQuery中的全局函數(shù)。
1. $.get()方法
$.get()使用get方式來進(jìn)行異步請(qǐng)求。
$.get( url [,data] [,callback] [,type]);
- url：string類型，請(qǐng)求的HTML頁的URL地址
- data：Object，發(fā)送至服務(wù)器的key/value數(shù)據(jù)會(huì)作為queryString附加到請(qǐng)求URL中
- callback：function類型，載入成功時(shí)回調(diào)函數(shù)（只有當(dāng)response的返回狀態(tài)是success才調(diào)用該方法）自動(dòng)將請(qǐng)求結(jié)果和狀態(tài)傳遞給該方法。
- type：string類型，服務(wù)端返回內(nèi)容的格式，包括XML、HTML、script、json、text和_default
<form action="#" id="form1">
<p>評(píng)論：</p>
<p>姓名：<input type="text" name="username" id="username"></p>
<p>內(nèi)容：<textarea name="content" id="content" cols="20" rows="2"></textarea></p>
<p><input type="button" value="提交" id="send"></p>
</form>
<div class="comment">已有評(píng)論: </div>
<div id="resText"></div>
這是一個(gè)評(píng)論頁面的HTML，通過它來演示$.get()方法。
將姓名和內(nèi)容填寫好后，就可以準(zhǔn)備提交評(píng)論了。
（1）使用參數(shù)
首先，需要確定請(qǐng)求頁面URL的地址。
$("#send").click(function() {
$.get( "get1.php" data參數(shù) ,callback)
})
然后，在提交之前，需要獲取姓名和內(nèi)容的值作為data參數(shù)傳遞給后臺(tái)。
$("#send").click(function() {
$.get("get1.php" , {
username : $("#username").val(),
content : $("#content").val()
} , 回調(diào)函數(shù))
})
如果服務(wù)器接受到傳遞的data數(shù)據(jù)并成功返回，那么就可以通過回調(diào)函數(shù)將返回的數(shù)據(jù)顯示到頁面上。
$.get()方法的回調(diào)函數(shù)只有兩個(gè)參數(shù)：
function(data,textStatus) {
// data : 返回的內(nèi)容，XML、JSON、HTML片段等等
// textStatus : 請(qǐng)求狀態(tài)：success,error,notmodified,timeout4種
}
（2）數(shù)據(jù)格式
服務(wù)器返回的數(shù)據(jù)格式可以有多種，他們都可以完成同樣的任務(wù)，以下是幾種返回格式的對(duì)比。
HTML片段
由于服務(wù)器端返回的數(shù)據(jù)格式是HTML片段，因此并不需要經(jīng)過處理就可以將新的HTML數(shù)據(jù)插入到主頁面中。
$(function() {
$("#send").click(function() {
$.get("get1.php" , {
username : $("#username").val(),
content : $("#content").val()
} , function(data,textStatus) {
$("#resText").html(data); // 將返回的數(shù)據(jù)添加到頁面上
})
})
})
JSON文件
$(function() {
$("#send").click(function() {
$.get("get1.php" , {
username : $("#username").val(),
content : $("#content").val()
} , function(data,textStatus) {
var username = data.username;
var content = data.content;
var txtHTML = "<div class='comment'><h6>"
+ username + "</h6><p class='para'>"
+ content + "</p></div>";
$("#resText").html(txtHTML); // 將返回的數(shù)據(jù)添加到頁面上
})
})
})
2. $.post()方法
- GET請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器。當(dāng)然，在ajax請(qǐng)求中，這種區(qū)別對(duì)用戶不可見。
- GET方式對(duì)傳輸?shù)臄?shù)據(jù)有大小限制（通常不能大于2KB）而是用post方式傳遞的數(shù)據(jù)量要比get方式大得多。（理論上不受限制）
- GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存，因此其他人可以從瀏覽器歷史紀(jì)錄總讀取到這些數(shù)據(jù)，例如賬號(hào)和密碼等，在某種情況下，get方式會(huì)造成嚴(yán)重的安全性問題，而post方式相對(duì)來說就可以避免這些問題。
- GET方式和POST方式傳遞的數(shù)據(jù)在服務(wù)器端的獲取也不相同，在PHP中，get方式的數(shù)據(jù)可以用$_GET[]獲取，而POST方式可以用$_POST[]獲取。兩種方式都可以用$_REQUEST[]來獲取。
由于POST和GET方式提交的所有數(shù)據(jù)都可以通過$_REQUEST[]來獲取，因此只需要改變jQuery函數(shù)，就可以將程序在GET請(qǐng)求和POST請(qǐng)求之間切換。
$(function() {
$("#send").click(function() {
$.post("post1.php" , {
username : $("#username").val(),
content : $("#content").val()
} , function(data,textStatus) {
$("#resText").append(data);
})
})
})
另外，當(dāng)load()方法帶有參數(shù)傳遞時(shí)，會(huì)使用POST方式發(fā)送請(qǐng)求。因此也可以使用load()完成同樣功能。
$(function() {
$("#send").click(function() {
$("#resText").load("post1.php",{
username : $("#username").val(),
content : $("#content").val()
})
})
})
