2019-06-05
jQuery封裝了Ajax的交互過程幻妓，用戶無需使用XMLHttpRequest對象的原生方法，即可輕松實現(xiàn)Ajax應(yīng)用忱嘹。
load方法
通過Ajax請求從服務(wù)器加載數(shù)據(jù)載入到指定元素中。如果沒有參數(shù)傳遞，則采用GET方式發(fā)送請求躏鱼；反之自動轉(zhuǎn)換為POST方式。
$("選擇器").load(url,data,function(data,status,xhr))
| 參數(shù) | 描述 |
|---|---|
| url | 服務(wù)器地址 |
| data | 可選殷绍。發(fā)送到服務(wù)器的數(shù)據(jù)染苛。其格式為json 注意：如要傳遞數(shù)組元素，可使用如下語法： { 'choices[]': ["Jon", "Susan"]} |
| function(data,status,xhr) | 可選主到。請求完成時運行的函數(shù)茶行。 參數(shù)： data: 服務(wù)器的響應(yīng)數(shù)據(jù) status : 響應(yīng)狀態(tài)（"success", "notmodified", "error", "timeout" 或 "parsererror"） xhr : 包含XMLHttpRequest |
getScript方法
通過get請求載入并執(zhí)行外部的JavaScript文件。
$.getScript(url,function(data,status));
| 參數(shù) | 描述 |
|---|---|
| url | 目標(biāo)JS文件路徑登钥∨鲜Γ可以跨域調(diào)用。 |
| function(data,status) | 可選牧牢。請求成功后執(zhí)行的回調(diào)函數(shù)看锉。 參數(shù)： data : 服務(wù)器響應(yīng)數(shù)據(jù) status : 響應(yīng)狀態(tài)（"success", "notmodified", "error", "timeout" 或 "parsererror"） |
get/post方法
通過get/post方式向服務(wù)器發(fā)送Ajax請求。
$.get(url,data,function(data,status,xhr),dataType)
$.post(url,data,function(data,status,xhr),dataType)
| 參數(shù) | 描述 |
|---|---|
| url | 必需塔鳍。服務(wù)器地址伯铣。 |
| data | 可選。發(fā)送到服務(wù)器的數(shù)據(jù)轮纫。如果參數(shù)是中文腔寡，必須使用encodeURI進(jìn)行轉(zhuǎn)碼，在客戶端接收時掌唾，使用decodeURI進(jìn)行解碼放前。 |
| function(data,status,xhr) | 可選。請求成功時運行的函數(shù)糯彬。 參數(shù)： data – 服務(wù)器響應(yīng)數(shù)據(jù) status – 響應(yīng)狀態(tài)（"success", "notmodified", "error", "timeout" 或 "parsererror"） xhr - 包含 XMLHttpRequest對象 |
| dataType | 可選凭语。服務(wù)器響應(yīng)的數(shù)據(jù)類型。 默認(rèn)jQuery將智能判斷撩扒。 可能的類型："xml"似扔、"html"、"text"、"script"虫几、"json"锤灿、"jsonp" |
getJSON方法
使用get請求來獲得 JSON 數(shù)據(jù)
$.getJSON(url,data,function(data,status,xhr){
});
ajax方法
ajax方法是jQuery實現(xiàn)Ajax的底層方法。是get()辆脸、post()等方法的基礎(chǔ)但校。
$.ajax({
參數(shù)名1:參數(shù)值1,
參數(shù)名2:參數(shù)值2,
… …
});
| 參數(shù)名 | 類型 | 描述 |
|---|---|---|
| url | String | 發(fā)送請求的地址（默認(rèn)為當(dāng)前頁面） |
| type | String | 數(shù)據(jù)請求方式（post或get），默認(rèn)為get |
| data | String 或Object | 發(fā)送到服務(wù)器的數(shù)據(jù)啡氢。如果不是字符串則自動轉(zhuǎn)成字符串格式状囱，如果是get請求方法，那么倘是，該字符串將附在url后面亭枷。 必須為 Key/Value 格式。如果為數(shù)組搀崭，jQuery 將自動為不同值對應(yīng)同一個名稱叨粘。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。 |
| dataType | String | 服務(wù)器返回的數(shù)據(jù)類型瘤睹，如果沒有指定升敲，jQuery將自動根據(jù)HTTP包MIME信息自動判斷，服務(wù)器返回的數(shù)據(jù)根據(jù)自動判斷的結(jié)果進(jìn)行解析轰传，傳遞給回調(diào)函數(shù)驴党，其可用類型為： html:返回純文本的HTML信息，包含Script標(biāo)記會在插入頁面時被執(zhí)行 script:返回純文本JavaScript代碼 text:返回純文本字符串 xml:返回可被jQuery處理的XML文檔 json:返回JSON格式的數(shù)據(jù) |
| beforeSend | Function | 回調(diào)函數(shù)获茬。在發(fā)送請求之前調(diào)用港庄，并且傳入一個 XMLHttpRequest 作為參數(shù)。由于該函數(shù)本身是jQuery事件恕曲，因此鹏氧，如果函數(shù)返回false，則表示取消本次事件 |
| complete | Function | 回調(diào)函數(shù)码俩，請求完成后調(diào)用度帮。該函數(shù)無論數(shù)據(jù)發(fā)送成功或失敗都會調(diào)用，其中有兩個參數(shù)稿存，一個是XMLHttpRequest對象，另一個是strStatus瞳秽，包含成功或錯誤代碼的字符串瓣履。 |
| success | Function | 回調(diào)函數(shù)，請求成功后調(diào)用练俐。該函數(shù)有兩個參數(shù)袖迎，一個是根據(jù)參數(shù)dataType處理后服務(wù)器返回的數(shù)據(jù)，另一個是strStatus，用于描述成功狀態(tài)的字符串燕锥。 |
| error | Function | 回調(diào)函數(shù)辜贵，請求失敗后調(diào)用。該函數(shù)有三個參數(shù)归形，一個是XMLHttpRequest對象托慨，第二個是出錯信息strError，第三個是捕捉到的錯誤對象strObject |
| timeout | Number | 請求超時的時間（毫秒）暇榴，該設(shè)置將覆蓋$.ajaxSetup（）方法中的同樣設(shè)置 |
| global | Boolean | 是否響應(yīng)全局事件厚棵，默認(rèn)true響應(yīng)，false則全局事件$.ajaxStart等將不響應(yīng)蔼紧， |
| async | Boolean | 默認(rèn)值: true婆硬。默認(rèn)設(shè)置下，所有請求均為異步請求奸例。如果需要發(fā)送同步請求彬犯，請將此選項設(shè)置為 false。 注意查吊，同步請求將鎖住瀏覽器躏嚎，用戶其它操作必須等待請求完成才可以執(zhí)行。 |
| cache | Boolean | 是否進(jìn)行緩存菩貌，true表示進(jìn)行緩存卢佣，false表示不進(jìn)行頁面緩存。默認(rèn)值: true箭阶。 |
$.ajax({
url:服務(wù)器地址,
type:請求類型get或post,默認(rèn)為get
cache:是否緩存true/false,
dataType:服務(wù)器返回數(shù)據(jù)的類型虚茶，缺省可自動判斷，默認(rèn)text,
data:向服務(wù)器發(fā)送的請求參數(shù){key:value},
success:function(response){}, 請求成功返回時的回
調(diào)函數(shù),形參response獲取服務(wù)器的返回值
error:function(xhr,status){}失敗時的回調(diào)函數(shù)仇参，形參
status是狀態(tài)信息嘹叫，xhr是當(dāng)前的異步對象
});
設(shè)置Ajax全局選項
在頁面中有時需要多次調(diào)用.ajaxSetup()方法設(shè)置全局性的Ajax默認(rèn)選項。
$.ajaxSetup({參數(shù)名1:參數(shù)值1,參數(shù)名2:參數(shù)值2});
Ajax全局事件
| 事件名稱 | 參數(shù) | 功能描述 |
|---|---|---|
| ajaxComplete(callback) | callback | Ajax請求完成時執(zhí)行怕磨，即使請求并未成功喂饥。該方法會在每個Ajax請求完成時觸發(fā)。 |
| ajaxError(callback) | callback | Ajax請求發(fā)生錯誤時執(zhí)行肠鲫，其中捕捉到的錯誤可以作為最后一個參數(shù)傳遞 |
| ajaxSend(callback) | callback | Ajax請求開始時執(zhí)行 |
| ajaxStart(callback) | callback | Ajax請求發(fā)送前執(zhí)行员帮。無論在何時發(fā)送 Ajax 請求，jQuery 都會檢查是否存在其他 Ajax 請求导饲。如果不存在捞高，則 jQuery 會觸發(fā)該 ajaxStart 事件氯材。在此時，由 .ajaxStart() 方法注冊的任何函數(shù)都會被執(zhí)行硝岗。 |
| ajaxStop(callback) | callback | Ajax請求結(jié)束時執(zhí)行氢哮。當(dāng) AJAX 請求完成時，jQuery 會檢查是否存在更多的 AJAX 請求型檀。如果沒有其他請求正在等待運行冗尤，ajaxStop()方法會運行指定的函數(shù)。 |
| ajaxSuccess(callback) | callback | Ajax請求成功時執(zhí)行 |
表單序列化
jQuery的serialize方法可以自動將提交的表單元素值轉(zhuǎn)換成url參數(shù)(參數(shù)1=值1&參數(shù)2=值2) 贱除。
$("表單選擇器").serialize()
JSON應(yīng)用
方式一：使用eval函數(shù)
eval("(" + 字符串 + ")")
方式二：使用JSON對象
JSON.parse(字符串);//將字符串解析為JSON
JSON.stringify(JSON對象);//將JSON解析為字符串
方式三：使用jQuery
$.parseJSON(字符串)
FormData對象
通過FormData對象可以組裝一組用Ajax發(fā)送的鍵/值對生闲。可以更靈活向服務(wù)器發(fā)送表單數(shù)據(jù)月幌。
語法格式一 ：通過FormData對象發(fā)送表單數(shù)據(jù)
var fd = new FormData(表單元素引用);
語法格式二：通過FormData對象發(fā)送任意鍵值對
var fd = new FormData();
fd.append(鍵,值);
