ajax的再次封裝！(改進版) —— new與不 new 有啥區別？

 

　　生命不息重構不止！

 

　　上一篇寫了一下我對ajax的再次封裝的方法，收到了很多有價值的回復，比如有童鞋建議用$.extend，一開始還以為要做成插件呢，后來才知道，原來這個東東還可以實現合並。省着自己再去做判斷了。

 

　　還有童鞋說“要不要多加點傳入參數”，這一下提醒我了，ajax有很多參數呀，常用的我考慮進來了，但是還有很多不常用的呢，如果需要的話怎么辦？在看看我調用原生ajax的方式，kao，完全不支持增加其他參數嗎，這怎么行，改一定要改。於是就改成了這樣。

 

　　

//對ajax的封裝 //最基礎的一層封裝
Nature.Ajax = function(ajaxInfo) {

    //定義默認值
    //type: "GET",                        //訪問方式：如果dataPata不為空，自動設置為POST；如果為空設置為GET。
    //dataType: Nature.AjaxConfig.ajaxDataType,      //數據類型：JSON、JSONP、text
    //cache: true,                        //是否緩存，默認緩存
    //urlPara: {},//url后面的參數。一定會加在url后面，不會加到form里。
    //formData: {},//表單里的參數。如果dataType是JSON，一定加在form里，不會加在url后面；如果dataType是JSONP的話，只能加在url后面。
    //url:  //依靠上層指定

    //補全ajaxInfo
    //dataType 
    if (typeof ajaxInfo.dataType == "undefined") ajaxInfo.dataType = Nature.AjaxConfig.ajaxDataType;
    //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.urlPara != "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('&', '?');
        }
    }

    //處理xhrFields
    if (typeof ajaxInfo.xhrFields == "undefined") {
        ajaxInfo.xhrFields = {
            //允許cors跨域訪問時添加cookie
            withCredentials: true
        };
    } else {
        if (typeof ajaxInfo.xhrFields.withCredentials == "undefined") {
            ajaxInfo.xhrFields.withCredentials = true;
        }
    }

    //處理error
    var error = ajaxInfo.error;
    ajaxInfo.error = function(request, textStatus, errorThrown) {
        //訪問失敗，自動停止加載動畫，並且給出提示
        alert("提交" + ajaxInfo.title + "的時候發生錯誤！");
        if (typeof top.spinStop != "undefined")
            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(ajaxInfo.ctrlId) == "undefined")
            success(data);
        else {
            success(ajaxInfo.ctrlId, data);
        }
    };

    //開始執行ajax
    $.ajax(ajaxInfo);
 };

 

　　雖然還是只有一個參數，但是這個參數是一個集合。可以包含很多的元素（屬性）。改進后完全以這個參數為主，進行默認的屬性設置，最后直接把這個參數傳遞給原生ajax，這樣調用的時候，可以根據ajax的規則來設定自己需要的屬性了。

 

　　另外去掉了  defaultInfo。因為看來看去，就是一個Nature.sendDataType 算是默認值，其他的都不算了。所以干脆去掉吧。改進后既可以很方便的調用，也確保了其擴展性，可以增加其他的屬性。

 

　　

var ajax = Nature.Ajax; 

ajax({
            url:"",
            formData: jsonValue,
            urlPara: ajaxUrlPara,
            title: "保存數據",
            success: function(data) {
                if (data.err.length == 0) {
                    alert("保存成功！");
                    //清空表單
             
                } else {
                    alert(data.err);
                }

                if (typeof callback == "function") {
                    callback();
                }

            }
        });

 

　　好像還是要寫不少東東，但是仔細看看的話，可以發現有很多優勢，首先明確了哪些參數用url傳遞，哪些參數用表單post傳遞。error有了統一的處理，蘇測試時success了也可以統一顯示調試信息。不用去考慮是post還是get是json還是jsonp，這些都會統一處理。

　　

　　最后涉及到了一個並發的問題，因為我想實現“復用”，這個函數會被加載到top頁面里，其他的子頁面都會到top里調用這個函數，那么如果同時打開兩個iframe，一起加載，並發了怎么辦？會不會產生沖突？如果new的話，並發的時候肯定不會產生沖突，但是jQuery的ajax似乎沒有new，那么他是如何處理並發的呢？

 

　　我是實踐派，遇到問題了首先想到的是寫點代碼測試一下，然后再去找找原理和理論。於是我就寫了個代碼模擬測試一下，看看並發的情況。

 

　　

 var state = 1;
        
        function fun1(para, timestep) {
            var temp = para.a1;//內部變量

            para.a1 = para.a1 * 100;//修改參數看看

            this.time = timestep;//這個不new的時候能用嗎？

            var self = this;//setTimeout里面用不了這個this，那么江湖規矩。
            
            state ++;//全局變量，不解釋
            
            window.setTimeout(function() { //模擬回調
                console.log(para.name);
                console.log("para.a1 : " + para.a1);
                console.log("temp:" + temp);
                console.log("this.time: " + self.time);


            },timestep);
        }

        fun1({ name: "aa1",a1:10 }, 1000);
        fun1({ name: "aa2", a1: 20 }, 100);

        var f1 = new fun1({ name: "aa3", a1: 30 }, 10);

 

 

大家猜猜輸出結果是啥？