AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。這篇文章主要介紹了基于jQuery的ajax方法封裝的相關(guān)資料,需要的朋友可以參考下

ajax （ajax開發(fā)）簡(jiǎn)介

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

AJAX = 異步 JavaScript和XML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）。

AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

在實(shí)際的項(xiàng)目里，ajax的應(yīng)用頻率很高，所以盡管jquery或者其他的一些類似的js庫做了非常不錯(cuò)的封裝，仍然有進(jìn)一步封裝簡(jiǎn)化的空間和必要

舉一個(gè)例子，很久很久以前，我的ajax是這么寫的：

$.ajax({

url: 'www.baidu.com/getInfo',

type: 'POST',

data: {

name: 'jack',

age: 18

},

dataType: 'json',

success: function(resp){

// callback

},

error: function(err){

// error code

} 

});

乍一看挺好沒啥問題，但是其實(shí)success回調(diào)里的邏輯可能很復(fù)雜，甚至可能會(huì)出現(xiàn)ajax回調(diào)里再放一個(gè)ajax的情況，那這種寫法就很糟糕了，全都雜糅在一起

可以進(jìn)行一個(gè)簡(jiǎn)單的封裝，這在之前Deferred對(duì)象的隨筆里已經(jīng)有提到

function ajax(url, param, type) {

// 利用了jquery延遲對(duì)象回調(diào)的方式對(duì)ajax封裝，使用done()，fail()，always()等方法進(jìn)行鏈?zhǔn)交卣{(diào)操作

// 如果需要的參數(shù)更多，比如有跨域dataType需要設(shè)置為'jsonp'等等，可以考慮參數(shù)設(shè)置為對(duì)象

return $.ajax({

url: url,

data: param || {},

type: type || 'GET'

});

}

// 鏈?zhǔn)交卣{(diào)

ajax('www.baidu.com/getInfo').done(function(resp) {

// 成功回調(diào)

}).fail(function(err) {

// 失敗回調(diào)

});

但是雖然做到這一步了，問題還是會(huì)來，比如我司，成功的回調(diào)里還有一層邏輯判斷，像這樣:

// 我司ajax返回的json數(shù)據(jù)格式

// 當(dāng)result為false時(shí)，msg中往往有錯(cuò)誤信息

{

result: true,

data: {

name: 'jack'

},

msg: null

}

ajax('www.baidu.com/getInfo').done(function(resp) {

// 成功回調(diào)

if(resp.result){

// 當(dāng)resp中result為true時(shí)的操作

// 往往這個(gè)時(shí)候要操作處理resp中的data對(duì)象信息

}

else{

// 當(dāng)result為false時(shí)的操作，這時(shí)往往會(huì)根據(jù)resp中的另一屬性msg來判斷具體處理

}

}).fail(function(err) {

// 失敗回調(diào)

});

問題有二：

第一，我每個(gè)ajax中都需要寫一個(gè)同樣的相對(duì)固定的邏輯判斷（每個(gè)公司或者項(xiàng)目組可能會(huì)有不同，但是就項(xiàng)目本身而言，或者放大了到公司來說必然是固定的），我覺得很煩。

第二，如果我只想專注處理數(shù)據(jù)，比如在成功回調(diào)里，我直接拿到要處理要渲染的數(shù)據(jù)，在失敗的回調(diào)里我直接拿到錯(cuò)誤的代碼，有沒有這樣的可能做進(jìn)一步的封裝。

其實(shí)這倆問題是一個(gè)，總結(jié)一句話，就是不想寫那么多if，else。有一句話我覺得說得很好，邏輯是守恒的，但如果是可預(yù)見的邏輯，是有精簡(jiǎn)的可能的，我們這種顯然屬于可預(yù)見的邏輯。

二次封裝利用了延遲對(duì)象的then方法，具體看代碼：

function handleAjax(url, param, type) {

return ajax(url, param, type).then(function(resp){

// 成功回調(diào)

if(resp.result){

return resp.data; // 直接返回要處理的數(shù)據(jù)，作為默認(rèn)參數(shù)傳入之后done()方法的回調(diào)

}

else{

return $.Deferred().reject(resp.msg); // 返回一個(gè)失敗狀態(tài)的deferred對(duì)象，把錯(cuò)誤代碼作為默認(rèn)參數(shù)傳入之后fail()方法的回調(diào)

}

}, function(err){

// 失敗回調(diào)

console.log(err.status); // 打印狀態(tài)碼

});

}

handleAjax('www.baidu.com/getInfo').done(function(resp){

// 當(dāng)result為true的回調(diào)

}).fail(function(err){

// 當(dāng)result為false的回調(diào)

});

這就把之前很雜揉的代碼進(jìn)一步的的簡(jiǎn)化，也方便了維護(hù)，比如某一天跟你說result不再是布爾值了，直接改成狀態(tài)碼這樣的東西了，如果按以前一個(gè)ajax寫一個(gè)判斷，簡(jiǎn)直要瘋。

以上所述是小編給大家介紹的基于jQuery的ajax方法封裝，希望對(duì)大家有所幫助