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

時間 2019-11-12

標籤基於 jquery ajax webapi odata 封裝欄目 JQuery 简体版

原文原文鏈接

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

　　WebApi 的使用帶來了一個顯著的特色，對type有必定的要求。通常ajax的type無非就是兩種，GET和POST。若是用JSONP來跨域的話，就只能用GET。可是如今WebApi來了，type的類型增長了一倍還要多。這個雖然說問題不大，就是多個put、delete，看看要求掌握一下就能夠了。可是我以爲，這個老是要有個過程，另外寫代碼的時候還要想一想是put仍是post，萬一寫錯了，就會帶來沒必要要的麻煩。那麼能不能封裝一下呢？ajax

　　jQuery的ajax使用其實已經很簡單了，可是仍是須要設置幾個參數，那麼能不能在簡潔一點呢？或者說有沒有必要在封裝一下？api

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

咱們仍是先來看看要求

一、 WebApi對type有要求。緩存

二、 OData有本身的使用方式和語法格式。cookie

在看看目標：

一、使用簡單。cors

二、便於更改。post

三、便於更換。學習

　　WebApi 剛纔說過了，OData呢，確實很強大也很靈活，只是太靈活了，致使增長了學習成本和時間，那麼能不能也封裝一下，變成你們熟悉的方式呢？動畫

思路

　　可能有人看到這個圖後回想：我k，用得着這麼複雜嗎？過分設計吧。其實這個看我的的經歷了，經歷過的就很容易理解，沒經歷過的就會很奇怪。最近在看清培兄的大做，就以爲挺奇怪，爲啥要這麼設計呢？實際上是我沒有那樣的經歷，也許之後就理解了吧。url

封裝方式

　　公用屬性的封裝，就要看實際需求了，好比個人項目裏須要對租戶ID進行處理，對head裏的Authorization的處理（存儲token）、cors跨域的處理，訪問成功後的統一處理，失敗後的統一處理等。

　　查詢的封裝，這個就比較複雜一點，由於有OData，要對他的語法有一個通用的「翻譯」，讓不會OData的人也可以快速掌握。最後達到，讓人感受不到有OData的存在。這樣作便於切換，OData是很強大，可是並不意味着必定會一直使用OData，哪天不用了，客戶端的調用代碼總不能也跟着大變臉。因爲剛剛接觸OData，因此封裝也是剛剛開始嘗試，確定不少不完善的地方，感受你們的多多指教！謝過了先。

　　添加和修改的封裝就比較簡單了，設置好type也就沒啥事情了，而後能夠根據本身的實際狀況加點輔助功能，好比設置ID，設置租戶ID等。

　　刪除呢，看着簡單，可是其實是至關的複雜。簡單的說，提交一個請求就完事了；複雜的說呢，是物理刪除仍是邏輯刪除，刪除前要不要作數據完整性的判斷，要不要作級聯刪除。目前呢只是簡單的封裝了一下。

此次封裝，時間比較緊迫，另外對新項目的理解還不夠，好比api的路由規律尚未掌握，原本還想封裝一下URL，可是隻能暫時放棄了。

  1 //對ajax的封裝 //最基礎的一層封裝
  2 Nature.Ajax = function(ajaxInfo) {
  3      
  4     //定義默認值
  5     //type: "GET",                        //訪問方式。
  6     //dataType: Nature.AjaxConfig.ajaxDataType,      //數據類型：JSON、JSONP、text
  7     //cache: true,                        //是否緩存，默認緩存
  8     //urlPara: {},//url後面的參數。必定會加在url後面，不會加到form裏。
  9     //formData: {},//表單裏的參數。若是dataType是JSON，必定加在form裏，不會加在url後面；若是dataType是JSONP的話，只能加在url後面。
 10     //url:  //依靠上層指定
 11 
 12     //補全ajaxInfo
 13     //cache
 14     if (typeof ajaxInfo.cache == "undefined") ajaxInfo.cache = false;
 15 
 16     //type
 17     if (typeof ajaxInfo.formData == "undefined") {
 18         //ajaxInfo.type = "GET";
 19     } else {
 20         //ajaxInfo.type = "POST";
 21         ajaxInfo.data = ajaxInfo.formData;
 22     }
 23    
 24     //處理URL和參數
 25     if (typeof ajaxInfo.url != "undefined") {
 26         //var tmpUrlPara = "";
 27         //var para = ajaxInfo.urlPara;
 28         //for (var key in para) { 
 29         //    tmpUrlPara += "&" + key + "=" + para[key];
 30         //}
 31 
 32         //if (ajaxInfo.url.indexOf('?') >= 0) {
 33         //    //原地址有參數，直接加
 34         //    ajaxInfo.url += tmpUrlPara;
 35         //} else {
 36         //    //原地址沒有參數，變成?再加
 37         //    ajaxInfo.url += tmpUrlPara.replace('&', '?');
 38         //}
 39 
 40         ajaxInfo.url = top.apiUrl + ajaxInfo.url.replace(/{TenantId}/g, top.tenantId);
 41 
 42     }
 43      
 44     //處理 beforeSend
 45     var beforeSend = ajaxInfo.beforeSend;
 46    
 47     ajaxInfo.beforeSend = function (XMLHttpRequest) {
 48         if (typeof beforeSend == "function")
 49             beforeSend(token);
 50 
 51         XMLHttpRequest.setRequestHeader("Authorization", "Bearer " + top.token);
 52     }
 53 
 54     //處理xhrFields
 55     if (typeof ajaxInfo.xhrFields == "undefined") {
 56         ajaxInfo.xhrFields = {
 57             //容許cors跨域訪問時添加cookie
 58             withCredentials: true
 59         };
 60     } else {
 61         if (typeof ajaxInfo.xhrFields.withCredentials == "undefined") {
 62             ajaxInfo.xhrFields.withCredentials = true;
 63         }
 64     }
 65     //使用cors的方式實現跨域
 66     jQuery.support.cors = true;
 67     
 68     //處理error
 69     var error = ajaxInfo.error;
 70     ajaxInfo.error = function(request, textStatus, errorThrown) {
 71         //訪問失敗，自動中止加載動畫，而且給出提示
 72         //獲取返回的錯誤提示
 73 
 74         var errMsg = request.responseText;
 75         if (typeof errMsg != "undefined") {
 76             errMsg = eval("(" + errMsg + ")");
 77             errMsg = errMsg.message;
 78         }
 79         alert("提交" + ajaxInfo.title + "的時候發生錯誤！\r\n<br>" + errMsg);
 80         if (typeof top.spinStop == "function")
 81             top.spinStop();
 82         if (typeof error == "function") error();
 83     };
 84 
 85     //處理success
 86     var success = ajaxInfo.success;
 87     ajaxInfo.success = function(data) {
 88         //顯示調試信息
 89         //if (typeof parent.DebugSet != "undefined")
 90         //    parent.DebugSet(data.debug);
 91 
 92         if (typeof success == "function")
 93             success(data);
 94         
 95     };
 96 
 97     //開始執行ajax
 98     $.ajax(ajaxInfo);
 99 
100    
101 };

 1 //查詢數據
 2 Nature.Ajax.find = function (ajaxInfo) {
 3     ajaxInfo.type = "GET";
 4     var info = ajaxInfo.pagerInfo ;
 5     //處理url，分頁和查詢
 6     if (typeof info != "undefined") {
 7         if (typeof ajaxInfo.data == "undefined") ajaxInfo.data = {};
 8 
 9         if (typeof info.pageSize != "undefined")
10             ajaxInfo.data["$top"] = info.pageSize;
11 
12         if (typeof info.pageIndex != "undefined")
13             ajaxInfo.data["$skip"] = (info.pageIndex - 1) * info.pageSize;
14 
15         if (typeof info.orderby != "undefined" && info.orderby != "")
16             ajaxInfo.data["$orderby"] = info.orderby;
17 
18     }
19 
20     //處理查詢條件
21    
22    
23 
24     //處理返回事件 $orderby
25     var success = ajaxInfo.success;
26 
27     ajaxInfo.success = function (data) {
28         // 
29         //判斷返回信息
30         if (typeof data.message != "undefined") {
31             alert(data.message);
32         } else {
33             if (typeof success == "function")
34                 success(data);
35         }
36     };
37 
38     Nature.Ajax(ajaxInfo);
39 
40 };

//添加數據
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);

};