基於jQuery的ajax方法封裝_jquery

來源:互聯網
上載者:User

ajax (ajax開發)簡介

AJAX即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種建立互動式網頁應用的網頁開發技術。

AJAX = 非同步 JavaScript和XML(標準通用標記語言 (SGML)的子集)。

AJAX 是一種用於建立快速動態網頁的技術。

通過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。

在實際的項目裡,ajax的應用頻率很高,所以儘管jquery或者其他的一些類似的js庫做了非常不錯的封裝,仍然有進一步封裝簡化的空間和必要

舉一個例子,很久很久以前,我的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} });

乍一看挺好沒啥問題,但是其實success回調裡的邏輯可能很複雜,甚至可能會出現ajax回調裡再放一個ajax的情況,那這種寫法就很糟糕了,全都雜糅在一起

可以進行一個簡單的封裝,這在之前Deferred對象的隨筆裡已經有提到

function ajax(url, param, type) {// 利用了jquery延遲物件回調的方式對ajax封裝,使用done(),fail(),always()等方法進行鏈式回調操作// 如果需要的參數更多,比如有跨域dataType需要設定為'jsonp'等等,可以考慮參數設定為對象return $.ajax({url: url,data: param || {},type: type || 'GET'});}// 鏈式回調ajax('www.baidu.com/getInfo').done(function(resp) {// 成功回調}).fail(function(err) {// 失敗回調});

但是雖然做到這一步了,問題還是會來,比如我司,成功的回調裡還有一層邏輯判斷,像這樣:

// 我司ajax返回的json資料格式// 當result為false時,msg中往往有錯誤資訊{result: true,data: {name: 'jack'},msg: null}ajax('www.baidu.com/getInfo').done(function(resp) {// 成功回調if(resp.result){// 當resp中result為true時的操作// 往往這個時候要操作處理resp中的data對象資訊}else{// 當result為false時的操作,這時往往會根據resp中的另一屬性msg來判斷具體處理}}).fail(function(err) {// 失敗回調});

問題有二:

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

第二,如果我只想專註處理資料,比如在成功回調裡,我直接拿到要處理要渲染的資料,在失敗的回調裡我直接拿到錯誤的代碼,有沒有這樣的可能做進一步的封裝。

其實這倆問題是一個,總結一句話,就是不想寫那麼多if,else。有一句話我覺得說得很好,邏輯是守恒的,但如果是可預見的邏輯,是有精簡的可能的,我們這種顯然屬於可預見的邏輯。

二次封裝利用了延遲物件的then方法,具體看代碼:

function handleAjax(url, param, type) {return ajax(url, param, type).then(function(resp){// 成功回調if(resp.result){return resp.data; // 直接返回要處理的資料,作為預設參數傳入之後done()方法的回調}else{return $.Deferred().reject(resp.msg); // 返回一個失敗狀態的deferred對象,把錯誤碼作為預設參數傳入之後fail()方法的回調}}, function(err){// 失敗回調console.log(err.status); // 列印狀態代碼});}handleAjax('www.baidu.com/getInfo').done(function(resp){// 當result為true的回調}).fail(function(err){// 當result為false的回調});

這就把之前很雜揉的代碼進一步的的簡化,也方便了維護,比如某一天跟你說result不再是布爾值了,直接改成狀態代碼這樣的東西了,如果按以前一個ajax寫一個判斷,簡直要瘋。

以上所述是小編給大家介紹的基於jQuery的ajax方法封裝,希望對大家有所協助,如果大家有任何疑問請給我留言,小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.