ajax的再次封裝！__自然架構

　　jQuery的ajax本來就很方便了，為啥還要在進一步的封裝呢。這個首先要看項目的具體需求了，如果覺得不需要，那麼完全可以直接用jQuery提供的各種ajax的方法。如果像我似地，感覺不太方便的話，那麼完全可以按照自己的想法和需求來再次封裝一下。

 

　　需求：

　　1、調用的時候更加的簡單。

　　2、可以靈活的做各種設定和變化。

　　3、可以滿足一些通用的需求。比如出錯的時候給出提示。

 

　　項目現狀：

　　　　做ajax請求的時候，會有一個載入的動畫，在ajax發起的時候要自動開始，載入完畢之後要自動停止。出錯了也要自動停止，並且給出錯誤提示。請求的URL比較固定，按照增刪改查來分類。要可以跨域，也可以不跨域。需要靈活的進行切換。ajax獲得資料的同時，還會附帶一段調試資訊，需要顯示出來。有專門的處理函數，但是需要調用。

 

　　實現：

　　　　直接上代碼吧。

//對ajax的封裝Nature.Ajax = function (ajax) {    //最基礎的一層封裝           //定義預設值        var defaultInfo = {            type: "GET",                        //訪問方式：如果dataPata不為空白，自動化佈建為POST；如果為空白設定為GET。            dataType: Nature.sendDataType,      //資料類型：JSON、JSONP、text。由配置資訊來搞定，便於靈活設定            cache: true,                        //是否緩衝，預設緩衝            xhrFields: {                //允許跨域訪問時添加cookie。cors跨域的時候需要設定                withCredentials: true            },            urlPata: {},//url後面的參數。一定會加在url後面，不會加到form裡。            formPata: {},//表單裡的參數。如果dataType是JSON，一定加在form裡，不會加在url後面；如果dataType是JSONP的話，只能加在url後面。            //url:  //依靠上層指定            //timeout: 2000,            error: function() {            },  //如果出錯，停止載入動畫，給出提示。也可以增加自己的處理常式            success: function() {            } //成功後顯示debug資訊。也可以增加自己的處理常式        };        //補全ajaxInfo        if (typeof ajaxInfo.dataType == "undefined") {            ajaxInfo.dataType = defaultInfo.dataType;        }                if (typeof ajaxInfo.formPata == "undefined") {            ajaxInfo.type = "GET";        } else {            if (ajaxInfo.dataType == "JSON") {                ajaxInfo.type = "POST";            } else {    //get或者jsonp                ajaxInfo.type = "POST";            }            ajaxInfo.data = ajaxInfo.formPata;        }        if (typeof ajaxInfo.cache == "undefined") {            ajaxInfo.cache = defaultInfo.cache;        }           //處理URL        if (typeof ajaxInfo.urlPata != "undefined") {            var tmpUrlPara = "";            var para = ajaxInfo.urlPata;            for (var key in para) {                tmpUrlPara += "&" + key + "=" + para[key];            }            if (ajaxInfo.url.indexOf('?') >= 0) {                //原地址有參數，直接加                ajaxInfo.url += tmpUrlPara;            } else {                //原地址沒有參數，變成?再加                ajaxInfo.url += tmpUrlPara.replace('&', '?');            }        }        //開始執行ajax        $.ajax({            type: ajaxInfo.type,            dataType: ajaxInfo.dataType,            cache: ajaxInfo.cache,            xhrFields: {                //允許跨域訪問時添加cookie                withCredentials: true            },            url: ajaxInfo.url,              data: ajaxInfo.data,            //timeout: 2000,            error: function() { //訪問失敗，自動停止載入動畫，並且給出提示                alert("提交" + ajaxInfo.title + "的時候發生錯誤。");                if (typeof top.spinStop != "undefined")                    top.spinStop();                if (typeof ajaxInfo.error == "function") ajaxInfo.error();            },            success: function (data) {                if (typeof(parent.DebugSet) != "undefined")                    parent.DebugSet(data.debug);　　//調用顯示調試資訊的函數。                                if (typeof (ajaxInfo.ctrlId) == "undefined")                    ajaxInfo.success(data);                else {                    ajaxInfo.success(ajaxInfo.ctrlId, data);                }            }        });       };

 

　　　　這是最底層的封裝，然後是根據URL的封裝，其實就是避免在代碼裡到處寫URL的問題。

 1 Nature.Data.MetaData = function () { 2  3     var ajax = Nature.Ajax;//簡化一下 4  5  6     /*擷取整頁模式的中繼資料*/ 7     this.ajaxGetMeta = function (ajaxData) { 8  9         ajaxData.url = Nature.resourceUrl + "/MetaData/GetMeta.ashx";10         ajaxData.cache = false;11         12         ajax(ajaxData);13     };14 15     16 17 }18 19 Nature.Data.CusData = function () {20 21     var ajax = Nature.Ajax;22     23   34     //擷取客戶資料35     this.ajaxGetData = function(ajaxData) {36 37         //增刪改查服務的網址38         var url = Nature.resourceUrl;39         if (typeof ajaxData.url == "undefined")40             url += "/Data/GetData.ashx";41         else42             url += ajaxData.url;43 44         ajaxData.url = url;45         ajaxData.cache = false;46 47         ajax(ajaxData);48         49     };50     51     /*刪除資料*/52     this.ajaxDeleteData = function (ajaxData) {53         var url = Nature.resourceUrl;54         55         if (typeof ajaxData.url == "undefined")56             url += "/Data/GetData.ashx";57         else58             url += ajaxData.url;59         60         ajaxData.url = url;61         ajaxData.cache = false;62 63         ajax(ajaxData);64     };65     66 67 }

 

　　　　這個是按照增刪改查的URL地址來定的幾個函數。主要目的就是處理具體的URL，避免代碼裡面到處都是URL的混亂問題。

　　　　最後就是具體應用的地方了。

 1  var load = new Nature.Data.MetaDate(); 2  3   load.ajaxGetMeta({ 4             urlPata: { action: "tree", mdid: 0, dbid: dataBaseId, ProjectID: projectId, cacheKey: 0 }, 5             title: "擷取XXX", 6             success: function (msg) { 7                  8                 if (typeof top.__cache == "undefined") 9                     top.__cache = {};/* 開闢緩衝空間 */10                  11                 top.__cache.treeMeta = msg.data;12                 13                 create2(msg.data);14             }15         });

 

　　這樣調用起來就比較簡單了，避免了一些常用且固定的參數的設定，比如type、dataType、cache、url等。可能有些童鞋會想了，不是有$.get和$.post了嗎，比你的更簡潔吧，你還自己折騰啥。

　　$.get和$.post確實更簡潔，但是不夠靈活，比如cache的設定，有的時候需要緩衝，有的時候不需要緩衝。再比如type，有的頁面需要跨域，有的地方不需要跨域。有的時候要根據項目來統一設定（切換）。所以我自己折騰了一下。

 

　　詳細說明：

　　預設參數裡的幾個屬性的含義。

　　1、title。ajax有可能出錯，出錯了就應該有個提示。但是一個頁面往往有多個ajax，到底是哪個出錯了。所以我設定了一個title的屬性，在error的時候 alert("提交" + ajaxInfo.title + "的時候發生錯誤。");這樣就比較清晰了，至少按照title的屬性值來find一下，可以快速定位。

 

　　2、urlPata和formPata。jQuery的ajax只有一個data的屬性。當get的時候，會把data放到URL裡面，傳遞給伺服器；當POST的時候，會把data放在form裡面，提交給伺服器。這個似乎挺好，但是在post的時候，我需要明確的把一些參數放在URL裡面，一些參數放在form裡面。這個就不能都放在data裡面，我還得自己去拼接URL。麻煩還愛出錯。所以我就分成了兩個屬性urlPata和formPata。

　　　　urlPata肯定會出現在URL裡面。formPata就需要根據情況而定了。JSON的時候會放在form裡面，JSONP的時候就只能放在URL裡面了。

 

　　3、xhrFields。這個就涉及到HTML5.0裡面對post跨域的支援問題了。一般提到跨域，想到的都是JSONP，但是JSONP是偽裝成<script>來實現的跨域，由於js並不支