用JavaScript寫 AJAX 前面已經(jīng)介紹過了唆阿,主要是用JavaScript執(zhí)行異步網(wǎng)絡(luò)請(qǐng)求
用jQuery的相關(guān)對(duì)象來處理AJAX,不但不需要考慮瀏覽器問題锈锤,代碼也能大大簡(jiǎn)化
ajax
jQuery在全局對(duì)象jQuery(也就是$)
綁定了ajax()
函數(shù)驯鳖,可以處理AJAX請(qǐng)求。ajax(url, settings)
函數(shù)需要接收一個(gè)URL和一個(gè)可選的settings
對(duì)象
async:是否異步執(zhí)行AJAX請(qǐng)求久免,默認(rèn)為
true
浅辙,千萬不要指定為false
;method:發(fā)送的
Method
阎姥,缺省為'GET'
记舆,可指定為'POST'
、'PUT'
等呼巴;contentType:發(fā)送POST請(qǐng)求的格式泽腮,默認(rèn)值為
'application/x-www-form-urlencoded; charset=UTF-8'
,也可以指定為text/plain衣赶、application/json
诊赊;data:發(fā)送的數(shù)據(jù),可以是字符串府瞄、數(shù)組或
object
碧磅。如果是GET請(qǐng)求,data將被轉(zhuǎn)換成query附加到URL上摘能,如果是POST請(qǐng)求续崖,根據(jù)contentType
把data
序列化成合適的格式;headers:發(fā)送的額外的HTTP頭团搞,必須是一個(gè)
object
严望;dataType:接收的數(shù)據(jù)格式,可以指定為
'html'逻恐、'xml'像吻、'json'、'text'
等复隆,缺省情況下根據(jù)響應(yīng)的Content-Type
猜測(cè)拨匆。
具體實(shí)例:
var jqxhr = $.ajax('https://httpbin.org/get', {
dataType: 'json'
}).done(function (data) {
ajaxLog('成功, 收到的數(shù)據(jù): ' + JSON.stringify(data));
}).fail(function (xhr, status) {
ajaxLog('失敗: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
ajaxLog('請(qǐng)求完成: 無論成功或失敗都會(huì)調(diào)用');
});
請(qǐng)求結(jié)果
成功, 收到的數(shù)據(jù): {"args":{},"headers":{"Accept":"application/json, text/javascript, */*; q=0.01","Accept-Encoding":"gzip, deflate, br","Accept-Language":"zh-CN,zh;q=0.8,en;q=0.6","Connection":"close","Host":"httpbin.org","User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"},"origin":"114.242.250.124","url":"https://httpbin.org/get"}
請(qǐng)求完成: 無論成功或失敗都會(huì)調(diào)用
get
由于 GET 請(qǐng)求最常見,所以 jQuery 提供了get()
方法
var jqxhr = $.get('/path/to/resource', {
username: 'mazy',
password: 123456
});
第二個(gè)參數(shù)如果是object
挽拂,jQuery自動(dòng)把它變成query string
然后加到 URL 后面
實(shí)際的URL是:
/path/to/resource?username=mazy&password=123456
post
post()
和get()
類似惭每,但是傳入的第二個(gè)參數(shù)默認(rèn)被序列化為application/x-www-form-urlencoded
:
var jqxhr = $.post('/path/to/resource', {
username: 'mazy',
password: 123456
});
實(shí)際構(gòu)造的數(shù)據(jù)username=mazy&password=123456
作為 POST 的body
被發(fā)送。
getJSON
由于 JSON 用得越來越普遍,所以 jQuery 也提供了getJSON()
方法來快速通過 GET 獲取一個(gè) JSON 對(duì)象
var jqxhr = $.getJSON('/path/to/resource', {
username: 'mazy',
password: 123456
}).done(function (data) {
// data已經(jīng)被解析為JSON對(duì)象了
});