生命不息重构不止！
上一篇写了一下我对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);
大家猜猜输出结果是啥？