首页 > 代码库 > ajax的再次封装!(改进版) —— new与不 new 有啥区别?

ajax的再次封装!(改进版) —— new与不 new 有啥区别?

 

  生命不息重构不止!

 

  上一篇写了一下我对ajax的再次封装的方法,收到了很多有价值的回复,比如有童鞋建议用$.extend,一开始还以为要做成插件呢,后来才知道,原来这个东东还可以实现合并。省着自己再去做判断了。

 

  还有童鞋说“要不要多加点传入参数”,这一下提醒我了,ajax有很多参数呀,常用的我考虑进来了,但是还有很多不常用的呢,如果需要的话怎么办?在看看我调用原生ajax的方式,kao,完全不支持增加其他参数吗,这怎么行,改一定要改。于是就改成了这样。

 

  

 1 //对ajax的封装 //最基础的一层封装 2 Nature.Ajax = function(ajaxInfo) { 3  4     //定义默认值 5     //type: "GET",                        //访问方式:如果dataPata不为空,自动设置为POST;如果为空设置为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     //补全ajaxInfo13     //dataType 14     if (typeof ajaxInfo.dataType == "undefined") ajaxInfo.dataType = Nature.AjaxConfig.ajaxDataType;15     //cache16     if (typeof ajaxInfo.cache == "undefined") ajaxInfo.cache = false;17 18     //type19     if (typeof ajaxInfo.formData =http://www.mamicode.com/="undefined") {20         ajaxInfo.type = "GET";21     } else {22         ajaxInfo.type = "POST";23         ajaxInfo.data =http://www.mamicode.com/ ajaxInfo.formData;24     }25    26     //处理URL和参数27     if (typeof ajaxInfo.urlPara != "undefined") {28         var tmpUrlPara = "";29         var para = ajaxInfo.urlPara;30         for (var key in para) {31             tmpUrlPara += "&" + key + "=" + para[key];32         }33 34         if (ajaxInfo.url.indexOf(‘?‘) >= 0) {35             //原地址有参数,直接加36             ajaxInfo.url += tmpUrlPara;37         } else {38             //原地址没有参数,变成?再加39             ajaxInfo.url += tmpUrlPara.replace(‘&‘, ‘?‘);40         }41     }42 43     //处理xhrFields44     if (typeof ajaxInfo.xhrFields == "undefined") {45         ajaxInfo.xhrFields = {46             //允许cors跨域访问时添加cookie47             withCredentials: true48         };49     } else {50         if (typeof ajaxInfo.xhrFields.withCredentials == "undefined") {51             ajaxInfo.xhrFields.withCredentials = true;52         }53     }54 55     //处理error56     var error = ajaxInfo.error;57     ajaxInfo.error = function(request, textStatus, errorThrown) {58         //访问失败,自动停止加载动画,并且给出提示59         alert("提交" + ajaxInfo.title + "的时候发生错误!");60         if (typeof top.spinStop != "undefined")61             top.spinStop();62         if (typeof error == "function") error();63     };64 65     //处理success66     var success = ajaxInfo.success;67     ajaxInfo.success = function(data) {68         //显示调试信息69         if (typeof(parent.DebugSet) != "undefined")70             parent.DebugSet(data.debug);71 72         if (typeof(ajaxInfo.ctrlId) == "undefined")73             success(data);74         else {75             success(ajaxInfo.ctrlId, data);76         }77     };78 79     //开始执行ajax80     $.ajax(ajaxInfo);81  };

 

  虽然还是只有一个参数,但是这个参数是一个集合。可以包含很多的元素(属性)。改进后完全以这个参数为主,进行默认的属性设置,最后直接把这个参数传递给原生ajax,这样调用的时候,可以根据ajax的规则来设定自己需要的属性了。

 

  另外去掉了  defaultInfo。因为看来看去,就是一个Nature.sendDataType 算是默认值,其他的都不算了。所以干脆去掉吧。改进后既可以很方便的调用,也确保了其扩展性,可以增加其他的属性。

 

  

 1 var ajax = Nature.Ajax;  2  3 ajax({ 4             url:"", 5             formData: jsonValue, 6             urlPara: ajaxUrlPara, 7             title: "保存数据", 8             success: function(data) { 9                 if (data.err.length == 0) {10                     alert("保存成功!");11                     //清空表单12              13                 } else {14                     alert(data.err);15                 }16 17                 if (typeof callback == "function") {18                     callback();19                 }20 21             }22         });

 

  好像还是要写不少东东,但是仔细看看的话,可以发现有很多优势,首先明确了哪些参数用url传递,哪些参数用表单post传递。error有了统一的处理,苏测试时success了也可以统一显示调试信息。不用去考虑是post还是get是json还是jsonp,这些都会统一处理。

  

  最后涉及到了一个并发的问题,因为我想实现“复用”,这个函数会被加载到top页面里,其他的子页面都会到top里调用这个函数,那么如果同时打开两个iframe,一起加载,并发了怎么办?会不会产生冲突?如果new的话,并发的时候肯定不会产生冲突,但是jQuery的ajax似乎没有new,那么他是如何处理并发的呢?

 

  我是实践派,遇到问题了首先想到的是写点代码测试一下,然后再去找找原理和理论。于是我就写了个代码模拟测试一下,看看并发的情况。

 

  

 1  var state = 1; 2          3         function fun1(para, timestep) { 4             var temp = para.a1;//内部变量 5  6             para.a1 = para.a1 * 100;//修改参数看看 7  8             this.time = timestep;//这个不new的时候能用吗? 9 10             var self = this;//setTimeout里面用不了这个this,那么江湖规矩。11             12             state ++;//全局变量,不解释13             14             window.setTimeout(function() { //模拟回调15                 console.log(para.name);16                 console.log("para.a1 : " + para.a1);17                 console.log("temp:" + temp);18                 console.log("this.time: " + self.time);19 20 21             },timestep);22         }23 24         fun1({ name: "aa1",a1:10 }, 1000);25         fun1({ name: "aa2", a1: 20 }, 100);26 27         var f1 = new fun1({ name: "aa3", a1: 30 }, 10);

 

 

大家猜猜输出结果是啥?