代码改变世界

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

2014-06-21 09:36  金色海洋(jyk)  阅读(4544)  评论(1编辑  收藏

 

  生命不息重构不止!

 

  上一篇写了一下我对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     //补全ajaxInfo
13     //dataType 
14     if (typeof ajaxInfo.dataType == "undefined") ajaxInfo.dataType = Nature.AjaxConfig.ajaxDataType;
15     //cache
16     if (typeof ajaxInfo.cache == "undefined") ajaxInfo.cache = false;
17 
18     //type
19     if (typeof ajaxInfo.formData == "undefined") {
20         ajaxInfo.type = "GET";
21     } else {
22         ajaxInfo.type = "POST";
23         ajaxInfo.data = 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     //处理xhrFields
44     if (typeof ajaxInfo.xhrFields == "undefined") {
45         ajaxInfo.xhrFields = {
46             //允许cors跨域访问时添加cookie
47             withCredentials: true
48         };
49     } else {
50         if (typeof ajaxInfo.xhrFields.withCredentials == "undefined") {
51             ajaxInfo.xhrFields.withCredentials = true;
52         }
53     }
54 
55     //处理error
56     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     //处理success
66     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     //开始执行ajax
80     $.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);

 

 

大家猜猜输出结果是啥?

 

 

 

 

 

2