js的動態載入、快取、更新以及複用 系列有點卡文，放心會繼續的。先來點更基礎的，為js的載入做點鋪墊。

　　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         else
42             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         else
58             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並不支援post，所以導致無法實現post的跨域提交。現在HTML5.0解決了這個問題，就是cors。我也是最近幾天才弄明白這個。後來發現jQuery也是支援cors的。jQUery.support.cors = true; 這樣就可以開啟cors。然後在測試的時候發現個問題，出於安全考慮，預設情況下cors的跨域是不會附帶cookie資訊的，需要手動設定。於是就出現了xhrFields這一段。當然要完全實現cors，伺服器端也需要做相應的設定，這個會在我的《細說跨域那點事》裡面有詳細的說明。

　　4、error。ajax訪問，難免會出現點小意外，有的是伺服器返回的值有問題，有時候是伺服器報錯了。那麼要怎麼辦呢？於是就出現了這個error的統一處理函式。在這裡首先會根據title屬性給出一個提示，告訴使用者，訪問出錯了。然後會把載入的動畫提示給停掉。一開始在出錯的時候沒有去停止載入動畫，好多使用者就更我說，你那個頁面，轉呀轉呀，轉了n就都沒反應。所以我就加上了這段。

　　5、success。成功之後，呼叫顯示除錯資訊的函式，把除錯資訊給顯示出來。便於除錯和優化。

　　6、defaultInfo。首先以傳遞過來的ajaxInfo為準，如果有了就按照ajaxInfo的來，如果沒有指定，就使用defaultInfo提供的對應屬性來賦值。就是一個預設值的作用。

　　折騰的好處：

　　一開始error裡面，沒有alert的提示，很不可思議吧，但是確實是沒有。後來想想還是加上吧，那麼我改一個地方就ok了，不需要到處都去改。後來又加上了停止載入動畫的功能，現在想想，是不是也要把顯示除錯資訊的給加上呢？有些錯誤也是會返回除錯資訊的呀。如果加的話，也是隻需要改一個地方就ok了。

　　以前不知道cors，學會cors之後發現要附帶cookie的話，還要加上xhrFields，那好吧，就一個地方加上就行了，也不需要到處去改。

　　總之，當變化發生的時候，我只需要改一個地方就ok了，我不需要到處去改，還容易漏掉某某。

ps：

這裡跳過了一個步驟，就是“快取”。不是ajax帶的cache，而是類似於本地儲存（Local Storage）的東東。這個以後會詳細說明。