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