基於jQuery的ajax對WebApi和OData的封裝

來源:互聯網
上載者:User

 WebApi 的使用帶來了一個顯著的特點,對type有一定的要求。一般ajax的type無非就是兩種,GET和POST。如果用JSONP來跨域的話,就只能用 GET。但是現在WebApi來了,type的類型增加了一倍還要多。這個雖說問題不大,就是多個put、delete,看看要求掌握一下就可以了。但是 我覺得,這個總是要有個過程,另外寫代碼的時候還要想想是put還是post,萬一寫錯了,就會帶來不必要的麻煩。那麼能不能封裝一下呢?

  jQuery的ajax使用其實已經很簡單了,但是還是需要設定幾個參數,那麼能不能在簡潔一點呢?或者說有沒有必要在封裝一下?

  這個就是仁者見仁智者見智的問題了,另外還要看環境,看需求。簡單的需求確實沒有必要再次封裝,直接用就好了。如果需求複雜了一點,那麼封裝一下也是有必要的。

我們還是先來看看要求

1、  WebApi對type有要求。

2、    OData有自己的使用方式和文法格式。

在看看目標:

1、  使用簡單。

2、  便於更改。

3、  便於更換。

  WebApi 剛才說過了,OData呢,確實很強大也很靈活,只是太靈活了,導致增加了學習成本和時間,那麼能不能也封裝一下,變成大家熟悉的方式呢?

思路

 

        

  可能有人看到這個圖後回想:我k,用得著這麼複雜嗎?過度設計吧。其實這個看個人的經曆了,經曆過的就很容易理解,沒經曆過的就會很奇怪。最近在看清培兄的大作,就覺得挺奇怪,為啥要這麼設計呢?其實是我沒有那樣的經曆,也許以後就理解了吧。

封裝方式

  公用屬性的封裝,就要看實際需求了,比如我的項目裡需要對租戶ID進行處理,對head裡的Authorization的處理(儲存token)、cors跨域的處理,訪問成功後的統一處理,失敗後的統一處理等。

  查詢的封裝,這個就比較複雜一點,因為有OData,要對他的文法有一個通用的“翻譯”,讓不會OData 的人也能夠快速掌握。最後達到,讓人感覺不到有OData的存在。這樣做便於切換,OData是很強大,但是並不意味著一定會一直使用OData,哪天不 用了,用戶端的調用代碼總不能也跟著大變臉。由於剛剛接觸OData,所以封裝也是剛剛開始嘗試,肯定很多不完善的地方,感覺大家的多多指教!謝過了先。

  添加和修改的封裝就比較簡單了,設定好type也就沒啥事情了,然後可以根據自己的實際情況加點協助工具功能,比如設定ID,設定租戶ID等。

  刪除呢,看著簡單,但是實際上是相當的複雜。簡單的說,提交一個請求就完事了;複雜的說呢,是物理刪除還是邏輯刪除,刪除前要不要做資料完整性的判斷,要不要做串聯刪除。目前呢只是簡單的封裝了一下。

這次封裝,時間比較緊迫,另外對新項目的理解還不夠,比如api的路由規律還沒有掌握,本來還想封裝一下URL,但是只能暫時放棄了。

//對ajax的封裝 //最基礎的一層封裝Nature.Ajax = function(ajaxInfo) {         //定義預設值    //type: "GET",                        //訪問方式。    //dataType: Nature.AjaxConfig.ajaxDataType,      //資料類型:JSON、JSONP、text    //cache: true,                        //是否緩衝,預設緩衝    //urlPara: {},//url後面的參數。一定會加在url後面,不會加到form裡。    //formData: {},//表單裡的參數。如果dataType是JSON,一定加在form裡,不會加在url後面;如果dataType是JSONP的話,只能加在url後面。    //url:  //依靠上層指定    //補全ajaxInfo    //cache    if (typeof ajaxInfo.cache == "undefined") ajaxInfo.cache = false;    //type    if (typeof ajaxInfo.formData == "undefined") {        //ajaxInfo.type = "GET";    } else {        //ajaxInfo.type = "POST";        ajaxInfo.data = ajaxInfo.formData;    }       //處理URL和參數    if (typeof ajaxInfo.url != "undefined") {        //var tmpUrlPara = "";        //var para = ajaxInfo.urlPara;        //for (var key in para) {         //    tmpUrlPara += "&" + key + "=" + para[key];        //}        //if (ajaxInfo.url.indexOf("?") >= 0) {        //    //原地址有參數,直接加        //    ajaxInfo.url += tmpUrlPara;        //} else {        //    //原地址沒有參數,變成?再加        //    ajaxInfo.url += tmpUrlPara.replace("&", "?");        //}        ajaxInfo.url = top.apiUrl + ajaxInfo.url.replace(/{TenantId}/g, top.tenantId);    }         //處理 beforeSend    var beforeSend = ajaxInfo.beforeSend;       ajaxInfo.beforeSend = function (XMLHttpRequest) {        if (typeof beforeSend == "function")            beforeSend(token);        XMLHttpRequest.setRequestHeader("Authorization", "Bearer " + top.token);    }    //處理xhrFields    if (typeof ajaxInfo.xhrFields == "undefined") {        ajaxInfo.xhrFields = {            //允許cors跨域訪問時添加cookie            withCredentials: true        };    } else {        if (typeof ajaxInfo.xhrFields.withCredentials == "undefined") {            ajaxInfo.xhrFields.withCredentials = true;        }    }    //使用cors的方式實現跨域    jQuery.support.cors = true;        //處理error    var error = ajaxInfo.error;    ajaxInfo.error = function(request, textStatus, errorThrown) {        //訪問失敗,自動停止載入動畫,並且給出提示        //擷取返回的錯誤提示        var errMsg = request.responseText;        if (typeof errMsg != "undefined") {            errMsg = eval("(" + errMsg + ")");            errMsg = errMsg.message;        }        alert("提交" + ajaxInfo.title + "的時候發生錯誤!\r\n<br>" + errMsg);        if (typeof top.spinStop == "function")            top.spinStop();        if (typeof error == "function") error();    };    //處理success    var success = ajaxInfo.success;    ajaxInfo.success = function(data) {        //顯示調試資訊        //if (typeof parent.DebugSet != "undefined")        //    parent.DebugSet(data.debug);        if (typeof success == "function")            success(data);            };    //開始執行ajax    $.ajax(ajaxInfo);   };
//查詢資料Nature.Ajax.find = function (ajaxInfo) {    ajaxInfo.type = "GET";    var info = ajaxInfo.pagerInfo ;    //處理url,分頁和查詢    if (typeof info != "undefined") {        if (typeof ajaxInfo.data == "undefined") ajaxInfo.data = {};        if (typeof info.pageSize != "undefined")            ajaxInfo.data["$top"] = info.pageSize;        if (typeof info.pageIndex != "undefined")            ajaxInfo.data["$skip"] = (info.pageIndex - 1) * info.pageSize;        if (typeof info.orderby != "undefined" && info.orderby != "")            ajaxInfo.data["$orderby"] = info.orderby;    }    //處理查詢條件          //處理返回事件 $orderby    var success = ajaxInfo.success;    ajaxInfo.success = function (data) {        //         //判斷返回資訊        if (typeof data.message != "undefined") {            alert(data.message);        } else {            if (typeof success == "function")                success(data);        }    };    Nature.Ajax(ajaxInfo);};
//添加資料 Nature.Ajax.add = function(ajaxInfo) {     ajaxInfo.type = "POST";      //判斷data 。添加 id 和tenantId。     if(typeof ajaxInfo.data != "undefined"){         if(typeof ajaxInfo.data.id != "undefined"){             ajaxInfo.data.id = "00000000000000000000000000000000";         }         if(typeof ajaxInfo.data.tenantId != "undefined"){             ajaxInfo.data.tenantId = top.tenantId;         }     }      Nature.Ajax(ajaxInfo);  };  //修改資料 Nature.Ajax.update = function(ajaxInfo) {     ajaxInfo.type = "PUT";      //判斷data 。添加  tenantId。     if(typeof ajaxInfo.data != "undefined"){                  if(typeof ajaxInfo.data.tenantId != "undefined"){             ajaxInfo.data.tenantId = top.tenantId;         }     }          Nature.Ajax(ajaxInfo);  };  //刪除資料 Nature.Ajax.del = function(ajaxInfo) {     ajaxInfo.type = "DELETE";      Nature.Ajax(ajaxInfo);  };


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.